Solved

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

Posted on 2014-10-23
17
336 Views
Last Modified: 2014-10-23
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!
0
Comment
Question by:bbdesign
  • 10
  • 6
17 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40399784
What is updateScreen();

How and when is this called
if (screenwidth<=568){
0
 

Author Comment

by:bbdesign
ID: 40399805
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
 
LVL 58

Expert Comment

by:Gary
ID: 40399865
Where is you onload code?

Have you a link?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40399878
Why would you not use media queries to apply the alternate CSS?

Cd&
0
 
LVL 58

Expert Comment

by:Gary
ID: 40399884
^^^^
Good point
0
 

Author Comment

by:bbdesign
ID: 40399948
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
 

Author Comment

by:bbdesign
ID: 40399956
0
 

Author Comment

by:bbdesign
ID: 40399960
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
 

Author Comment

by:bbdesign
ID: 40399985
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40400032
homebgheightoffset is 0 at page load
Could be something to do with their being no image when the script runs.
0
 

Author Comment

by:bbdesign
ID: 40400037
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
 

Author Comment

by:bbdesign
ID: 40400038
You are correct, homebgheightoffset is zero. Maybe that is the problem, I'm checking into that.
0
 

Author Comment

by:bbdesign
ID: 40400057
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40400078
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
 

Author Comment

by:bbdesign
ID: 40400418
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40400422
Yep, visibility hidden just hides it while occupying the same space, while display none 'removes' it from the page
0
 

Author Comment

by:bbdesign
ID: 40400465
I think I'm good for now, thanks for your help.
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question