Impeded by null

Hey everyone,

I always struggle with Javascript, I am trying to create an animation for a website. When the page loads, a div section covers the main page and after five seconds, the elements within it are to slide to either side and then the div is to dissolve and expose the main page.

3 variables keep creating errors: imgDiv, introCap, & introDiv; all reading null even though I have defined them at the beginning of my script.

here is my script:

[COLOR=“#808080”][FONT=Courier New]var wait = 5000;
var introCap = document.getElementById(“captionCol”);
var imgDiv = document.getElementById(“imgCol”);
var introDiv = document.getElementById(“intro”);

function splitDivs() {
var goLeft;
var goRight;

	goLeft += ((goLeft--)-0.9);
	goRight += ((goRight++)+0.9);
	
	imgDiv.style.left = parseInt('imgDiv.style.left')+ goLeft + "%";
	introCap.style.left = parseInt('introCap.style.left')+ goRight + "%";
}

function init() {
var id = setInterval(splitDivs, 10);

imgDiv.style.left = "15%";
introCap.style.left = "45%";
setTimeout("splitDivs()", wait);
splitDivs();
}

document.addEventListener(“DOMContentLoaded”, init, false);[/FONT][/COLOR]

here is the HTML portion:

[FONT=Courier New][COLOR=“#A9A9A9”] <div id=“intro”>

		&lt;div id="imgCol"&gt;&lt;/div&gt; &lt;!-- The image within this div is embed in a css file as the background. --&gt;
	
		&lt;div id="captionCol"&gt;
			&lt;p&gt; Hi, I'm &lt;b&gt;Jenny Spring&lt;/b&gt;. &lt;br&gt;&lt;br&gt;
			I'm a &lt;span id="emp"&gt;SPIN&lt;/span&gt; farmer. &lt;/p&gt;

	&lt;/div&gt;
&lt;/div&gt;[/COLOR][/FONT]

I am confused as to why it is declaring my variables as null, when they are defined above at the beginning. I figured they were declared as global variables so their scope should be the entire script. I am using firebug to debug/test my script.

Thanks!

Hi there,

Have you maybe included your JavaScript before the elements exist on the page?
This normally happens when your JS file is in the head section of your document.
If this is the case, try placing it diectly before the closing body tag instead.

Hi Pullo,

I did try to insert the script tags below and it still came up with the same result.

I also tried declaring all the variables again in each function and my code was unresponsive.

Okay so I have been working away at it and figured out a temporary solution, or atleast half of the desired effect is taking place.

The animation works, however when I use clearInterval, or attempt to call it, the code continues to run.

Here’s the Javascript:

[FONT=Courier New][COLOR=“#808080”][SIZE=2] //var introCap, imgDiv, introDiv;
var introCap = document.getElementById(“captionCol”);
var imgDiv = document.getElementById(“imgCol”);
var introDiv = document.getElementById(“intro”);
var expose = document.getElementById(“gotoPage”);
var fade = 1;
var l = 15;
var r = 45;

	expose.onclick = move;
	var moveInt = setInterval("move()", 70);	
	var fadeInt = setInterval("fadeOut()", 60);
	
function stop() {
	clearInterval(moveInt);
	clearInterval(fadeInt);
	}
	
function fadeOut() {
	fade -= 0.07;
	
	introDiv.style.opacity = fade;
	introDiv.style.filter = "alpha('"+fade+"')";
	if(introDiv.style.opacity&lt;0) {
		stop();
		}
	}
	
function move() {
	l -= 0.1;
	r +=  0.1;
	
	introCap.style.left = r+"%";
	imgDiv.style.left = l+"%";
	
	if (imgDiv.style.left&lt;10) {
	 fadeOut();
	 }
	}[/SIZE][/COLOR][/FONT]

The script works to an extent but there is no control, when the page loads the script runs but doesn’t stop. Does anybody have any suggestions?

Thanks!

Get rid of the quotes around the field names in the following:

imgDiv.style.left = parseInt('imgDiv.style.left')+ goLeft + "%";
introCap.style.left = parseInt('introCap.style.left')+ goRight + "%";

Also wrap the part before the +‘%’ in () as otherwise all the values will be treated as strings

imgDiv.style.left = (parseInt(imgDiv.style.left)+ goLeft) + "%";
introCap.style.left = (parseInt(introCap.style.left)+ goRight) + "%";