...

View Full Version : jQuery Help with window.load functions



richbdesign
08-09-2010, 07:10 PM
I need help with combining an image resize script and a fade in script. Basically I would like the image resize function to happen before the fade in. Here's the code I'm using now.


jQuery(document).ready(function($) {

var $img = $("#pics img");
var ratio;
var offsetX = $img.offset().left;
var offsetY = $img.offset().top;

$(window).load(function () {
ratio = $img.width() / $img.height();
$(this).resize();
});

$(window).resize(function () {

var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;

var availWidth = viewportWidth - offsetX - 25;
var availHeight = viewportHeight - offsetY - 25;

if (availWidth / availHeight > ratio) {
$img.height(availHeight);
$img.width(availHeight * ratio);
} else {
$img.width(availWidth);
$img.height(availWidth / ratio);
}

});

});

//Fade in of page elements not allowed for IE users because of antialiasing issues with font
jQuery(document).ready(function($) {
if ( $.browser.msie ){

$(".single h1").css("visibility", "visible");
$(".single p").css("visibility", "visible");
$(".single").css("visibility", "visible");

} else {

//$(".loader").css("visibility", "visible");
$(".single h1").css("visibility", "visible");
$(".single p").css("visibility", "visible");
$(".single").css("visibility", "visible");

$(".single h1").css("opacity","0");
$(".single p").css("opacity","0");
$(".single").css("opacity","0");

$(".single h1").animate({opacity:1.0}, "slow");
$(".single p").animate({opacity:1.0}, "slow");
$(".single").animate({opacity:1.0}, "slow");

$(window).load(function(){
$(".single").animate({opacity:1.0}, "slow", function(){
//$(".loader").css("visibility", "hidden");
});
});

}
});

Here is a link to the current dev using this code: http://www.richbdesign.com/wpdev/portfolio/letterpress-2/

Any help would be greatly appreciated. Thanks in advance.

Rich

Spudhead
08-10-2010, 10:50 AM
I'm not sure what effect you're aiming for, but I've had a stab below.

If I understand, though, I don't think you can do it: the fade-in happens on document ready, but the resize doesn't happen until window load. Calling the resize on document ready won't have the desired effect because the images aren't loaded yet. I think.


<script type="text/javascript">

var ratio;
var $img;

$(window).load(function () {
ratio = $img.width() / $img.height();
$(this).resize();
});


$(window).resize(function () {
var offsetX = $img.offset().left;
var offsetY = $img.offset().top;
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
var availWidth = viewportWidth - offsetX - 25;
var availHeight = viewportHeight - offsetY - 25;
if (availWidth / availHeight > ratio) {
$img.height(availHeight);
$img.width(availHeight * ratio);
} else {
$img.width(availWidth);
$img.height(availWidth / ratio);
}
});



$(function(){ // shorthand for document.ready

$img = $("#pics img");

$(window).resize();

$stuff = $(".single h1, .single p, .single");
if ( $.browser.msie ){
$stuff.show();
} else {
$stuff.hide().fadeIn('slow');
}

});

</script>

richbdesign
08-10-2010, 02:27 PM
Yeah that one didn't work, it broke the fade in and the resize function. I really appreciate you taking a look at it though.
Rich



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum