2010-12-22 16 views
2

Aus irgendeinem Grund scheint firefox meine scrollTo Funktion zu ignorieren, obwohl es in Chrome und Safari funktioniert.scrollTo (jQuery) funktioniert nicht in Firefox

Hier ist ein Beispiel Link: http://blog.rainbird.me/post/2358248459/blowholes-are-awesome

Chrome und Safari werden die oberen Rand des Bildes automatisch blättern (mit einem Versatz von 20 Pixeln)

Es funktioniert nicht in Firefox. Ich bin verblüfft!

Code:

$(document).ready(function() { 
$(".photoShell img").lazyload({ 
placeholder: "http://william.rainbird.me/boston-polaroid/white.gif", 
threshold: 200 
}); 


window.viewport = 
{ 
height: function() { 
return $(window).height(); 
}, 

width: function() { 
return $(window).width(); 
}, 

scrollTop: function() { 
return $(window).scrollTop(); 
}, 

scrollLeft: function() { 
return $(window).scrollLeft(); 
} 

}; 

$(".photoShell img").hide(); 
$(".photoShell .caption").hide(); 

$(".photoShell img").load(function() { 

var maxWidth = viewport.width() - 40; // Max width for the image 
if(maxWidth > 960){ 
    maxWidth = 960; 
} 
var maxHeight = viewport.height() - 50; // Max height for the image 
var ratio = 0; // Used for aspect ratio 
var width = $(this).width(); // Current image width 
var height = $(this).height(); // Current image height 

     // Check if the current width is larger than the max 
     if(width > maxWidth){ 
      ratio = maxWidth/width; // get ratio for scaling image 
      $(this).css("width", maxWidth); // Set new width 
      $(this).css("height", height * ratio); // Scale height based on ratio 
      height = height * ratio; // Reset height to match scaled image 
      width = width * ratio; // Reset width to match scaled image 

     } 

     // Check if current height is larger than max 
     if(height > maxHeight){ 
      ratio = maxHeight/height; // get ratio for scaling image 
      $(this).css("height", maxHeight); // Set new height 
      $(this).css("width", width * ratio); // Scale width based on ratio 
      width = width * ratio; // Reset width to match scaled image 
     } 


     $(this).parents('div.photoShell').css("width", $(this).width() + 22); 
     $(this).parents('div.photoShell').addClass('loaded'); 
     $(this).next(".caption").show(); 

     var scrollNum = $(this).parents('div.photoShell').offset().top; 
     $.scrollTo(scrollNum - 20, {duration: 700, axis:"y"}); 


      $(this).fadeIn("slow"); 


}).each(function() { 
    // trigger the load event in case the image has been cached by the browser 
    if(this.complete) $(this).trigger('load'); 
}); 
+0

Nun, es funktioniert auf FF 3.6.12 – Shikiryu

+0

es auf FF arbeiten, löschen Sie den Cache Ihres Browsers und versuchen Sie es erneut. – ifaour

+0

Das ist komisch. Ich habe meinen Cache geleert und es funktioniert immer noch nicht - ich bin auf Firefox 3.6.13. Danke Leute. – William

Antwort

1

Versuchen bin ich mir nicht sicher,

scrollTop: function() { 
    return $(window).scrollTop(0); 
} 

in Bezug

Wasim

+0

Entschuldigung, das hat nicht funktioniert. – William

1

Versuchen Sie, diese

scrollTop: function() { 
    return $(window).animate({ scrollTop: 0 }, "slow"); 
} 

in Bezug

Wasim

Verwandte Themen