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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with window.load functions

    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.

    Code:
    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/por...letterpress-2/

    Any help would be greatly appreciated. Thanks in advance.

    Rich

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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.

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

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

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