CODEWITHSUNDEEP
jquery
Joseph Sjoblom
Joseph Sjoblom

Reputation: 171

Adding class based on element height - jquery

I'm having difficulty getting this scrip to work properly:

$(window).(function(){
var maxHeight = 330;
if  (maxHeight < 331)
$('.ui-lightbox-mid').addClass('addScroll');
else 
$('.ui-lightbox-mid').removeClass('addScroll'); 
});

What I'm trying to do is confine a lightbox to 330px tall without adding a scrollbar all the time. I'm adding a class ('addScroll' //which is just overflow-y:scroll css wise) when the content is larger than 330px in order to add scrolling to the lightbox.

Can anyone help?

thanks Joe

Upvotes: 0

Views: 575

Answers (3)

thecodeparadox
thecodeparadox

Reputation: 87073

$(window).function(){ .. }) is not proper structure. Instead of it use:

$(window).load(function() { .. })

But in proper jQuery way:

$(document).ready(function() { .. }).

OR

$(function() { .. })

Full Code

$(document).ready(function() {
    var maxHeight = 330,
        lightbox = $('.ui-lightbox-mid'), // caching reference
        lightboxHeight = lightbox.height(); // get the current height
                                            // of lightbox, to compare
                                            // with maxHeight

    if ( maxHeight < lightboxHeight ) 
       lightbox.addClass('addScroll');
    else 
       lightbox.removeClass('addScroll');
});

Upvotes: 3

Ram
Ram

Reputation: 144699

Change this: 

$(window).(function(){

to:

$(window).load(function(){

Upvotes: 1

pagid
pagid

Reputation: 13867

I think you should wait until to document-ready event was triggered, before it doesn't make sense to retrieve the height anyhow. This can be done with $(document).ready(function() { ... })

Upvotes: 0

Related Questions