Show li elements in div and height is less than another div

Question

I have two divs with id=left and id=right . A div with id=left contains some li elements (a list with marks), and it moves to the left. A div with id=right contains text and html (any content). Sometimes the problem is that the left side of the div ( id=left ) is larger than id=right or vice versa. I want to show, for example, 10 li per page, and then when the user scrolls to show another li on the page and the left height is less than or equal to the right height.

Descriptive image of the problem:

EDIT: I can get a list of 1000 lis from the server and use display: none and scroll display: block . I do not want to dynamically load li s from the server.

Width: #left is 250px #right is 750px .

Answer 1

Jquery:

 $(document).ready(function() { $("#left").height( $("#right").height() ); $(window).scroll( function(){ if($(window).scrollTop() >= $('#right').offset().top + $('#right').outerHeight() - window.innerHeight) { } else { $('.hideme').each( function(i){ var bottom_of_object = $(this).offset().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':1},500); } }); } }); }); 

HTML:

 <div id="left"> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li class="hideme">Fade In</li> <li class="hideme">Fade In</li> <li class="hideme">Fade In</li> <li class="hideme">Fade In</li> <li class="hideme">Fade In</li> <li class="hideme">Fade In</li> </div> <div id="right"> Your text here </div> 

CSS

 #left { height:auto; width: 250px; float: left; overflow: hidden; display: block; } #right { float: right; width: 200px; } #left li { margin:10px; padding:50px; background-color:lightgreen; } .hideme { opacity:0; } 

Check out JS Fiddle here: http://jsfiddle.net/e5qaD/4000/

Answer 2

As you noted in the comments, #left has a width of 250px and #right has a width of 750px . You can get this behavior by applying position: absolute to the #left container.

 body, html { padding: 0; margin: 0; } .main { position: relative; /* To contain #left */ } #left { background-color: skyblue; overflow: auto; position: absolute; top: 0; bottom: 0; /* top and bottom values are to stretch the #left inside the parent container */ width: 250px; } #right { background-color: tomato; width: 750px; margin-left: 250px; /* equal to #left width */ } 

Working script

NOTE. In the above script, I used br tags to break the line. which I used only for the purpose of violin.

Answer 3

Here is the JSFiddle

I used jquery to dynamically determine height at boot time. If you are changing content, you need to call the setmenuheight function after loading the content, if you are going to different pages. I'm not sure how you are going to code the content.

 $(document).ready(function(){ for(var i = 1; i < 100; i++){ var menuli = "<li>"+"Menu - " +i+"</li>"; $("#left ul").append(menuli); }; setmenuheight(); }); function setmenuheight(){ $("#left").height($(".content").height()+"px"); } 

Answer 4

You can do something like this with jQuery:

HTML

 <div id="left"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 1</a></li> ... </ul> </div> <div id="right"> lorem ipsum ... </div> 

CSS

 #left{ width: 250px; float:left; overflow-y: hidden; } #right{ margin-top: 10px; width: 750px; float: right; } 

JQuery

 var $right = $('#right'), var $left = $('#left'); if($right.height()<$left.height()){ $left.height($right.height()); } $(window).on('scroll', function () { $('#left').scrollTop($(this).scrollTop()); }); 

violins

Css only: http://jsfiddle.net/tomsarduy/88eag6e7/2/
jquery: http://jsfiddle.net/tomsarduy/88eag6e7/1/