4

I am trying to insert a box strip in between rows of divs, how can I target the end of each row's div?

Here's a JSFiddle of the divs: http://jsfiddle.net/5Sn94

Here's the code:

<div>
    <img src="//placehold.it/50x50">
</div>
<div>
    <img src="//placehold.it/50x50">
</div>
<div>
   <img src="//placehold.it/50x50">
</div>

After a while, the divs will go onto the next line, creating a new 'row'. How can I insert a div which spans across the full page width, underneath a row of divs.

To show you what I want to achieve, visit this link on Google: http://bit.ly/1329rDn

And then you'll see if you click any image, it will open that new image bigger inbetween the div rows, how was this achieved? And how can I do the same?

Stephen Jenkins
  • 1,776
  • 3
  • 24
  • 39
  • did you use clear property ? – kirugan Mar 17 '13 at 19:35
  • 1
    You are going to need to calculate the width of the divs, and when their accumulated width is greater than the container, you've started a new row, so you can insert the "display" after the last in that "row". This will need to be recalculated when the window resizes. – the system Mar 17 '13 at 19:35
  • @thesystem Yep that's what I'd like to do (sounds spot on). Any ideas on how to even attempt it? – Stephen Jenkins Mar 17 '13 at 19:37
  • You could add a span after *every* div. Then use jQuery to filter those spans occur at offset 0, then apply your goodies to that. This has the advantage that it is responsive. You can run an update on('resize'... – Cris Stringfellow Mar 17 '13 at 19:46
  • @Halcyon21: I'd really suggest trying to do it on your own. Take it a step at a time, and when you get stuck on something specific that you just can't figure out, ask about it. – the system Mar 17 '13 at 19:51

3 Answers3

2

I think this can help you in your investigations:

div {
    display: inline-block; // <-- use display: inline-block instead of float: left
    margin: 0 15px 0 0;
    cursor: pointer;
}
.expander {
    background: coral;
    height: 100px;
    width: 100%;
    margin-bottom: 6px;
    float: left; // <-- this float makes the trick
}

http://jsfiddle.net/5Sn94/14/

.expander is a div which needs to be inserted after target (hovered in my example) element. It has 100% width to occupy whole horizontal space.

To insert expander after hovered div I used this javascript (inside for loop):

div[i].onmouseover = function() {
    d.innerHTML = 'Details about div #' + this.dataset.id;
    this.parentNode.insertBefore(d, this.nextSibling).style.display = 'block';
}

You can insertAfter in jQuery, etc.

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • That works really well! One question though (and I am using jQuery so feel free to use)... Let's say 'expander' is already created, but set to display none, and on click, I want to show the expander, using 'fadeIn' method. How would you convert your function to move it on a click function and not a hover? – Stephen Jenkins Mar 17 '13 at 19:56
  • Love this, perfect. A good learning experience for me too, and a great use of CSS. Thank you! – Stephen Jenkins Mar 17 '13 at 20:15
0

You can use document.getElementsByTagName but it will only work if you don't have any other divs on the page http://jsfiddle.net/5Sn94/2/

var divs = document.getElementsByTagName('div');
divs[divs.length-1].style.border = '1px solid red';
jcubic
  • 61,973
  • 54
  • 229
  • 402
  • Thanks jcubic, but what I want to achieve is targeting the div at the end of the _row_ and not the entire list of divs. So if there are 5 rows of divs, the end div of each line, will be highlighted red. – Stephen Jenkins Mar 17 '13 at 19:35
  • With what? The HTML doesn't need to be updated to achieve what I'm looking for, Google have done it using rows of divs. – Stephen Jenkins Mar 17 '13 at 19:38
  • @Halcyon21 sorry misunderstood your question. – jcubic Mar 17 '13 at 19:41
-1

Using jQuery, you can use the last-child selector: http://jsfiddle.net/5Sn94/1/

MattDiamant
  • 8,561
  • 4
  • 37
  • 46