Display the list items within a div only if the height is lower than a separate div

Question

Display the list items within a div only if the height is lower than a separate div

I have a scenario where I have two divs named left and right. The left div contains a list of bullets (li elements) and is floated to the left, while the right div has text and HTML content. At times, either the left or the right div may be taller than the other due to varying content. My goal is to display only 10 li items on the page initially, and then load more items as the user scrolls, ensuring that the height of the left div remains less than or equal to the height of the right div.

An illustrative image of the issue can be seen here:

https://i.sstatic.net/XkXeR.png

EDIT: I have the option to fetch a list of 1000 li elements from the server and toggle their display between none and block based on scrolling. However, I prefer not to dynamically load the li elements from the server.

The width specifications are: #left is set at 250px and #right is set at 750px.

javascript jquery html css

Answer 1

Answer №1

You mentioned in the comments that #left has a width of 250px, and #right has a width of 750px. To achieve this layout, you can apply 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's width */
}

Check out the working example here!

Please note: In the fiddle above, I used br tags to break the line. This was only for demonstration purposes on the fiddle.

Answer 2

You mentioned in the comments that #left has a width of 250px, and #right has a width of 750px. To achieve this layout, you can apply 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's width */
}

Check out the working example here!

Please note: In the fiddle above, I used br tags to break the line. This was only for demonstration purposes on the fiddle.

Answer 3

Answer №2

Check out this JSFiddle

Using jquery, I have dynamically set the height upon loading. Remember to call the setmenuheight function after changing content, especially if navigating different pages. The coding for the content implementation may vary.

$(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

Check out this JSFiddle

Using jquery, I have dynamically set the height upon loading. Remember to call the setmenuheight function after changing content, especially if navigating different pages. The coding for the content implementation may vary.

$(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 5

Answer №3

You can achieve a similar effect using jQuery with the following code snippet:

HTML

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

CSS

#left{
    width: 200px;
    float:left;
    overflow-y: hidden;
}
#right{
    margin-top: 15px;
    width: 700px;
    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());
});

Fiddles

css only: http://jsfiddle.net/username/exampleCSS/
jquery: http://jsfiddle.net/username/exampleJS/

Answer 6

You can achieve a similar effect using jQuery with the following code snippet:

HTML

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

CSS

#left{
    width: 200px;
    float:left;
    overflow-y: hidden;
}
#right{
    margin-top: 15px;
    width: 700px;
    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());
});

Fiddles

css only: http://jsfiddle.net/username/exampleCSS/
jquery: http://jsfiddle.net/username/exampleJS/

Answer 7

Answer №4

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 JS Fiddle here: http://jsfiddle.net/e5qaD/4000/

Answer 8

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 JS Fiddle here: http://jsfiddle.net/e5qaD/4000/

Display the list items within a div only if the height is lower than a separate div

Answer №1

Answer №2

Answer №3

HTML

CSS

jQuery

Fiddles

Answer №4

Similar questions

Problem with the spacing in the Bootstrap website after the breadcrumbs due to flexbox issues

jquery is not providing any text content from the body

Challenges with utilizing multiple backgrounds in CSS

Silhouette as the backdrop image

leveraging JQuery plugins alongside Grails resources plugin

Transform Json data from JavaScript format to a format that PHP can understand

Trigger jQuery when a breakpoint has been met

Building a dynamic form in React: Fetching select data from an API, posting to another API, and automatically clearing fields upon submission

Transfer the imageURI to a different HTML page

What is the best way to retrieve past data using RTK Query?

What is the best way to properly format the retrieved JSON string using Ext JS?

What might be causing my animation to not run as expected?

Can the SVG def element be modified?

What could be causing Jquery to not function properly in an Angular controller?

Vue: Clear the current form selection with a button click

What techniques does Angular2 use to handle dependency injection?

Leveraging $last in Angular for obtaining the final visible element with ng-show

JavaScript believes that the function is not defined, despite its clear existence

In JavaScript, you can ensure that only either :after or :before is executed, but not both

Tips on how to align bullet points in a list