Timing issue with modifying container and image CSS after page load with jQuery/Javascript

I have a Javascript function called updateScreen() which does a number of things, including modifying the CSS of a DIV container and IMG contained within it. Here is the actual Javascript:

if (screenwidth<=568){
	mobilenavoffset=parseInt(nav1midheight-(nav1midheight*nav1scrollpercentage));
	$('div#homebg').css({'top':mobilenavoffset+'px'});
} else {
	$('div#homebg').css({'top':'0'});
}
if (screenratio>1.53){
	$('div#homebg img').css({'width':'100%', 'height':'auto', 'top':'-'+homebgheightoffset+'px', 'left':'0'});
} else {
	$('div#homebg img').css({'width':'auto', 'height':'100%', 'top':'0', 'left':'-'+homebgwidthoffset+'px'});
}

Open in new window


There are a few calculations and other things in the function prior to all this. Anyway, I call this function on page load, window resize, scroll, touchmove and orientation change, and it does what I want.

What is not working is the "on page load" call. Inside of my normal jQuery "on page load", I have this (among other things):

$(function(){
   updateScreen();
});

Open in new window


However, the CSS updates don't happen until I scroll or resize the window. I verified that the function is being called on page load, its just not applying the CSS.

My first thought is that the function is being called too quickly. Is this a possibility? I'm wondering what other things I should be checking for, to see what the issue might be. I would appreciate any advice to steer me in the right direction.

Thank you!
Brad BansnerWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
What is updateScreen();

How and when is this called
if (screenwidth<=568){
0
Brad BansnerWeb DeveloperAuthor Commented:
updateScreen() is the function that contains the first block of code in my original question.

The jQuery CSS functions are called differently depending on the value of the "screenwidth" variable. As I said, updateScreen() is called on:

Page Load
Window Resize
Scroll
Touchmove
OrientationChange
0
GaryCommented:
Where is you onload code?

Have you a link?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

COBOLdinosaurCommented:
Why would you not use media queries to apply the alternate CSS?

Cd&
0
GaryCommented:
^^^^
Good point
0
Brad BansnerWeb DeveloperAuthor Commented:
Because CSS media queries don't allow me to do the calculations required. I've tried that route, for a long time, and only Javascript seems to do exactly what I want.
0
Brad BansnerWeb DeveloperAuthor Commented:
0
Brad BansnerWeb DeveloperAuthor Commented:
To see the issue (I am testing with Firefox), load that page. Then scroll just slightly, and you will see the large background image jump slightly. That jump is what is missing from the On Page Load, it should happen right away instead of waiting for you to scroll the page.
0
Brad BansnerWeb DeveloperAuthor Commented:
The "top:-XXX" is what its supposed to be doing, I want a negative number there. The problem is that its not doing that on page load. At least for me here, I have to scroll or resize the browser to make that happen. I want it to happen immediately on page load.
0
GaryCommented:
homebgheightoffset is 0 at page load
Could be something to do with their being no image when the script runs.
0
Brad BansnerWeb DeveloperAuthor Commented:
I started experimenting with setTimeout. Instead of just calling the function on page load, I added:

setTimeout(updateScreen, 200) - image did not update
setTimeout(updateScreen, 300) - image did not update
setTimeout(updateScreen, 400) - WORKED
setTimeout(updateScreen, 500) - WORKED
setTimeout(updateScreen, 600) - WORKED
setTimeout(updateScreen, 700) - WORKED

So it seems like between 300 and 400 milliseconds is what it takes for everything to settle down to the point where I can run my script. It creates a noticeable jump, I wish I knew what is going on with this and why I can't do it immediately on page load.
0
Brad BansnerWeb DeveloperAuthor Commented:
You are correct, homebgheightoffset is zero. Maybe that is the problem, I'm checking into that.
0
Brad BansnerWeb DeveloperAuthor Commented:
I found the problem. The function is calculating a value based on an image which is fading in (via jQuery animation). The function is being called before the image is finished fading in, therefore getting an incorrect value. I assume there is no way to get the height of an image before it is faded in? This is my code:

homebgheight=$('div#homebg img').height();

Open in new window


Its either because the image has not finished fading in yet, or because the image has not been loaded by the browser yet, not sure which.
0
GaryCommented:
No, when that script runs there is no image,
You could change the onload to wait for the image to load

$("img.rwdimage").on('load',function(){...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brad BansnerWeb DeveloperAuthor Commented:
I think I have this working now. I would love to hear if you agree this is a good solution:

1. Apply display:none and visibility:hidden to the background image via CSS.
2. On img.rwdimage "load", call updateScreen() which handles all the calculations.
3. Then, set visibility:visible.
4. Fade the image in (removes display:none).

From what I understand, visibility:hidden should allow the image to load but still take up space, therefore I can grab the image's dimensions.

Seems to work so far.
0
GaryCommented:
Yep, visibility hidden just hides it while occupying the same space, while display none 'removes' it from the page
0
Brad BansnerWeb DeveloperAuthor Commented:
I think I'm good for now, thanks for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.