Solved

Javascript banner rotation

Posted on 2008-10-25
6
389 Views
Last Modified: 2012-05-05
I use the javascript below to rotate some banners.  I works fine, I just want to provide nav btns/links to stop the rotation, click to a specific banner and restart the rotation.

Thanks,
WD
<script type=text/javascript>

var _banners = new Array();

function addBanner(_bannerHTML){

  _banners[_banners.length?_banners.length:0]=_bannerHTML;

}

addBanner("<a href='contact_us.asp?Subject=Catalogue Request'><img border=0 alt='Request a Catalogue' src='images/banners/1.jpg'></a>");

addBanner("<a href='gallery_blurb.asp?catid=138'><img border=0 alt='Tanzanite Collection' src='images/banners/2.jpg'></a>");

addBanner("<a href='staffers.asp?catid=138'><img border=0 alt='Meet the Staff' src='images/banners/3.jpg'></a>");
 

var div2 = new NewDiv2(window, "banner", _banners[0],0,0,50,50,500,"ABSOLUTE");

var count=0; /* which one to start with */

function doIt() {

count++;

count%=_banners.length;

div2.setBody(_banners[count]);

}

setInterval('doIt()',10000);

</script>

Open in new window

0
Comment
Question by:webdork
  • 3
  • 3
6 Comments
 
LVL 16

Expert Comment

by:sh0e
Comment Utility

<script type=text/javascript>

var _banners = new Array();

function addBanner(_bannerHTML){

  _banners[_banners.length?_banners.length:0]=_bannerHTML;

}

addBanner("<a href='contact_us.asp?Subject=Catalogue Request'><img border=0 alt='Request a Catalogue' src='images/banners/1.jpg'></a>");

addBanner("<a href='gallery_blurb.asp?catid=138'><img border=0 alt='Tanzanite Collection' src='images/banners/2.jpg'></a>");

addBanner("<a href='staffers.asp?catid=138'><img border=0 alt='Meet the Staff' src='images/banners/3.jpg'></a>");

 

var div2 = new NewDiv2(window, "banner", _banners[0],0,0,50,50,500,"ABSOLUTE");

var count=0; /* which one to start with */

function doIt() {

count++;

count%=_banners.length;

div2.setBody(_banners[count]);

}

var si = setInterval('doIt()',10000);
 

function restartBanner(start){

clearInterval(si);

count=start;

si = setInterval('doIt()',10000);

}

</script>

<input type="button" onClick="restartBanner(1)" value="Restart at position 1"></input>

Open in new window

0
 

Author Comment

by:webdork
Comment Utility
Nothing happens
0
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
Need more details.  Does the button not do anything?  Did you copy and paste the code?
I implemented the code as a working page and found no problems.

<script type=text/javascript>

var _banners = new Array();

var divid; var si;

var count=0;
 

function addBanner(_bannerHTML){

  _banners[_banners.length?_banners.length:0]=_bannerHTML;

}

addBanner("<a href='contact_us.asp?Subject=Catalogue Request'><img border=0 alt='Request a Catalogue' src='images/banners/1.jpg'></a>");

addBanner("<a href='gallery_blurb.asp?catid=138'><img border=0 alt='Tanzanite Collection' src='images/banners/2.jpg'></a>");

addBanner("<a href='staffers.asp?catid=138'><img border=0 alt='Meet the Staff' src='images/banners/3.jpg'></a>");

 

function doIt() {

count%=_banners.length;

divid.innerHTML=_banners[count];

count++;

}
 

function loads(){

divid = document.getElementById('div2');

doIt();

si = setInterval('doIt()',1000);

}

 

function restartBanner(start){

clearInterval(si);

count=start;

doIt();

si = setInterval('doIt()',1000);

}

</script>
 

<body onload="loads()">

<input type="text" value="1" id="input1"></input>

<input type="button" onClick="restartBanner(document.getElementById('input1').value)" value="Restart at position (starts at 0 index)"></input>

<div id='div2'></div>

</body>

Open in new window

0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:webdork
Comment Utility
Yeah Ok now it works. And I can see how to make links to each individual banner.  Can you add a start and stop?

Thanks,

WD
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
Comment Utility

<script type=text/javascript>

var _banners = new Array();

var divid; var si;

var count=0;

 

function addBanner(_bannerHTML){

  _banners[_banners.length?_banners.length:0]=_bannerHTML;

}

addBanner("<a href='contact_us.asp?Subject=Catalogue Request'><img border=0 alt='Request a Catalogue' src='images/banners/1.jpg'></a>");

addBanner("<a href='gallery_blurb.asp?catid=138'><img border=0 alt='Tanzanite Collection' src='images/banners/2.jpg'></a>");

addBanner("<a href='staffers.asp?catid=138'><img border=0 alt='Meet the Staff' src='images/banners/3.jpg'></a>");

 

function doIt() {

count%=_banners.length;

divid.innerHTML=_banners[count];

count++;

}

 

function startBanner(){

divid = document.getElementById('div2');

doIt();

si = setInterval('doIt()',1000);

}
 

function stopBanner(){

clearInterval(si);

}

 

function restartBanner(start){

stopBanner();

setBanner(start);

startBanner();

}
 

function setBanner(start){

count=start;

}
 

function clearBanner(){

divid.innerHTML='';

}
 
 

</script>

 

<body onload="startBanner()">

<input type="text" value="1" id="input1"></input>

<input type="button" onClick="restartBanner(document.getElementById('input1').value)" value="Restart at position (starts at 0 index)"></input>

<input type="button" onClick="startBanner();" value="Start"></input>

<input type="button" onClick="stopBanner();" value="Stop"></input>

<input type="button" onClick="clearBanner();" value="Clear"></input>

<div id='div2'></div>

</body>

Open in new window

0
 

Author Closing Comment

by:webdork
Comment Utility
You're the man.

Thanks
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now