Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.


    Code:
    $(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

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Replace:
    Code:
    $(document).ready(function() {

    with:
    Code:
    $(window).load(function() {
    but, actually, I just tried on Safari and Opera and it started on "The Beginning" right away.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •