www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Calling script after page has completely finished loading?

Threaded View

  1. #1
    Join Date
    Feb 2009
    Posts
    6

    resolved [RESOLVED] Calling script after page has completely finished loading?

    Hello everyone.

    I'm working on a slideshow for a portfolio-like page. In order to make sure that the portfolio-page never gets higher than the actual page, I'm binding document.resize after document.ready fires (using jQuery). However, this script is not working as it should, and I'm not sure why. The issue I'm having is that when the document loads, and the slideshow fires the first time, the images end up sort of stacked on top of each other, and not side-by-side.

    This is where it all starts, sort of. It binds to the event, fires it and then starts up the slideShow.

    Code:
    jQuery(document).ready( function() {
    		var b = $(document);
    		$(window).resize(function () {
    			$('.img-wrapper').width("100%");
    			var height = b.height();
    			var headerHeight = $('.header-wrapper').height();
    			var footerHeight = $('.footer').height();
    			var innerHeight = height - (headerHeight + footerHeight);
    			var upperHeight = innerHeight*0.6-10;
    			var lowerHeight = innerHeight*0.4;
    			var width = Math.round(1.067615658362989*lowerHeight);
    			jQuery('.main').css('height', innerHeight + 'px');
    			jQuery('.main-content').css('height', upperHeight + 'px');
    			jQuery('.main-extras').css('height', lowerHeight + 'px');
    			$('.main-extra1').width(width);
    			$('.main-extra1').css('right', $('.img-wrapper').width()/2+10);
    			$('.main-extra2').width(width);
    			$('.main-extra2').css('left', $('.img-wrapper').width()/2+10);
    		});
            jQuery(window).trigger('resize');
    	docReady();
    
    	});
    	function docReady(){
    		if (typeof(tid) !== undefined){
    			clearInterval(tid);
    		}
    		var params = Array();
    		var mainHeight = $('.main').height();
    		var mainWidth = $('.main').width();
    		params.push(mainHeight);
    		params.push(mainWidth);
    		var slideShowImages = new slideShowImageSet(ShowPics, params);
    		var tid = slideShowFunc(slideShowImages,params);
    	}
    Code:
    function slideShowImageSet(set, params) {
    	var imageArray = [];
    	for(var i=0;i<set.length;i++){
    		imageArray.push(new slideShowImage(set[i], params));
    	}
    	return imageArray;
    }
    
    
    function slideShowImage(img, params) {
    		var divHeight = params[0];
    		this.divWidth = $('.img-wrapper').width();
    		this.src = img[0];
    	    this.imgWidth = img[1];
    		this.imgHeight = img[2];
    		var scale = this.imgHeight/ divHeight;
    		this.newWidth = this.imgWidth / scale;
    		this.centerOffset = this.divWidth/2 - this.newWidth/2;
    		this.startPosition = -this.newWidth - 10;
    }
    This part of the code sets up various variables related to scaling etc.
    Code:
    function slideShowImageSet(set, params) {
    	var imageArray = [];
    	for(var i=0;i<set.length;i++){
    		imageArray.push(new slideShowImage(set[i], params));
    	}
    	return imageArray;
    }
    
    
    function slideShowImage(img, params) {
    		var divHeight = params[0];
    		this.divWidth = $('.img-wrapper').width();
    		this.src = img[0];
    	    this.imgWidth = img[1];
    		this.imgHeight = img[2];
    		var scale = this.imgHeight/ divHeight;
    		this.newWidth = this.imgWidth / scale;
    		this.centerOffset = this.divWidth/2 - this.newWidth/2;
    		this.startPosition = -this.newWidth - 10;
    }
    This part contains all of the code making sure that the slideshow ticks etc.

    Code:
    function slideShow(s,param){
    	this.divWidth = param[0];
    	this.pos = getRandomInt(0, s.length-1);
    	this.cycle = s.length;
    	this.imageStack = s;
    	var outsideImage = this.imageStack[this.pos];
    	this.pos = (this.pos+1).mod(this.cycle);
    	var leftImage = this.imageStack[this.pos];
    	
    	this.pos = (this.pos+1).mod(this.cycle);
    	var centerImage = this.imageStack[this.pos];
    	
    	this.pos = (this.pos+1).mod(this.cycle);
    	var rightImage = this.imageStack[this.pos];
    	centerImage.newWidth = ($('.img-wrapper').height()/centerImage.imgHeight) * $('.img-wrapper').width();
    	centerImage.divWidth = $('.img-wrapper').width();
    	centerImage.centerOffset = centerImage.divWidth/2 - centerImage.newWidth/2;
    	
    	var leftImageOffset = offset(centerImage, leftImage, "left");
    	var leftBackground = leftImageOffset + leftImage.newWidth + $('.img-wrapper').width()/15 + "px";
    	var rightImageOffset = offset(centerImage, rightImage, "right");
    	var rightBackground = rightImageOffset + rightImage.newWidth;
    	var leftForeground = "<div class='main-background-left' style='width: " + leftBackground +";'></div>";	
    	var rightForeground = "<div class='main-background-right' style='width: " + leftBackground + ";'></div>";
    	var centerImageString = "<img id='2' src='CFK/" + centerImage.src + "' style='overflow: hidden; position: absolute; left: " + -2000 + "px; height: 100%; width: auto;'></img>";
    	var leftImageString = "<img id='1' src='CFK/" + leftImage.src + "' style='overflow: hidden; position: absolute; left: " + -2000 + "px; height: 100%; width: auto;'></img>";
    	var rightImageString = "<img id='3' src='CFK/" + rightImage.src + "' style='overflow: hidden; position: absolute; left: " + -2000 + "px; height: 100%; width: auto;'></img>";
    	var outsideImageString = imageString(outsideImage);
    	//alert("Centerimage: " + centerImage.startPosition + "\nLeftImage: " +leftImage.startPosition +"\nRightImage: " + rightImage.startPosition);
    	$('.img-wrapper').append(leftForeground);
    	$('.img-wrapper').append(outsideImageString);
    	$('.img-wrapper').append(leftImageString);
    	$('.img-wrapper').append(centerImageString);
    	$('.img-wrapper').append(rightImageString);
    	$('.img-wrapper').append(rightForeground);
    }
    function updateSlideShow(slideShow) {
    	var outside = $("#0");
    	var left = $("#1");
    	var center = $("#2");
    	var right = $("#3");
    	outside.attr('id', function(){
    		return parseInt(outside.attr('id'))+1;
    	});
    	left.attr('id', function(){
    		return parseInt(left.attr('id'))+1;
    	});
    	center.attr('id', function(){
    		return parseInt(center.attr('id'))+1;
    	});
    	right.attr('id', function(){
    		return parseInt(right.attr('id'))+1;
    	});
    	var divWidth = $('.img-wrapper').width();
    	var leftWidth = left.width();
    	var outsideWidth = outside.width();
    	var rightWidth = right.width();
    	var centerWidth = center.width();
    	//alert("Width: \n " + divWidth  + "\n" + outsideWidth + "\n" +  leftWidth + "\n" + centerWidth + "\n" + rightWidth);
    	var outsideLeft = outside.offset().left;
    	var leftLeft = left.offset().left;
    	var centerLeft = center.offset().left;
    	var rightLeft = right.offset().left;
    	//alert("Left: \n " + outsideLeft  + "\n" +  leftLeft  + "\n" + centerLeft + "\n" + rightLeft);
    	var leftEnd = divWidth/2 - leftWidth/2+10;
    	var outsideEnd = leftEnd - outsideWidth - divWidth/15;
    	var centerEnd = leftEnd + divWidth/15 + leftWidth;
    	var rightEnd = divWidth + rightWidth; 
    	//alert("DivWidth: " + divWidth);
    	//alert("End: \n" + outsideEnd + "\n" + leftEnd  + "\n" + centerEnd  + "\n" +  rightEnd);
    	var outsideMove = outsideEnd - outsideLeft;
    	var outsideString =  "+= " + outsideMove;
    	var leftMove = leftEnd - leftLeft;
    	var leftString =  "+= " + leftMove;
    	var centerMove = centerEnd - centerLeft;
    	var centerString =  "+= " + centerMove;
    	var rightMove = rightEnd - rightLeft;
    	var rightString = "+= " + rightMove;
    	//alert("Movestring: \n" + outsideString + "\n" + leftString + "\n" + centerString  + "\n" + rightString);
    	
    	right.animate({
    		left: '+=' + rightMove
    		}, 250, "swing", function(){
    			center.animate({
    				left: '+=' + centerMove
    			}, 250, "swing", function() {
    				left.animate({
    					left: '+=' + leftMove
    				}, 250, "swing", function() {
    					outside.animate({
    						left: '+=' + outsideMove
    					}, 250, "swing", function() {
    						right.remove();
    					});
    				});
    			});
    			$('.main-background-left').width(leftEnd);
    			$('.main-background-right').width(leftEnd+10);
    		}
    	);
    	slideShow.pos = (slideShow.pos+1).mod(slideShow.cycle);
    	$('.img-wrapper').prepend(imageString(slideShow.imageStack[slideShow.pos]));
    	
    }
    function imageString(image){
    	return "<img src='CFK/" + image.src + "' id='0' style='overflow: hidden; position: absolute; left: -1000px; height: 100%; width: auto;'></img>";
    }	
    		
    
    
    
    	
    	
    
    function offset(centerIm, sideIm, side){
    	switch(side){
    		case "right":
    			return centerIm.centerOffset + centerIm.newWidth + $('img-wrapper').width()/15;
    		case "left":
    			return centerIm.centerOffset - centerIm.divWidth/15 - sideIm.newWidth;
    		default:
    			return "0px";
    	}
    }
    
    Number.prototype.mod = function(n) {
    return ((this%n)+n)%n;
    };

    There's also this piece of code which does the actual slideshow-starting.
    Code:
    function slideShowFunc(slideShowImages,param) {
    var show = new slideShow(slideShowImages, param);
    
    updateSlideShow(show);
    
    var tid = self.setInterval(function () {updateSlideShow(show)}, 10000);
    return tid;
    The first time the slideshow fires, we get this, which looks horrible. Hopefully my code is understandable, I'm quite new to JS and jQuery, but I think there is something else playing here. Sadly, I do not have a webserver where I can put up the page for view right now without exposing my own computer.
    page.jpg

    Anyone have any ideas? My guess is that there is some desync when firing, so that the document is NOT ready when it tries to resize the images and calculate their positions, and then it all gets buggered from there.
    Last edited by Tomtefaen; 01-28-2013 at 10:51 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles