SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    check height of sibling div with js?

    So..

    If I have this:

    Code HTML4Strict:
    <div class="container">
    <div class="first inner">ksjdkaskdksd content</div>
    <div class="middle inner">just a line of content at the bottom</div>
    <div class="last inner">ksjdkaskdksd content</div>
    </div>

    And want the middle div to have the same height as its first siblings (class "first"). How could I arhieve this using Javascript?

    EDIT: the height of the divs are dynamic, as it is a responsive site.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Why not do it with CSS?

  3. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Why not do it with CSS?
    How can I do it with CSS? table-cell method?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ReGGaeBOSS View Post
    table-cell method?
    Yes. Here's a simple example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    .container {display: table; table-layout: fixed; width: 50%; margin:0 auto;}
    .container > div {display: table-cell; }
    .middle {background: rgba(4,66,33,0.4);}
    
    </style>
    </head>
    <body>
    
    <div class="container">
    <div class="first inner">ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content </div>
    <div class="middle inner">just a line of content at the bottom</div>
    <div class="last inner">ksjdkaskdksd content</div>
    </div>
    
    </body>
    </html>

  5. #5
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes. Here's a simple example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    .container {display: table; table-layout: fixed; width: 50%; margin:0 auto;}
    .container > div {display: table-cell; }
    .middle {background: rgba(4,66,33,0.4);}
    
    </style>
    </head>
    <body>
    
    <div class="container">
    <div class="first inner">ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content </div>
    <div class="middle inner">just a line of content at the bottom</div>
    <div class="last inner">ksjdkaskdksd content</div>
    </div>
    
    </body>
    </html>
    Thanks, But how will this work on smaller devices when the three divs stack on top of each other?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ReGGaeBOSS View Post
    Thanks, But how will this work on smaller devices when the three divs stack on top of each other?
    You use @media queries to remove display: table on small screens and use display: block (or similar) instead.

  7. #7
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You use @media queries to remove display: table on small screens and use display: block (or similar) instead.
    Hmm it looks like I wont be able to use this method on this project, even tho the trick does work. Do you know how this could be done with JS? So that the div checks the height of his siblings and applies this to itself.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ReGGaeBOSS View Post
    Hmm it looks like I wont be able to use this method on this project, even tho the trick does work.
    You know we've got to ask Why, right?

  9. #9
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You know we've got to ask Why, right?
    =) Well, the container can have an "unlimited" number of a block with the width 25% and a dynamic height, so If you put 5-6 of these blocks in the container that would create two rows and the container would be twice as high. And then we have this odd block, who doesnt look like the rest, and only contains a background image and a small amount of text. It is this block that I want to inherit the height of it siblings (the block before or after). So wouldnt the table-cell option break if the container is filled with more blocks and more rows?

    Hope you understand what i am trying to explain, my english isn't always the best=)

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I don't understand, but I strongly suspect this is not a reason to rule out display: table and/or media queries.

  11. #11
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I don't understand, but I strongly suspect this is not a reason to rule out display: table and/or media queries.
    Hmm i can't get it work even with the table-cell method.

    this is what i have basically:

    Code HTML4Strict:
    <div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner match"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    </div>

    Code CSS:
    .wrapper{
    display: table;
    }
     
    .inner{
    display: table-cell;
    width: 25%;
    float: left;
    }
     
    .match{
    height: 100%;
    }

    The div with class "match" is the only one who differs from the others regarding height of the content, but it should still have a background-image that stretches 100% height. It's siblings sets the height, and is dynamic. So what I want is the "match" div to inherit the same height as the other divs. But I cannot get it to work.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You can't float an element with display: table-cell, so remove the float. Cells are also 100% the height of the container by default. It also doesn't make sense to have 8 cells and try to set each to width: 25%. Perhaps make it a bit clearer what you are trying to achieve here.

  13. #13
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can't float an element with display: table-cell, so remove the float. Cells are also 100% the height of the container by default. It also doesn't make sense to have 8 cells and try to set each to width: 25%. Perhaps make it a bit clearer what you are trying to achieve here.
    Hmm okey i see. Well it is not up to me how many divs with the width 25% that will be in the container, could be three, could be 43, they will be added via CMS. So my solution have to work regardless of how many items there is in the container. I guess maybe one could do some JS solution that creates a new container after 4 items or something?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    So are you limited to 4 per row?

  15. #15
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    So are you limited to 4 per row?
    Yes, and below 767px it is 2 ... and below 480px only 1.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Will there be a container around each 4, or not?

  17. #17
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Will there be a container around each 4, or not?
    No, only if there is some good solution to adding a container to each row. But as it is now...no.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Do you need the divs to be visually the same height? By that I mean, will they have a background color or similar? If not, you can set them to display inline-block and give them a width that will create the right number per row. They will stay in an even row, but won't be the same height.

    Besides that, you need JS for this.

  19. #19
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Do you need the divs to be visually the same height? By that I mean, will they have a background color or similar? If not, you can set them to display inline-block and give them a width that will create the right number per row. They will stay in an even row, but won't be the same height.

    Besides that, you need JS for this.
    Hmm yeah all other div except the one with class "match" will be visually the same, regarding looks, height and content. Then we have this "match" -div that will only have a line of text at the bottom and a background-image that have to be the same height as the other divs.

    I tried this little script now:

    Code JavaScript:
    $(document).ready(function(){
    	function equalHeights (element1, element2) {
    		var height;
     
    		if (element1.outerHeight() > element2.outerHeight())
    		{
    			height = element1.outerHeight();
    			element2.css('height', height);
    		}
    		else {
    			height = element2.outerHeight();
    			element1.css('height', height);
    		}
    	}
     
    	equalHeights($('.inner'), $('.match') )
    });

    And it seems to do something, but the "match" div just stretches to half the height of the other divs:S

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Let's pullo @Pullo ; to check your JS.

  21. #21
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Let's pullo @Pullo ; to check your JS.

    I tried doing a fiddle , and on that it seems to be working just fine. But on the real site the height is only like 50% of the siblings, and I can't figure out what is messing it up.

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I'm happy to help if I can.
    The thread is quite long however, so could someone sum up where we're at and what we're trying to do?

  23. #23
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    I'm happy to help if I can.
    The thread is quite long however, so could someone sum up where we're at and what we're trying to do?
    Hi and thanks for helping=)

    What i am trying to do is have a div inherit the height of its siblings using JS. I just now tried a script which you can see here http://jsfiddle.net/v7Wze/17/ which seems to work, however when I try it on the actual site, the height of the div (inner2) stretches only like 50% of its siblings height. I can't figure out what is messing things up, and I guess it is hard to do for you aswell if I don't post my "real" css/html.

    If you have any general tips on what can cause my script to break on my actual site I would be thankful, otherwise I will be posting my code here later when I get home from work.

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Your code looks like it should work (and indeed it does work in the fiddle).
    It would be helpful to see a link to the page where this is not working.

  25. #25
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Your code looks like it should work (and indeed it does work in the fiddle).
    It would be helpful to see a link to the page where this is not working.
    Some magic happened, I changed my screen resolution... and now it works, even after i have changed back. Strange.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •