I’ve spent the last two days looking for a free script that will rotate an ad banner without requiring a page refresh, an iFrame with a meta refresh tag or anything else that might need visitors to perform an action to get the ads to rotate. Two days! But I found one :)
Updated Script and Instructions Here
I originally wanted a php script so that all the work would be done by my server and not require Javascript to be enabled in a visitor’s browser. I quickly found that it’s easy to find a php script that rotates banners and text on page refreshes but not easy to find one that requires no user interaction to effect the ad rotation. I did find one php solution but it required me to set-up a banner exchange (yes, it was banner exchange software) and that’s a little too much work for what I want.
The solution I’ve settled on uses Javascript. Not what I was looking for but it does exactly what I need. I found my script at Dynamic Drive. It isn’t designed for ad banners, it’s designed to auto scroll images without page refreshes. I had to make few changes to the css and html to make it function as required but it works just fine.
To see it in action visit JournalXtra’s Webmaster Tools Portal and view the ad at the top right-hand side of the page. Yes, it dynamically loads ads without user interaction.
The script is known to work in Firefox 1+, Internet Explorer 6+ and Opera 9+. It didn’t work in Konqueror but that might relate to my Java settings. I use AdBlock Plus in Firefox 3 and I am still able to see ads rotate in the ad box.
This script is often incompatible with meta refresh tagsSome readers have had problems getting this script to work when their web pages contain a meta refresh tag between their <head></head> tags. If your ads fails to display properly you should remove any meta refresh tags to confirm whether or not they are affecting the proper functioning of the script.
The Instructions
The Header
Copy and paste the below code into your page’s head section (i.e between its <head> and </head> tags):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="featuredcontentglider.css" /> <script type="text/javascript" src="featuredcontentglider.js"> /*********************************************** * Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script>
The Javascript and CSS
Next, upload the Javascript and CSS files referenced by the above code. Put them in the same directory (folder) as your web page. For example, if your web page is browsed from my-site.com/index.php then you should upload the CSS and JS files to your site’s top most directory (the root directory); if your web page is browsed at my-site.com/my-folder/index.php then upload the CSS and JS files to the “my-folder” directory.
Here is the JS file:
Copy the code found at that page and paste it into a file called “featuredcontentglider.js”.
The original CSS is unsuited to our purpose so here is an edited version of it. Copy and paste the edited version into a file called “featuredcontentglider.css”:
.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 468px; /* Width of longest ad */
height: 60px; /* height of tallest ad */
border: 2px ridge black; /* set to "0" if you do not want a border */
overflow: hidden;
float: right;
margin-left: auto;
margin-right: 0;
background-color: white;
}
.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background-color: white;
padding: 0;
visibility: hidden;
width: 468px; /* Width of longest ad */
float: right;
margin-left: auto;
margin-right: 0;
}
/*style for DIV used to contain toggler links. */
.glidecontenttoggler{
disply: hidden;
width: 468px; /* Width of longest ad */
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
float: right;
margin-left: auto;
margin-right: 0;
}
.glidecontenttoggler a{
display: hidden;
}
.glidecontenttoggler a.selected{
display: hidden;
}
.glidecontenttoggler a:hover{
display: hidden;
}
.glidecontenttoggler a.toc{
}
.glidecontenttoggler a.prev, .glidecontenttoggler a.next{
}
.glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{
display: hidden;
}The original CSS is available from:
The Ad Display Code
Next, you must place some code into your web page to display your ads. I’ve encased the code between <div></div> tags with an id of “rotatedads”:
<div id="rotatedads">
<script type="text/javascript">
featuredcontentglider.init({
gliderid: "adverts", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 3500, //Glide animation duration (in milliseconds)
direction: "leftright", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [50000, 0] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>
<div id="adverts" class="glidecontentwrapper">
<div class="glidecontent">Advert Code One </div>
<div class="glidecontent" >Advert Code Two</div>
<div class="glidecontent" >Advert Code Three</div>
</div>
<div id="p-select">
<a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a>
</div>
</div>Substitute your own advert code wherever it says “Advert Code One”, “Advert Code Two” and “Advert Code Three”. Create more advert code <div></div> boxes if required.
You might wonder why I chose to hide the toggle box (shown by <div id=”p-select”> instead of just removing it. The toggle box forms part of the script. When it’s fully removed, the script no longer works; so keep it in.
More information about this featured content glider’s settings options is available from Dynamic Drive.
Please leave a comment if you need help converting the code to display your adverts. I’ll do my best to help you.
