javascript - .css() jquery not working properly -
i'm attempting apply height of window max-height of 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, website loaded: max-height isn't applied. result in console when website loaded is:
initial window height: 550 script.js:28 initial max height of $('.wordboard'): undefined (after resize window, effect apply. however, want apply window 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
the solution comes in mind @ time call snippet on document ready pseudo event, element(s) .wordboard
doesn't exist in dom. surely (or plugin) adding dynamically.
edit: check it:
$(function(){console.log($(".wordboard").length);});
if displaying 0
, know comes issue.
Comments
Post a Comment