Help with a glitch 2

[stooee]

I have this javascript code for rotating through divs that displays a small navigation with numbers and a play/pause button. Everything works well except the first time it runs it shows the first div, then fades the first div in again then runs smoothly after that. I've been looking at it for too long and I'm trying to avoid the repetition of the first div. here is the full code. Just copy and paste it and it should work. Any help would be greatly appreciated.

<script>
var milliseconds = 4000;
var nBtn = 4;
var i=1;
var int;
var old=1;
var prev = nBtn;
function rotate(spec){
if(spec!=null){
i=spec;
control(0);
};

if(old!=-1){document.getElementById(old).style.display = 'none';
}else{
document.getElementById(4).style.display = 'none';
document.getElementById('b4').style.backgroundColor = '#666666';
}

document.getElementById(i).style.display = 'block';
document.getElementById('b' + i).style.backgroundColor = '#666666';
document.getElementById('b' + prev).style.backgroundColor = '#999999';

old=i;

/* make the main div transpartent */
changeOpac(0, i);

var speed = Math.round(2000 / 100);
var timer = 0;
/*fade in our main div*/
for(x = 0; x <= 100; x++) {
setTimeout("changeOpac(" + x + ",'" + i + "')",(timer * speed));
timer++;
}

i++;
prev = i - 1;

if(prev<1){
prev = nBtn;
}
if(i>nBtn){
i=1;
}
};

function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
};

function control(op){
if(!op){
document.getElementById('stop').style.display = 'none';
document.getElementById('play').style.display = 'inline';
clearInterval(int);
}
else{
document.getElementById('stop').style.display = 'inline';
document.getElementById('play').style.display = 'none';
int = setInterval('rotate()', milliseconds);
};
};

window.onload=function(){
int = setInterval('rotate()', milliseconds);
};
</script>

<div id="container" style="margin-left:auto; margin-right:auto">
<div id="1" class="rotater" style="display:block; width:756px; height:323px; filter: alpha(opacity=100); -moz-opacity: 100; opacity: 100;" />Div 1 content</div>
<div id="2" class="rotater" style="display:none; width:756px; height:323px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" />Div 2 content</div>
<div id="3" class="rotater" style="display:none; width:756px; height:323px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" />Div 3 content</div>
<div id="4" class="rotater" style="display:none; width:756px; height:323px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" />Div 4 content</div>
<div id="navContainer" style="width:756px; height:20px; background-color:#999999">
<div id="stop" onclick="control(0)" style="float:right; padding-left:5px; padding-right:5px;"><img src="pause.jpg" border="0" /></div>
<div id="play" onclick="control(1)" style="float:right; padding-left:5px; padding-right:5px; display:none"><img src="play.jpg" border="0" /></div>
<div id="b4" onclick="rotate(4)" style="float:right; padding-left:5px; padding-right:5px; padding-top:2px; background-color:#999999; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; font-size:12px">4</div>
<div id="b3" onclick="rotate(3)" style="float:right; padding-left:5px; padding-right:5px; padding-top:2px; background-color:#999999; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; font-size:12px">3</div>
<div id="b2" onclick="rotate(2)" style="float:right; padding-left:5px; padding-right:5px; padding-top:2px; background-color:#999999; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; font-size:12px">2</div>
<div id="b1" onclick="rotate(1)" style="float:right; padding-left:5px; padding-right:5px; padding-top:2px; background-color:#666666; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; font-size:12px">1</div>
</div>
</div>

 

[vicvirk]

At the very top, change i = 2.

<script>
var milliseconds = 4000;
var nBtn = 4;
[b]var i=2;[/b]
var int;
...

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[feherke]

Hi

Correct the evident errors :

[tt]id[/tt] = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

( Element identifiers: the id and class attributes, SGML basic types )

And next time please post your code between [tt][ignore]

[/ignore][/tt] and [tt][ignore]

[/ignore][/tt] TGML tags.

Feherke.

http://rootshell.be/~feherke/

 

[stooee]

Thanks vicvirk! That did it.

And thanks feherke. I should have changed the id's to begin with but was lazy and was just trying to get this working. Sorry about not using the code tags I will remember for next time.

