Auto Rotating Ad Banner, No iFrame, No Page Refresh..And It’s Free!

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):

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:

featuredcontentglider.js

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”:

The original CSS is available from:

featuredcontentglider.css

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”:

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.

  Copyright secured by Digiprove © 2010

Win the battle. Social Warfare Dynamik Website Builder Author Pro

Leave a Reply

19 Comments on "Auto Rotating Ad Banner, No iFrame, No Page Refresh..And It’s Free!"

Notify of
Sort by:   newest | oldest | most voted
wpDiscuz

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!