Javascript play stop

[louisaivy]

Hi all

[jscheuer1]

It would be easier to diagnose if we had a link to the page.

But it's possible that there are no elements with those id's.

And generally this is iffy:

document.getElementById("stop").disabled="disabled";
document.getElementById("play").disabled="";

This is better (no quotes around the true or false values):

document.getElementById("stop").disabled=true;
document.getElementById("play").disabled=false;

But you might have better luck with:

document.getElementById("stop").disabled=true;
document.getElementById("play").removeAttribute('disabled');

I'm curious though. After enabling, or trying to enable "play", you set its value to "". If it's an actual input (<input type="button" . . . >), that would make it a blank button. If it's any other element, even a (<button> . . . </button>) element, it may have no effect. But why would you want to?

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[louisaivy]

Hi i don't have it on a site at the moment

[jscheuer1]

Use this script:

// JavaScript Document

function next()//everytime the big image is clicked it changes
{
	++i;
	if(i>=imageSorce.length)
	{
		i = 0;
	}
	document.getElementById("slide").src = "Assets/images/big/"+i+".jpg";
	document.getElementById('captionarea').innerHTML=caption[i];//adds captions
	clearTimeout(startSlideshow.timer);
	document.getElementById("stop").disabled=true;
	document.getElementById("stop").className += ' disabled';
	document.getElementById("play").disabled=false;
	document.getElementById("play").className = 'play';
}

function changeImage(evt,el)//changes the big image each time a thumbnail is clicked
{	
	evt.preventDefault(evt);//fail gracefully when javascript is turned off. 
	var elem = document.getElementById("slide");
	elem.src = "Assets/images/big/"+el+".jpg";
	document.getElementById('captionarea').innerHTML=caption[el];//adds captions when a thumbnail is pressed.
	i = el;
	clearTimeout(startSlideshow.timer);
	document.getElementById("stop").disabled=true;
	document.getElementById("stop").className += ' disabled';
	document.getElementById("play").disabled=false;
	document.getElementById("play").className = 'play';
}


var i = 0, imageSorce = [], preload = [];//add an array to cycle through the images
imageSorce[0]="Assets/images/big/0.jpg";
imageSorce[1]="Assets/images/big/1.jpg";
imageSorce[2]="Assets/images/big/2.jpg";
imageSorce[3]="Assets/images/big/3.jpg";
imageSorce[4]="Assets/images/big/4.jpg";
imageSorce[5]="Assets/images/big/5.jpg";
imageSorce[6]="Assets/images/big/6.jpg";
imageSorce[7]="Assets/images/big/7.jpg";

var caption = [];
caption[0]="Matiatia Bay, Waiheke Islands main entry point"
caption[1]="caption2"
caption[2]="caption3"
caption[3]="caption4"
caption[4]="caption5"
caption[5]="caption6"
caption[6]="caption7"
caption[7]="caption8"

for (var j=0; j<imageSorce.length;j++)
{
preload[j] = new Image;
preload[j].src = imageSorce[j];

}
function mode(param)
{
smode=param;
}

function startSlideshow()
{
if(smode=="play")
{
i++;
if(i>=imageSorce.length)
{
i=0;
}
document.getElementById("play").disabled=true;
document.getElementById("play").className += ' disabled';
document.getElementById("stop").disabled=false;
document.getElementById("stop").className = 'stop';
document.getElementById("slide").src=imageSorce[i];
document.getElementById('captionarea').innerHTML=caption[i];//adds captions when the gallery is played.

startSlideshow.timer = setTimeout(startSlideshow, 3000);

}

else if(smode=="stop")
{
clearTimeout(startSlideshow.timer);
document.getElementById("stop").disabled=true;
document.getElementById("stop").className += ' disabled';
document.getElementById("play").disabled=false;
document.getElementById("play").className = 'play';
}
}

Add this rule to the end of the stylesheet (styles.css):

.disabled
{
	-moz-opacity:0.4;
	filter:alpha(opacity=40);
	opacity:0.4;
	cursor: text;
	cursor: not-allowed;
}

On index.html, make the captionarea look like so:

<span id="captionarea">Matiatia Bay, Waiheke Islands main entry point</span>

And the buttons like:

<input id="play" class="play" type="button" value="" onClick="mode('play');startSlideshow();" />

<input id="stop" class="stop disabled" type="button" value="" disabled onclick="mode('stop');startSlideshow();" />

Note: There are a number of efficiencies and best practices that could be applied to the script, the styles, and the page. However, I tried to remain as close to the original coding for all of these as possible.

[louisaivy]

Thankyou i really appreciate you helping me, this is my first time with javascript so i kinda knew i had made a few mistakes!