jQuery and Webkit bug, (document).ready using scrollTo REWARD

[bretwalters13]

This seems to be "the unsolvable" problem. I have posted this on a bunch of forums and no one seems to know the answer...so this is my last try. I hope someone here has the magic answer. I will reward someone if they can figure this out. (20 bucks paypal or somethin..seriously)

Okay so if you visit www.ikrospro.com with a webkit based browser (i am seeing the problem in Chrome and Safari, but not in firefox or IE 8) upon load the site should auto scroll to the first "page" area called "the beginning". It works so perfect in Firefox and IE 8 and it works upon refresh sometimes in Chrome or Safari but never on the first load. Anyone have any idea why this would be? Heres the top part of my init file where it should handle the function first. I know there are some vimeo iframe errors in the console but even with the vimeo movies removed and before they were on the site, i was having the same problem.

$(document).ready(function() {
   //SET SCROLL
   var framesize_height = 720;
   var framesize_width = 1140;
   var window_width = $(window).width();
   var window_height = $(window).height();
   var new_width = (window_width - framesize_width)/2;
   var new_height = (window_height - framesize_height)/2;  
   if(new_width <0){new_width = 0;}
   if(new_height <0){new_height = 0;}
   $.scrollTo( '#page_1', 0, {offset: {top:-new_height, left:-new_width} });

Thanks so much! If anyone solves this mystery I will be forever thankful! (serious client haha)

Appreciate it!
-Bret

[harbingerOTV]

Replace:

$(document).ready(function() {

with:

$(window).load(function() {

but, actually, I just tried on Safari and Opera and it started on "The Beginning" right away.

[venegal]

The problem is that the the CSS file (which defines the position of #page_1) might not be loaded when your script runs.

So, what seems to you like a cross-browser issue is really a race condition. It's quite often the case that race conditions have different outcomes in different browsers because of performance differences in the various Javascript engines.

Changing $(document).ready() to $(window).load() will certainly work, but it's not what you want to do.

Your answer can be found in the jQuery API reference, which is always a better place to start your troubleshooting than internet forums:

When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

So, just do that, and you will be fine.

[bretwalters13]

Wow! Thanks so much guys! I am sorry I am kinda a noob to the whole jQuery thing and I really appreciate it...you have no idea. Especially the idea to look at that link before posting on forums...that link is gold to me! I am going to work on this tonight and see if I can fix it. Seriously both of you shoot me your paypal addressed in a PM. I think I have like 22 bux in there and ill split it haha!