Thanks for the quick replies.

 

[stooee]

Hey guys maybe you can help me out again. I've come across something else that is a little troublesome. When you click the play button after the script has been paused it re-runs the div it was paused on then goes to the next div. Is it possible to jump to the next div without having to wait for the current div to finish again? Here is my latest code after your help earlier. javascript is not mu strong point but i've been able to piece things together up til now.

<script type="text/javascript">

var milliseconds = 4000;
var nBtn = 4;
var i=2;
var int;
var old=1;
var prev = nBtn;

function rotate(spec){
	if(spec!=null){
		i=spec;
		control(0);
	};
	
	if(old!=-1){document.getElementById('m' + old).style.display = 'none';
	}else{
	document.getElementById('m1').style.display = 'none';
	document.getElementById('b1').style.backgroundColor = '#666666';	
	}
	
	var mDiv = 'm' + i;
	milliseconds = 4000;
	
	document.getElementById(mDiv).style.display = 'block';
	document.getElementById('b1').style.backgroundColor = '#999999';
	document.getElementById('b' + i).style.backgroundColor = '#666666';
	document.getElementById('b' + prev).style.backgroundColor = '#999999';
	
	old=i;
	
	/* make the main div transpartent */
	changeOpac(0, mDiv);
	
	var speed = Math.round(2000 / 100); 
    var timer = 0;
	/*fade in our main div*/
    for(x = 0; x <= 100; x++) { 
        setTimeout("changeOpac(" + x + ",'m" + i + "')",(timer * speed)); 
        timer++; 
    }
	i++;
	prev = i - 1;
	
	if(prev<1){
	prev = nBtn;
	}
	if(i>nBtn){
	i=1;
	}
};

function changeOpac(opacity, id) { 
var object = document.getElementById(id).style; 
object.opacity = (opacity / 100); 
object.MozOpacity = (opacity / 100); 
object.KhtmlOpacity = (opacity / 100); 
object.filter = "alpha(opacity=" + opacity + ")"; 
};

function control(op){
	if(!op){
		document.getElementById('stop').style.display = 'none';
		document.getElementById('play').style.display = 'inline';
		clearInterval(int);
	}
	else{
		document.getElementById('stop').style.display = 'inline';
		document.getElementById('play').style.display = 'none';		
		int = setInterval('rotate()', milliseconds);
		
	};
};

window.onload=function(){
	int = setInterval('rotate()', milliseconds);
};
</script>

<div id="container" style="margin-left:auto; margin-right:auto">
	<div id="m1" class="rotater" style="display:block; width:756px; height:323px; filter: alpha(opacity=100); -moz-opacity: 100; opacity: 100;" />Div 1 content</div>
	<div id="m2" class="rotater" style="display:none; width:756px; height:323px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" />Div 2 content</div>
	<div id="m3" class="rotater" style="display:none; width:756px; height:323px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" />Div 3 content</div>
	<div id="m4" class="rotater" style="display:none; width:756px; height:323px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" />Div 4 content</div>
	<div id="navContainer" style="width:756px; height:20px; background-color:#999999">
        <div id="stop" onclick="control(0)" style="float:right; padding-left:5px; padding-right:5px;"><img src="pause.jpg" border="0" /></div>
        <div id="play" onclick="control(1)" style="float:right; padding-left:5px; padding-right:5px; display:none"><img src="play.jpg" border="0" /></div>
        <div id="b4" onclick="rotate(4)" style="float:right; padding-left:5px; padding-right:5px; padding-top:2px; background-color:#999999; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; font-size:12px">4</div>
        <div id="b3" onclick="rotate(3)" style="float:right; padding-left:5px; padding-right:5px; padding-top:2px; background-color:#999999; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; font-size:12px">3</div>        
        <div id="b2" onclick="rotate(2)" style="float:right; padding-left:5px; padding-right:5px; padding-top:2px; background-color:#999999; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; font-size:12px">2</div>
        <div id="b1" onclick="rotate(1)" style="float:right; padding-left:5px; padding-right:5px; padding-top:2px; background-color:#666666; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; font-size:12px">1</div>
    </div>
</div>