Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post

    Dynamically changing Play / Pause buttons

    Hi all and hope that you can help.

    I have an image slideshow that works fine and, I may be being over ambitious but I'd like to combine the Play and Pause buttons so that when the slideshow is playing, the Play button is replaced by the Pause button and when it is paused the Pause button is replaced by the Play button.

    Sounds like a simple JavaScipt change image function but both buttons have roll over effects and they both have different JavaScript functions assigned to them so I'm struggling to get my head around what I need to do.

    Thanks for your interest,
    R

    I've highlighted the relevant chunks of code below...

    The HTML / CSS...

    Code:
    <style type="text/css">
    #midcol {
    	padding: 0 25px;
    	width: 672px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }
    #first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/first.gif) no-repeat 0 0; }
    #previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/previous.gif) no-repeat 0 0; }
    #pause {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/pause.gif) no-repeat 0 0; }
    #pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/play.gif) no-repeat 0 0; }
    #next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/next.gif) no-repeat 0 0; }
    #last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/last.gif) no-repeat 0 0; }
    #first:hover {background:url(navbars/first.gif) no-repeat 0 -32px; }
    #previous:hover {background:url(navbars/previous.gif) no-repeat 0 -32px;}
    #pause:hover {background:url(navbars/pause.gif) no-repeat 0 -32px;}
    #pplay:hover {background:url(navbars/play.gif) no-repeat 0 -32px;}
    #next:hover {background:url(navbars/next.gif) no-repeat 0 -32px;}
    #last:hover {background:url(navbars/last.gif) no-repeat 0 -32px;}
    </style>
    </head>
    
    <body>
    <div id="midcol">
    <table width="592" border="0">
    <tr >
      <td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr>
      <tr><td colspan="8"><br /></td></tr>
      <tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr>
      <tr height="33">
      <td width="160"></td>
      <td id="first" onclick="first();clearTimeout(timerID);"></td>
      <td id="previous" onclick="previous();clearTimeout(timerID);"></td>
      <td id="pause" onclick="clearTimeout(timerID);"></td>
      <td id="pplay" onclick="swapPicture();"></td>
      <td id="next" onclick="next();clearTimeout(timerID);"></td>
      <td id="last" onclick="last();clearTimeout(timerID);"></td>
      <td width="160"><form name="dropdown" action="">Slide duration:
    <select id="duration" onchange="setInterval(this.form.duration);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>
    </form></td>
      </tr>
      </table>
    The JavaScript...

    Code:
    var dimages=new Array();
    var numImages=31;
    var interval = 3000; 
    var image_dir = "images/large/"
    for (i=0; i<numImages; i++)
    {
      dimages[i]=new Image();
      dimages[i].src=image_dir+(i+1)+".jpg";
    }
    var imageCaption = new Array();
    var ImageNum = 0;
    imageCaption[ImageNum++] = "Caption 1.";
    imageCaption[ImageNum++] = "Caption 2.";
    
    etc. etc.
    
    var curImage=-1;
    function swapPicture()
    {
      if (document.images) // does the browser support image changes?
      {
        var nextImage=curImage+1;
        if (nextImage>=numImages)
          nextImage=0;
        if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded?
        {
          var target=0;
          if (document.images.myImage)
            target=document.images.myImage;
    		cap = imageCaption[nextImage];
    		document.getElementById('caption').innerHTML=cap;
          if (document.all && document.getElementById("myImage"))
            target=document.getElementById("myImage");
    		cap = imageCaption[nextImage];
    		document.getElementById('caption').innerHTML=cap;
      
          // make sure target is valid.  It might not be valid
          //   if the page has not finished loading
          if (target)
          {
            target.src=dimages[nextImage].src;
            curImage=nextImage;
          }
    	  doTimer(interval);
    	}
        else
        {
          setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again.
        }
      }
    }
    
    function first(){ // Goes to the 1st image and stops
    	curImage=-1;
    	stopTimer();
    	swapPicture();
    }
    function last(){ // Goes to the last image and stops
    	curImage=numImages-2;
    	stopTimer();
    	swapPicture();
    }
    function previous(){ // Goes to the previous image and stops
    	curImage=curImage-2;
    	stopTimer();
    	swapPicture();
    }
    function next(){ // Goes to the next image and stops
    	stopTimer();
    	swapPicture();
    }
    function doTimer(interval){ // The Play button
    	timerID=setTimeout("swapPicture()",interval);
    }
    function stopTimer(){ // The Pause button
    	clearTimeout(timerID);
    }
    function setInterval(t){ // The slide duration drop down box.
    	var e = document.getElementById("duration"); 
    	interval = (e.options[e.selectedIndex].value)*1000; 
    }
    doTimer(interval); // Starts the slideshow on load.

  2. Users who have thanked wolfenr for this post:

    tony mart (12-22-2011)

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    Thanks @Sciliano but I'm not sure this will help. I've got the slideshow working just fine, I just want some subtlety with my Play / Pause buttons.

    Cheers
    R

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    OK guys I'm making some progress but am not there yet.

    My revised code works as required in the Live View window of Dreamweaver but doesn't display either Play or Pause buttons in IE or FF.

    Any clues?
    My thanks
    R

    My adjusted HTML code...

    Code:
    <body onload="addPause();">
    // Plenty of code above here
      <tr height="33">
      <td width="160"></td>
      <td id="first" onclick="first();clearTimeout(timerID);"></td>
      <td id="previous" onclick="previous();clearTimeout(timerID);"></td>
      <!-- As slideshow auto starts only display Pause button first -->
      <div id="firstButton"></div> // This is the container for either the Play or Pause button
      <td id="next" onclick="next();clearTimeout(timerID);"></td>
      <td id="last" onclick="last();clearTimeout(timerID);"></td>
    // Code after here too
    The JavaScript to control what gets put in the the 'firstButton' div...
    Code:
    // loads of other stuff above here
    function changeButton1(){ // Clicked by Pause button to convert it to the Play button
    	document.getElementById('firstButton').innerHTML = playHTML;
    }
    function changeButton2(){ // Clicked by Play button to convert it to the Pause button.
    	document.getElementById('firstButton').innerHTML = pauseHTML;
    }
    pauseHTML = "<td id='pause' onclick='changeButton1();clearTimeout(timerID);'></td>";
    playHTML = "<td id='pplay' onclick='changeButton2();swapPicture();'></td>";
    
    function addPause(){ // Shows the Pause button on load as the slideshow auto starts
    	document.getElementById('firstButton').innerHTML = pauseHTML;
    }
    The buttons are defined as background images in CSS and have hover over effects there too.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    do you get errors in the error console of FF?

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    Good Q @xelawho!

    Yep I do but I don't understand it... (but I'm off digging / Googling right now)

    [17:03:57.034] Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead. @ http://localhost/my_sites/php/stories/temp.html

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    don't waste your time - that doesn't mean anything. It's just a, erm, firebug bug

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    Thanks @xelawho - I did Google and the first post I found was a thread of yours on the same issue.

    To continue the story...

    What I'm hoping to end up with in the HTML after JavaScript has done its magic is:
    Before loading =
    Code:
    <div id="firstButton"></div>
    Onload =
    Code:
    <div id="firstButton"><td id='pause' onclick='changeButton1();clearTimeout(timerID);'></td></div>
    After clicking the Pause button =
    Code:
    <div id="firstButton"><td id='pplay' onclick='changeButton2();swapPicture();'></td></div>
    Is it possible to check this using Firebug? I'm not familiar with this debugger.
    Thanks

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    dunno. hard to say without seeing the page in action.

    I suspect you're having trouble redefining the onclick after the element has been created (but that's just a wild guess). Here's a simple snippet that I use to toggle, maybe you can adapt it:

    Code:
    <html>
    <head>
    </head>
    
    <body onload="addPause()">
    <div id="firstButton" onclick="changeButts()"></div>
    <script>
    var clicks =0;
    
    function changeButts(){
    clicks++
    if (clicks%2==0){
    document.getElementById('firstButton').innerHTML = pauseHTML;
    swapPicture();
    }else {
    document.getElementById('firstButton').innerHTML = playHTML;
    clearTimeout(timerID);
    	}
    }
    pauseHTML = "<td id='pause'>pause</td>";
    playHTML = "<td id='pplay'>play</td>";
    
    function addPause(){ 
    	document.getElementById('firstButton').innerHTML = pauseHTML;
    }
    </script>
    </body>
    </html>
    Last edited by xelawho; 12-21-2011 at 06:56 PM.

  • #10
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    Thanks @xelawho, appreciate your input.

    I've embedded your code but still the same problem i.e. it (sort of) works in Dreamweaver Live View but not in any real browser.

    When I say it sort of works, I mean the correct button appears on the page and either plays or pauses the slideshow as expected but it is not in the right place. In addition I notice in Firebug that the div id firstButton is not in the expected place and doesn't have any content.

    This is how Firebug reports the HTML structure...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <body onload="addPause();">
    <div id="midcol">
    <div id="firstButton" onclick="changeButts();"></div> // this should be appearing within the table, not here.
    <table width="592" border="0">
    <tbody>
    <tr>
    <tr>
    <tr height="60">
    <tr height="33">
    <td width="160"></td>
    <td id="first" onclick="first();clearTimeout(timerID);" title="First image"></td>
    <td id="previous" onclick="previous();clearTimeout(timerID);" title="Previous image"></td>
    <td id="next" onclick="next();clearTimeout(timerID);" title="Next image"></td>
    <td id="last" onclick="last();clearTimeout(timerID);" title="Last image"></td>
    <td width="160">
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>
    Finally, a (non working) example of the page on the web.. The Play / Pause buttons should be in the middle of the other buttons.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    no, that link has your old code in it - seems the js file hasn't been updated?

    [edit]: I see it now (the code, that it is), but I don't see the play/pause button at all... I guess this is the problem, huh?
    Last edited by xelawho; 12-21-2011 at 08:00 PM.

  • #12
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    Thanks @xelawho but the sample js file does have some redundant old code (lazy me) but also includes the new code you posted.

    Here's the js code FYI. The stuff of interest is at the foot of the JS code.
    Code:
    // JavaScript Document
    
    var dimages=new Array();
    var numImages=31;
    var interval = 3000; 
    var image_dir = "images/large/"
    for (i=0; i<numImages; i++)
    {
      dimages[i]=new Image();
      dimages[i].src=image_dir+(i+1)+".jpg";
    }
    var imageCaption = new Array();
    var ImageNum = 0;
    // Load of stuff here to set the image captions
    ...
    // end loading captions
    
    var curImage=-1;
    
     
    function swapPicture()
    {
      if (document.images) // does the browser support image changes?
      {
        var nextImage=curImage+1;
        if (nextImage>=numImages)
          nextImage=0;
        if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded?
        {
          var target=0;
          if (document.images.myImage)
            target=document.images.myImage;
    		cap = imageCaption[nextImage];
    		document.getElementById('caption').innerHTML=cap;
          if (document.all && document.getElementById("myImage"))
            target=document.getElementById("myImage");
    		cap = imageCaption[nextImage];
    		document.getElementById('caption').innerHTML=cap;
      
          // make sure target is valid.  It might not be valid
          //   if the page has not finished loading
          if (target)
          {
            target.src=dimages[nextImage].src;
            curImage=nextImage;
          }
    	  doTimer(interval);
    	}
        else
        {
          setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again.
        }
      }
    }
    
    function first(){ // Goes to the 1st image and stops
    	curImage=-1;
    	stopTimer();
    	swapPicture();
    }
    function last(){ // Goes to the last image and stops
    	curImage=numImages-2;
    	stopTimer();
    	swapPicture();
    }
    function previous(){ // Goes to the previous image and stops
    	curImage=curImage-2;
    	stopTimer();
    	swapPicture();
    }
    function next(){ // Goes to the next image and stops
    	stopTimer();
    	swapPicture();
    }
    function doTimer(interval){ // The Play button
    	timerID=setTimeout("swapPicture()",interval);
    }
    function stopTimer(){ // The Pause button
    	clearTimeout(timerID);
    }
    function setInterval(t){ // The slide duration drop down box.
    	var e = document.getElementById("duration"); 
    	interval = (e.options[e.selectedIndex].value)*1000; 
    }
    function changeButton1(){ // Clicked by Pause button
    	document.getElementById('firstButton').innerHTML = playHTML;
    }
    function changeButton2(){ // Clicked by Play button
    	document.getElementById('firstButton').innerHTML = pauseHTML;
    }
    pauseHTML = "<td id='pause'></td>";
    playHTML = "<td id='pplay'></td>";
    
    function addPause(){
    	document.getElementById('firstButton').innerHTML = pauseHTML;
    }
    
    var clicks=0;
    function changeButts(){
    	clicks++;
    	if (clicks%2==0){
    	document.getElementById('firstButton').innerHTML = pauseHTML;
    	swapPicture();
    	} else {
    	document.getElementById('firstButton').innerHTML = playHTML;
    	clearTimeout(timerID);
    	}
    }
    doTimer(interval); // Starts the slideshow on load.

  • #13
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    Yep that's exactly the problem.

    Don't know if you've a) got Dreamweaver or, b) tried loading the 2 files into Dreamweaver, but if you do, and turn on Live View, you'll find the Play / Pause button at the top of the page and it has the functionality I'm looking for.

    Summary, don't understand why this works in Live View but not in reality.

    Thanks for sustaining your interest in this.
    Best wishes,
    R
    Last edited by wolfenr; 12-21-2011 at 08:16 PM.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    no, that's not going to happen.

    have a look at your page in firebug - click on the html tab and mouseover the various elements - you will see that your firstButton div is there, but it doesn't show up.

    I don't know much about laying out with tables (except that it's a bad idea, but why not wrap that div in a <td></td> like the rest of your buttons? or even just change it to
    <td id="firstButton" onclick="changeButts();"></td>

  • #15
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    OK no problem.

    Yep that's a valid suggestion but I need an ID to reference the object so that I can do onload / onclick etc. functions but I also need an ID so that I can reference it in CSS so that the correct background image displays and the hover effects work. (This is probably the heart of my problems i.e. needing to reference the object twice!).

    Summary - I need a cunk of HTML that I can reference in JavaScript that can also be separately referenced in CSS.

    Sadly I'm going to have to close down now but will experiment further tomorrow a.m.

    Really appreciate you input,
    My thanks,
    R


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •