Page 1 of 3 123 LastLast
Results 1 to 10 of 27

Thread: Next button for scroll code.

  1. #1
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Next button for scroll code.

    I've got a great scroll code that I use for member banners and have no complaints on how well it works but I was hoping to add a helpful feature. It scrolls at the speed you want and when clicking on the banner goes to the link or website of the banner owner. But lets say you are on a thread and all of a sudden you would like to go to a certain banner member's site you have to wait until their banner comes up to do so. I like to run it slower for more exposer time but it's frustrating to have to wait through all the banners you don't want to use until your desired one appears.

    What I was wondering is could a "Next" button be placed beside each banner so that if you wanted to immediately start scrolling through the banners manually you could and reach the desired banner more quickly? Here is the banners in action working:

    http://www.thescooterprofessor.proboards.com/

    Here is the code. Thanks


    Code:
    <script type="text/javascript">
    <!--
    //preload images
    var image1=new Image()
    image1.src="http://www.jr-richscooterdoc.com/Vbanlogo/RapidJim.png"
    var image2=new Image()
    image2.src="http://www.jr-richscooterdoc.com/Vbanlogo/Abscoot.jpg"
    var image3=new Image()
    image3.src="http://www.jr-richscooterdoc.com/Vbanlogo/MegM2.jpg"
    var image4=new Image()
    image4.src="http://www.jr-richscooterdoc.com/Vbanlogo/valleyS.jpg"
    var image5=new Image()
    image5.src="http://www.jr-richscooterdoc.com/Vbanlogo/buggyP.jpg"
    var image6=new Image()
    image6.src="http://www.jr-richscooterdoc.com/Vbanlogo/SCOOTERCHROMEPARTS.png"
    var image7=new Image()
    image7.src="http://www.jr-richscooterdoc.com/Vbanlogo/scrappydog.jpg"
    var image8=new Image()
    image8.src="http://www.jr-richscooterdoc.com/Vbanlogo/Bintelli.jpg"
    var image9=new Image()
    image9.src="http://www.jr-richscooterdoc.com/Vbanlogo/TVnAC.png"
    var image10=new Image()
    image10.src="http://www.jr-richscooterdoc.com/Vbanlogo/PFS.jpg"
    
    //-->
    
    </script>
    <p align="center">
    <a href="javascript:slidelink()">
    <img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif" name="slide" border="1" width="600" height="100" position="center" /></a>
    <script type="text/javascript">
    <!--
    var step=1
    var whichimage=1
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    whichimage=step
    if (step<10)
    step++
    else
    step=1
    setTimeout("slideit()",8000)
    }
    slideit()
    function slidelink(){
    if (whichimage==1)
    window.location="http://www.rapidrepairpowersports.com/"
    else if (whichimage==2)
    window.location="http://www.absolutelyscooterparts.net"
    else if (whichimage==3)
    window.location="http://www.megamotormadness.com/"
    else if (whichimage==4)
    window.location="http://www.scootersus.com"
    else if (whichimage==5)
    window.location="http://www.buggypartsnw.com"
    else if (whichimage==6)
    window.location="http://scooterchromeparts.com"
    else if (whichimage==7)
    window.location="http://www.scrappydogscooters.com/Home_Page.php"
    else if (whichimage==8)
    window.location="http://www.bintelli.com/"
    else if (whichimage==9)
    window.location="http://www.testedscooterparts.com/"
    else if (whichimage==10)
    window.location="http://www.partsforscooters.com/"
    
    }
    //-->
    </script>
    </p>
    <!--Scroller Ad Code-->

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    <body>
    <script type="text/javascript">
    <!--
    //preload images
    var image1=new Image()
    image1.src="http://www.jr-richscooterdoc.com/Vbanlogo/RapidJim.png"
    var image2=new Image()
    image2.src="http://www.jr-richscooterdoc.com/Vbanlogo/Abscoot.jpg"
    var image3=new Image()
    image3.src="http://www.jr-richscooterdoc.com/Vbanlogo/MegM2.jpg"
    var image4=new Image()
    image4.src="http://www.jr-richscooterdoc.com/Vbanlogo/valleyS.jpg"
    var image5=new Image()
    image5.src="http://www.jr-richscooterdoc.com/Vbanlogo/buggyP.jpg"
    var image6=new Image()
    image6.src="http://www.jr-richscooterdoc.com/Vbanlogo/SCOOTERCHROMEPARTS.png"
    var image7=new Image()
    image7.src="http://www.jr-richscooterdoc.com/Vbanlogo/scrappydog.jpg"
    var image8=new Image()
    image8.src="http://www.jr-richscooterdoc.com/Vbanlogo/Bintelli.jpg"
    var image9=new Image()
    image9.src="http://www.jr-richscooterdoc.com/Vbanlogo/TVnAC.png"
    var image10=new Image()
    image10.src="http://www.jr-richscooterdoc.com/Vbanlogo/PFS.jpg"
    
    //-->
    
    </script>
    <p align="center">
    <a href="javascript:slidelink()">
    <img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif" name="slide" border="1" width="600" height="100" position="center" /></a>
    <a href="javascript:next();" onclick="clearTimeout(slideit.timer); slideit(); return false;">Next</a>
    <script type="text/javascript">
    <!--
    var step=1
    var whichimage=1
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    whichimage=step
    if (step<10)
    step++
    else
    step=1
    slideit.timer = setTimeout("slideit()",8000);
    }
    slideit();
    function slidelink(){
    if (whichimage==1)
    window.location="http://www.rapidrepairpowersports.com/"
    else if (whichimage==2)
    window.location="http://www.absolutelyscooterparts.net"
    else if (whichimage==3)
    window.location="http://www.megamotormadness.com/"
    else if (whichimage==4)
    window.location="http://www.scootersus.com"
    else if (whichimage==5)
    window.location="http://www.buggypartsnw.com"
    else if (whichimage==6)
    window.location="http://scooterchromeparts.com"
    else if (whichimage==7)
    window.location="http://www.scrappydogscooters.com/Home_Page.php"
    else if (whichimage==8)
    window.location="http://www.bintelli.com/"
    else if (whichimage==9)
    window.location="http://www.testedscooterparts.com/"
    else if (whichimage==10)
    window.location="http://www.partsforscooters.com/"
    
    }
    //-->
    </script>
    </p>
    <!--Scroller Ad Code-->
    </body>
    </html>
    - John
    ________________________

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

  3. #3
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Awesome John! Works like a charm! Thanks!

  4. #4
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Another question/request? I made a button out of this and centered it up with my banner and my members love it and some wondered if a back button could be added? If so can we put it on the left side of the banner?

    http://www.thescooterprofessor.proboards.com/

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    img[name='slide'] {
    	vertical-align: middle;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    <!--
    //preload images
    var image1=new Image()
    image1.src="http://www.jr-richscooterdoc.com/Vbanlogo/RapidJim.png"
    var image2=new Image()
    image2.src="http://www.jr-richscooterdoc.com/Vbanlogo/Abscoot.jpg"
    var image3=new Image()
    image3.src="http://www.jr-richscooterdoc.com/Vbanlogo/MegM2.jpg"
    var image4=new Image()
    image4.src="http://www.jr-richscooterdoc.com/Vbanlogo/valleyS.jpg"
    var image5=new Image()
    image5.src="http://www.jr-richscooterdoc.com/Vbanlogo/buggyP.jpg"
    var image6=new Image()
    image6.src="http://www.jr-richscooterdoc.com/Vbanlogo/SCOOTERCHROMEPARTS.png"
    var image7=new Image()
    image7.src="http://www.jr-richscooterdoc.com/Vbanlogo/scrappydog.jpg"
    var image8=new Image()
    image8.src="http://www.jr-richscooterdoc.com/Vbanlogo/Bintelli.jpg"
    var image9=new Image()
    image9.src="http://www.jr-richscooterdoc.com/Vbanlogo/TVnAC.png"
    var image10=new Image()
    image10.src="http://www.jr-richscooterdoc.com/Vbanlogo/PFS.jpg"
    
    //-->
    
    </script>
    <p align="center">
    <button onclick="clearTimeout(slideit.timer); step = (whichimage + 9) % 10 || 10; slideit();">PREV</button>
    <a href="javascript:slidelink()">
    <img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif" name="slide" border="1" width="600" height="100" position="center" /></a>
    <button onclick="clearTimeout(slideit.timer); slideit();">NEXT</button>
    <script type="text/javascript">
    <!--
    var step=1
    var whichimage=1
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    whichimage=step
    if (step<10)
    step++
    else
    step=1
    slideit.timer = setTimeout("slideit()",8000);
    }
    slideit();
    function slidelink(){
    if (whichimage==1)
    window.location="http://www.rapidrepairpowersports.com/"
    else if (whichimage==2)
    window.location="http://www.absolutelyscooterparts.net"
    else if (whichimage==3)
    window.location="http://www.megamotormadness.com/"
    else if (whichimage==4)
    window.location="http://www.scootersus.com"
    else if (whichimage==5)
    window.location="http://www.buggypartsnw.com"
    else if (whichimage==6)
    window.location="http://scooterchromeparts.com"
    else if (whichimage==7)
    window.location="http://www.scrappydogscooters.com/Home_Page.php"
    else if (whichimage==8)
    window.location="http://www.bintelli.com/"
    else if (whichimage==9)
    window.location="http://www.testedscooterparts.com/"
    else if (whichimage==10)
    window.location="http://www.partsforscooters.com/"
    
    }
    //-->
    </script>
    </p>
    <!--Scroller Ad Code-->
    </body>
    </html>
    - John
    ________________________

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

  6. #6
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    John You're a champ! Also it was easy to see how to edit. On one forum I have 10 banners, the other one 9 so I just changed the numbers to match and it was perfect

    Thanks!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    I just discovered there's an easier way:

    Code:
    <button onclick="clearTimeout(slideit.timer); step = --whichimage || 10; slideit();">PREV</button>
    only one number to change.
    - John
    ________________________

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

  8. #8
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Got it! Thanks!

  9. #9
    Join Date
    Oct 2013
    Posts
    72
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Been awhile since I asked about this code and it still works great but I was wondering if the code could be changed to a mouse over type that would display another chosen image with the ability to still click on the image to take one to a link?

    I can use this code in my templates or headers to make this happen:

    Code:
    <a href="http://thescooterprofessor.proboards.com/" ><img src=" http://www.jr-richscooterdoc.com/perspics/docisin.jpg" onmouseover="this.src='http://www.jr-richscooterdoc.com/perspics/monkey.gif'" onmouseout="this.src='http://www.jr-richscooterdoc.com/perspics/docisin.jpg'"/></a>
    Could the above banner code be changed to work like this code?

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Let me get this straight. The script already has an image and a link that clicking on it will take you to. All you want to do is add a hover effect to change each given image to a different one, right? Hmm, if so, looking at it I think you would also want it to pause while the mouse is over it, otherwise things could get messy. Pausing while the mouse is over it is a good idea even without the hover effect because otherwise a link might change before the person is able to click on it. And with the hover effect, it would be even more important. If that's what you want, and you agree about the pause, this seems to work (though I may refine it):

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    img[name='slide'] {
    	vertical-align: middle;
    }
    </style>
    <script type="text/javascript">
    
    //preload images
    var image1 = new Image();
    image1.src = "http://www.jr-richscooterdoc.com/Vbanlogo/RapidJim.png";
    var image2 = new Image();
    image2.src = "http://www.jr-richscooterdoc.com/Vbanlogo/Abscoot.jpg";
    var image3 = new Image();
    image3.src = "http://www.jr-richscooterdoc.com/Vbanlogo/MegM2.jpg";
    var image4 = new Image();
    image4.src = "http://www.jr-richscooterdoc.com/Vbanlogo/valleyS.jpg";
    var image5 = new Image();
    image5.src = "http://www.jr-richscooterdoc.com/Vbanlogo/buggyP.jpg";
    var image6 = new Image();
    image6.src = "http://www.jr-richscooterdoc.com/Vbanlogo/SCOOTERCHROMEPARTS.png";
    var image7 = new Image();
    image7.src = "http://www.jr-richscooterdoc.com/Vbanlogo/scrappydog.jpg";
    var image8 = new Image();
    image8.src = "http://www.jr-richscooterdoc.com/Vbanlogo/Bintelli.jpg";
    var image9 = new Image();
    image9.src = "http://www.jr-richscooterdoc.com/Vbanlogo/TVnAC.png";
    var image10 = new Image();
    image10.src = "http://www.jr-richscooterdoc.com/Vbanlogo/PFS.jpg";
    
    var numimgs = 0;
    while(window['image' + (++numimgs)]){}
    --numimgs;
    
    </script>
    </head>
    <body>
    <p align="center">
    <button onclick="clearTimeout(slideit.timer); step = whichlink || numimgs; slideit();">PREV</button>
    <a href="javascript:slidelink()">
    <img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif" name="slide" border="1" width="600" height="100" position="center" /></a>
    <button onclick="clearTimeout(slideit.timer); slideit();">NEXT</button>
    </p>
    <script type="text/javascript">
    
    var step = 1;
    var whichlink = 0;
    function slideit(){
    	if (!document.images){return;}
    	document.images.slide.src = window['image' + step].src;
    	whichlink = step - 1;
    	step = (++step) % numimgs || numimgs;
    	slideit.timer = setTimeout(slideit, 8000);
    }
    
    slideit();
    
    function slidelink(){
    	window.location = [
    		/* 1 */ "http://www.rapidrepairpowersports.com/",
    		/* 2 */ "http://www.absolutelyscooterparts.net",
    		/* 3 */ "http://www.megamotormadness.com/",
    		/* 4 */ "http://www.scootersus.com",
    		/* 5 */ "http://www.buggypartsnw.com",
    		/* 6 */ "http://scooterchromeparts.com",
    		/* 7 */ "http://www.scrappydogscooters.com/Home_Page.php",
    		/* 8 */ "http://www.bintelli.com/",
    		/* 9 */ "http://www.testedscooterparts.com/",
    		/* 10 */ "http://www.partsforscooters.com/"
    	][whichlink];
    }
    
    function slidehover(){
    	clearTimeout(slideit.timer);
    	slidehover.im = document.images.slide.src;
    	document.images.slide.src = [
    		/* 1 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
    		/* 2 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
    		/* 3 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
    		/* 4 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
    		/* 5 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
    		/* 6 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
    		/* 7 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
    		/* 8 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
    		/* 9 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
    		/* 10 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif"
    	][whichlink];
    }
    
    function slideout(){
    	document.images.slide.src = slidehover.im;
    	slideit.timer = setTimeout(function(){slideit();}, 4000);
    }
    
    document.images.slide.onmouseover = slidehover;
    document.images.slide.onmouseout = slideout;
    </script>
    <!-- /Scroller Ad Code -->
    </body>
    </html>
    Notice the highlighted image list near the end inside the slidehover() function. Since I only had one extra banner sized image handy to play with, I made them all the same. If I understand what you are going for, you would make each of these different and they would each be for the same site as the non-hover image. For example, /* 4 */ would be an alternate image for scootersus.com and /* 5 */ would be one for buggypartsnw.com, and so on.

    Any questions, just let me know.
    Last edited by jscheuer1; 09-27-2014 at 06:10 PM. Reason: code improvement
    - John
    ________________________

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

Similar Threads

  1. Replies: 0
    Last Post: 06-08-2012, 03:27 PM
  2. Resolved small scroll to top code throwing IE error
    By ?foru in forum JavaScript
    Replies: 1
    Last Post: 04-09-2009, 01:57 AM
  3. Looking for Video thumbnail Scroll code
    By sayjoo2004 in forum Looking for such a script or service
    Replies: 1
    Last Post: 12-27-2008, 08:56 AM
  4. How to disable middle scroll button
    By Nammer in forum JavaScript
    Replies: 6
    Last Post: 12-10-2006, 03:47 PM
  5. how would you code a second button???
    By sportious in forum The lounge
    Replies: 3
    Last Post: 08-09-2005, 01:53 PM

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
  •