Home/ Questions/Q 9202631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T23:18:08+00:00

Okay, I have a unique situation, first I am creating 10 <li> s using

  • 0

Okay, I have a unique situation, first I am creating 10 <li>s using jQuery append(). Then I am adjusting the height of each <li> to be the window height / 10 so that as a whole they fill the whole screen height. My html contains nothing but <div class="wrapper"></div>. Here is my js:

// Create The Tree:

$('.wrapper').append('<ul>');
for (var x = 1; x <= 10; x++)
{
    $('.wrapper > ul').append('<li>Root Option ' + x + '</li>');
}

// Script The Tree:

var $winHeight = document.documentElement.clientHeight;
console.log($winHeight);
var $liNumber = $('.wrapper > ul > li').size();
var $liHeight = $winHeight / $liNumber;
$('.wrapper > ul > li').css('height', $liHeight);

var $win = $(window)
$win.on('resize', update);
function update () {
    console.log(document.documentElement.clientHeight);
}

My problem is that if you view the console, you can see that it does not accuratly update the height of the window. When you resize the window, it wont log values lower than what it was when you last refreshed the page!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Do you mean this? http://jsfiddle.net/reKSm/2/

    var n = 20

$(document).ready(function (){
    $('.wrapper').append('<ul>');
    for (var x = 1; x <= n; x++)
        $('.wrapper > ul').append('<li>Root Option ' + x + '</li>');
    
    update_size();
    
    $(window).resize(function(){
    update_size();
    }); 
});

function update_size(){
    // Script The Tree:
    var $winHeight = $(window).height();
    var $liNumber = $('.wrapper > ul > li').length;
    var $liHeight = $winHeight / n;
    $('.wrapper > ul > li').css('height', $liHeight + 'px');    
};

    Also, you have to have doctype defined.
    Place <!doctype html> at the beginning of your html file and it will work.

    And also don’t place the upper JS code into another $(document).ready() function. At already has one in it 🙂

    • 0