Results 1 to 4 of 4

Thread: Need advise with this script

  1. #1
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Need advise with this script

    I am not an expert at all so please be patient. I've volunteered to help a youth sports organization with their website. The code below does work but I would like it just to scroll through the images with out needing the onClick event to happen. I just want it to start scrolling right away - what am I missing?

    <script type="text/javascript">

    var x=0;

    function rotate(num){
    fs=document.ff.slide;
    x=num%fs.length;
    if(x<0) x=fs.length-1;
    document.images.show.src=fs.options[x].value;
    fs.selectedIndex=x;}

    function auto() {
    if(document.ff.fa.value == "Stop"){
    rotate(++x);setTimeout("auto()", 2000);}}
    </script>

    <form name="ff">
    <table cellpadding="3" style="border:1px black solid;border-collapse:collapse;">
    <tr><th align=center></th></tr>

    <tr><td align=center>
    <img src="http://cdn.ngin.com/attachments/photo/0500/8763/th_action_medium.jpg" name="show">
    </td></tr>

    <tr><td align=center style="border:1px black solid;">
    <select name="slide" onChange="rotate(this.selectedIndex);">
    <option value="http://cdn.ngin.com/attachments/photo/0500/8763/th_action_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8768/th_goals_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8782/th_hits_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8788/th_saves_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8793/th_skill_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8798/th_speed_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8803/th_teamwork_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8813/th_thunder_medium.jpg"></option>
    </select>
    </td></tr>

    <tr><td align=center style="border:1px black solid;">
    <input type=button name="fa" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Start" title="Autoplay" style="width:75px;">
    </td></tr></table></form>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <script type="text/javascript">
    
    var x=0;
    
    function rotate(num){
    fs=document.ff.slide;
    x=num%fs.length;
    if(x<0) x=fs.length-1;
    document.images.show.src=fs.options[x].value;
    fs.selectedIndex=x;}
    
    function auto() {
    if(document.ff.fa.value == "Stop"){
    rotate(++x);setTimeout("auto()", 2000);}}
    
    var addEvent = (function(){return window.addEventListener? function(el, ev, f){
    		el.addEventListener(ev, f, false);
    	}:window.attachEvent? function(el, ev, f){
    		el.attachEvent('on' + ev, f);
    	}:function(){return;};
    })();
    
    addEvent(window, 'load', function(){setTimeout(auto, 2000);});
    </script>
    
    <form name="ff">
    <table cellpadding="3" style="border:1px black solid;border-collapse:collapse;">
    <tr><th align=center></th></tr>
    
    <tr><td align=center>
    <img src="http://cdn.ngin.com/attachments/photo/0500/8763/th_action_medium.jpg" name="show">
    </td></tr>
    
    <tr style="display: none;"><td align=center style="border:1px black solid;">
    <select name="slide" onChange="rotate(this.selectedIndex);">
    <option value="http://cdn.ngin.com/attachments/photo/0500/8763/th_action_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8768/th_goals_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8782/th_hits_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8788/th_saves_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8793/th_skill_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8798/th_speed_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8803/th_teamwork_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8813/th_thunder_medium.jpg"></option>
    </select>
    </td></tr>
    
    <tr><td align=center style="border:1px black solid;">
    <input type=button name="fa" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Stop" title="Autoplay" style="width:75px;">
    </td></tr></table></form>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ltrue (06-14-2010)

  4. #3
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John,

    Brilliant! Thanks so much. Is there a way to say center on page/frame and can I get rid of the stop/start button?

    Lisa

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <script type="text/javascript">
    
    var x=0;
    
    function rotate(num){
    fs=document.ff.slide;
    x=num%fs.length;
    if(x<0) x=fs.length-1;
    document.images.show.src=fs.options[x].value;
    fs.selectedIndex=x;}
    
    function auto() {
    if(document.ff.fa.value == "Stop"){
    rotate(++x);setTimeout("auto()", 2000);}}
    
    var addEvent = (function(){return window.addEventListener? function(el, ev, f){
    		el.addEventListener(ev, f, false);
    	}:window.attachEvent? function(el, ev, f){
    		el.attachEvent('on' + ev, f);
    	}:function(){return;};
    })();
    
    addEvent(window, 'load', function(){setTimeout(auto, 2000);});
    </script>
    
    <form name="ff">
    <table align="center" cellpadding="3" style="border:1px black solid;border-collapse:collapse;">
    <tr><th align=center></th></tr>
    
    <tr><td align=center>
    <img src="http://cdn.ngin.com/attachments/photo/0500/8763/th_action_medium.jpg" name="show">
    </td></tr>
    
    <tr style="display: none;"><td align=center style="border:1px black solid;">
    <select name="slide" onChange="rotate(this.selectedIndex);">
    <option value="http://cdn.ngin.com/attachments/photo/0500/8763/th_action_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8768/th_goals_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8782/th_hits_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8788/th_saves_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8793/th_skill_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8798/th_speed_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8803/th_teamwork_medium.jpg"></option>
    <option value="http://cdn.ngin.com/attachments/photo/0500/8813/th_thunder_medium.jpg"></option>
    </select>
    </td></tr>
    
    <tr style="display: none;"><td align=center style="border:1px black solid;">
    <input type=button name="fa" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Stop" title="Autoplay" style="width:75px;">
    </td></tr></table></form>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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