Solved

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

Posted on 2014-10-23
17
343 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
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

Technology Partners: 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!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

705 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