PDA

View Full Version : Javascript play stop



louisaivy
10-04-2011, 12:36 AM
Hi all

jscheuer1
10-04-2011, 02:38 AM
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
10-04-2011, 02:44 AM
Hi i don't have it on a site at the moment

jscheuer1
10-04-2011, 09:35 AM
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
10-04-2011, 10:34 PM
Thankyou :) i really appreciate you helping me, this is my first time with javascript so i kinda knew i had made a few mistakes!