.css() jquery not working properly

Question

I'm attempting to apply the height of window to the max-height of a particular div.

$(document).ready(function(){
        console.log('Initial Window height:', $(window).height());
        $('.wordboard').css({ "max-height": ($(window).height()-150) + 'px' });
        //console.log($('.wordboard').css({"max-height": ($(window).height() - 150) + 'px'}));


        console.log("Initial max height of $('.wordboard'): ", $('.wordboard').css("max-height"));
        $(window).resize(function(){
            $('.wordboard').css({ "max-height": ($('body').height()-150) + 'px' });
            console.log("$('.wordboard').css('max-height')",$('.wordboard').css('max-height'));
        });

    });

However, the my website is loaded: the max-height isn't applied. The result in the console is when the website is loaded is:

Initial Window height: 550
script.js:28 Initial max height of $('.wordboard'):  undefined
(After i resize the window, the effect is now apply. However, I want to apply as soon as the window is loaded)

script.js:31 $('.wordboard').css('max-height') 718px
script.js:31 $('.wordboard').css('max-height') 723px
script.js:31 $('.wordboard').css('max-height') 728px
script.js:31 $('.wordboard').css('max-height') 733px

Might have something to do with the '???px' not being wrapped in quotes. — Mave
– Mave, Commented Jun 4, 2015 at 10:06

blgt · Accepted Answer · 2015-06-04 10:50:28Z

4

The only solution comes in mind is that at time you call your snippet on document ready pseudo event, your element(s) .wordboard doesn't exist in the DOM. You are surely (or a plugin) adding it dynamically.

EDIT: just check it:

$(function(){console.log($(".wordboard").length);});

If displaying 0, you know from where comes from your issue.

edited Jun 4, 2015 at 10:50

blgt

8,2151 gold badge27 silver badges29 bronze badges

answered Jun 4, 2015 at 10:26

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chu Son Over a year ago

Thanks. That's must be the problem.

Chu Son Over a year ago

Yeh. Turn out I just need to move the script to the bottom of the page

Manashvi Birla · Accepted Answer · 2015-06-04 10:03:44Z

3

This is the correct way.

$('.wordboard').css('max-height',"723px");

answered Jun 4, 2015 at 10:03

Manashvi Birla

2,8393 gold badges16 silver badges28 bronze badges

3 Comments

TaoPR Over a year ago

Why this fixed number? Any particular reason?

Umesh Sehta Over a year ago

this is also the correct. $('.wordboard').css({ "max-height": ($(window).height()-150) + 'px' });

A. Wolff Over a year ago

Not sure how this address OP's issue?!

Ismael Miguel · Accepted Answer · 2015-06-04 10:11:12Z

0

You have the code inside an event, the resize event.

It will only execute when that event is triggered. (As you verified)

Now, you have 2 options:

Trigger the resize event:
$(window).resize(function(){ [...] }).resize();
Yes, just add .resize() after the event declaration. It's that simple!
Duplicate the code:
$(window).resize(function(){ [...] }); $('.wordboard').css({ "max-height": ($('body').height()-150) + 'px' });

answered Jun 4, 2015 at 10:11

Ismael Miguel

4,2691 gold badge35 silver badges44 bronze badges

Collectives™ on Stack Overflow

.css() jquery not working properly

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related