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

[Tomtefaen]

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.

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);
	}

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.

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.

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.

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.

[hackerofsorts]

okay, so I'm new here but here's what I got for ya:

are you using the onload event either in your JS or in your HTML body tag?

Ex:

<body onload="myFunctionToFireAfterPageCompletelyLoads();">

Does this help?

Thx,

LP

[Tomtefaen]

okay, so I'm new here but here's what I got for ya:

are you using the onload event either in your JS or in your HTML body tag?

Ex:

<body onload="myFunctionToFireAfterPageCompletelyLoads();">

Does this help?

Thx,

LP

I've tried it with an onload originally, but I'm under the impression that this is both outdated and bad practice. I do use a similar function, jQuery's $(document).ready(...). Sadly, it does not seem to quite do the trick here.

[hackerofsorts]

I've not ever had trouble with the body onload nor am I under the impression that it's outdated or bad practice:

http://www.w3schools.com/jsref/event_onload.asp

Web standards seem to be ok with it. I use it frequently as well for web apps b/c I want the, what I call, console to load before the app runs.

I honestly haven't tried window.onload, however.

[hackerofsorts]

Also, where are you loading your js file? I know some of my apps I have to load them very first and sometimes very last, if you load your js right before closing body tag all your HTML elements s/b there before the function fires.

Maybe share your HTML code and that would help.

HOS

[Tomtefaen]

I've always been thaught that CSS is look-n-feel, HTML is layout and the rest is scripts, and it's a philosophy that's served me well. It could very well be a simplification by my teachers to make us not do stupid things when we started.

With that said, I've solved the issue now -- I was incorrectly scoping my variables and trying to do object oriented programming in JS. This lead to some variables not being initiated when used, but instead of erroring like most languages I'm used to; it skipped them over in arithmethics. I found this out by writing a ton of alert(varname) and checking each value by itself, and then correcting these occurences in whichever way was most convenient.

Going to mark this as solved; thanks for the suggestions.

[hackerofsorts]

Great! Glad you got it figured out!

JS is an OOP language so I'm confused as to why you couldn't do that.

Also, with the web platform and how it can be manipulated it is not longer just for websites. Meaning: CSS & HTML can go way beyond their original intent.

HOS