/    Sign up×
Community /Pin to ProfileBookmark

Change scrolling banner to random scrolling banner

__(Added `[code]…[/code]` tags ~ MOD)__

I found Java Script code to create a scrolling banner for some ads I’m going to have on my site, however it scrolls in order. I want to randomize this. I’ll post the code below:

[code]
<script language=”JavaScript1.2″>

var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6

// place your images, text, etc in the array elements here
var items = new Array();
items[0]=”<a href=’sponsor.php’ ><img alt=’image0 (9K)’ src=’ http://www.hyhpawardshow.com/images/1.png’ height=’200′ width=’200′ border=’0′ /></a>”; //a linked image
items[1]=”<a href=’https://scarehollow.wixsite.com/haunt’ ><img alt=’Scare Hollow’ src=’ http://www.hyhpawardshow.com/images/2.jpg’ height=’200′ width=’200′ border=’0′ /></a>”;
items[2]=”<a href=’http://www.samhaynes.moonfruit.com/’ ><img alt=’Sam Haynes’ src=’ http://www.hyhpawardshow.com/images/3.jpg’ height=’200′ width=’200′ border=’0′ /></a>”;
spon
function rotater() {
document.getElementById(“placeholder”).innerHTML = items[current];
current = (current==items.length-1) ? 0 : current + 1;
setTimeout(“rotater()”,howOften*1000);
}

function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items[current]);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById(“placeholderdiv”).innerHTML=items[current]
if(document.all)
placeholderdiv.innerHTML=items[current];

current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout(“rotater()”,howOften*1000);
}
window.onload=rotater;
//–>
</script>
[/code]

I have a feeling it has to do with this part of the code: ` current = (current==items.length-1) ? 0 : current + 1;`, but I’m not well versed in JavaScript, so I could be wrong.

Can anyone help me make this scrolling banner randomized?

to post a comment
JavaScript

10 Comments(s)

Copy linkTweet thisAlerts:
@rootNov 06.2019 — You may as well look for a more modern script as it reliant on outdated methods and by the looks of it, has been updated at least once but still appended to old methods.

I'd say not limit yourself and you could have a random banner via an AJAX request to the server and have a server script fetch the next random banner...
Copy linkTweet thisAlerts:
@Joven76authorNov 06.2019 — Thank you for your reply Root. I was afraid of that to be honest. I did some editing of it myself, but only with my limited knowledge of JavaScript. I'll have to look into an AJAX request because I'm not familiar with that at all. Any guidance you can provide however would be greatly appreciated.
Copy linkTweet thisAlerts:
@cootheadNov 06.2019 — Hi there Joven76,

if you just want the code modernised a

smidgen, then take a little peep at this...

``<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;random link rotation&lt;/title&gt;

&lt;!--&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;_--&gt;

&lt;style media="screen"&gt;
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}

h1 {
font-size: 1.25em;
color: #555;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}

#link {
display: block;
width: 12.5em;
padding: 0.5em;
margin: auto;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}

#link img {
display: block;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;random link rotation&lt;/h1&gt;

&lt;a id="link" href="#"&gt;
&lt;img src="#" width="200" height="200" alt=""&gt;
&lt;/a&gt;

&lt;script&gt;
(function( d ) {
'use strict';

var delay = 5000,
temp = 0,
num = 0,
link = d.getElementById( 'link' );

var items = [
[ 'sponsor.php', 'http://www.hyhpawardshow.com/images/1.png', 'image0 (9K)' ],
[ 'https://scarehollow.wixsite.com/haunt', 'http://www.hyhpawardshow.com/images/2.jpg', 'Scare Hollow' ],
[ 'http://www.samhaynes.moonfruit.com/', 'http://www.hyhpawardshow.com/images/3.jpg', 'Sam Haynes' ],
[ 'https://duckduckgo.com/', 'https://www.coothead.co.uk/images/anim1still.gif', 'blue pattern', ]
];

function rotater( num, temp ) {
while ( temp === num ){
num = Math.floor( Math.random() * items.length );
link.href = items[ num ][ 0 ];
link.querySelector( 'img' ).src = items[ num ][ 1 ];
link.querySelector( 'img' ).alt = items[ num ][ 2 ];
}
temp = num;
setTimeout(
function(){
rotater( num, temp );
}, delay );
}
rotater( num, temp );

}( document ));
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;<i>
</i>
``


_coothead_
Copy linkTweet thisAlerts:
@Joven76authorNov 06.2019 — coothead, you've made me a very happy developer right now! It works perfectly! But now I must ask another question as I was thinking about this in more detail today. I want this rotating logo/banner on multiple pages. Is there a way I can put the var items as it's own separate file on my webserver and have the javascript refer to that for the images rather than having to update 4 or 5 different pages?

It seems like a simple fix in my mind, however if that's another involved process, then I will just live with having to update different websites when we get a new sponsor, so no major issue.

Thank you again coothead! Words cannot express just how grateful I am. This was the last element of my website I wanted to get finished.
Copy linkTweet thisAlerts:
@cootheadNov 06.2019 — Hi there Joven76,

the code that gave in my previous post was just a basic example.

Checkout the zip file here...

http://www.mediafire.com/file/fhhtgmm1iots802/Joven76.zip/

...to see how it would be coded for website. 😁

_coothead_
Copy linkTweet thisAlerts:
@Joven76authorNov 07.2019 — WOW, that's so much cleaner. Thank you so much for your help coothead! I really appreciate it
Copy linkTweet thisAlerts:
@cootheadNov 07.2019 — No problem, you're very welcome. ;)


[i]coothead[/i]
Copy linkTweet thisAlerts:
@Joven76authorNov 08.2019 — Hey coothead, I noticed when clicking on the link, it opens it in the same browser. Is there a way to open it in a new tab or browser instead so my website still stays open?
Copy linkTweet thisAlerts:
@cootheadNov 08.2019 — Hi there Javen76,

simply change this part of the script...

``<i>
</i> while ( temp === num ){
num = Math.floor( Math.random() * items.length );
link.href = items[ num ][ 0 ];
link.querySelector( 'img' ).src = items[ num ][ 1 ];
link.querySelector( 'img' ).alt = items[ num ][ 2 ];
}<i>
</i>
`</CODE>

...to this...

<CODE>
`<i>
</i> while ( temp === num ){
num = Math.floor( Math.random() * items.length );
link.target = 'blank';
link.href = items[ num ][ 0 ];
link.querySelector( 'img' ).src = items[ num ][ 1 ];
link.querySelector( 'img' ).alt = items[ num ][ 2 ];
}<i>
</i>
``


_coothead_
Copy linkTweet thisAlerts:
@Joven76authorNov 08.2019 — Thank you again coothead. I figured it was something simple like that.
×

Success!

Help @Joven76 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...