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

Comments

  1. says

    hello, i try, but dont work…
    i have a website (blog wordpress), movie site, i need add “ad rotate”.

    sorry for my english

    look this code:

    //i paste this on sidebar, after add file call “ad.php” with id “ad160x600″… dont work

    this work in a website, but i dont see the original file “url_ad” (the source code), website like a yahoo implemet this, help me please…

    thanks (again)

  2. monica says

    HOW CAN I USE PHP WIDGETY IN A CUSTOM THEME.. I CANT DRAG IT TO THE SIDEBAR SINCE I DONT USE THE DEFAULT THEME

    • says

      Hi Monica, if your theme does’t allow widgets to be added to your sidebars you will need to do a bit of editing to it. It isn’t something I’ve had to do because I use the Suffusion theme which is highly customizable; however, I have found two easy to follow guides for widget enabling WordPress themes:

      It looks easy enough. If you need any help with it I will oblige as best I can :-)

  3. monica says

    I’ve done exactly what u’ve said but I still cant get it – I have 2 banners. When I put this code “<? include(“add-display-code.php”); ?>” in sidebar.php – both the banners appear but below each other – they dont rotate – whats that about

    This is what I’ve done
    Added the first script (the header script) into the Add to Header plugin’s header field.
    Put the CSS and JS files into the root directory of your WordPress installation
    Put the Add Display Code into a file called add-display-code.php and saved it in Wordpress installation’s root directory .
    Addeed “<? include(“add-display-code.php”); ?>”  in sidebar.php
    Pls help

    • says

      Monica, I will be able to offer more help in a couple of hours. I suspect that the Javascript is either not loading or is being interfered with by something else. Just a test here but what happens if you move the header script from Add to Header and put it directly into your template’s header file (between its <head></head> tags)?

      Post your URL and I’ll take a closer look at it for you. I sent you an email about 20 minutes ago so if you don’t want to post the URL publicly just send me it in a reply to that email :-)

    • says

      Monica, it appears as though theory and practice don’t quite blend with this topic. I’ve been looking for a solution and I believe that the fault has something to do with a conflict between the jquery library required for the script and the jquery library used by WordPress. I’ve tried a workaround using an iframe to embed a modified version of add-display-code.php but (even with an iframe embedding widget) the ads fail to load.

      • An example of the script working on a page of its own is available here.
      • An example of it not embedding within WordPress is available here (look at the bottom of the right sidebar).
      • The code for the (should be) embeddable page is here.

      I’ll keep working on it for you – I will get it to work else I will find you an alternative.

      Bootnote One:

      Strangely, it will embed as an <object> within a text widget. For example:

      The embedded page (add-display-code.php) must be stored in the same place as the featuredcontentglider.css and featuredcontentglider.js files.

      Pay attention to <body> tag of the embedded file. It contains an “onLoad” attribute which checks that the page is viewed within an iframe and if it isn’t it redirects the browser to the page it should be loaded within (in the example it loads dersplog.bigbuz.eu). For example:

      A word of caution about <object></object> tags when used in place of iframes, some browsers (like IE6) don’t render them properly.

      Bootnote Two:

      I’ve just noticed that the iFrame sometimes shows and sometimes doesn’t – it might be an issue with my browser, lol.

  4. says

    I have the code in my header.php file. The ads change when I press the left and right keys, but they are not auto rotating. The very first ad just keeps reappearing. odd. I do have true for the autorotate parm.

    • says

      Hi David,

      I suspect the script doesn’t work because of the auto refresh meta tag you’ve placed in your header. It isn’t required for the script to work, I would remove it:

      <meta HTTP-EQUIV="REFRESH" CONTENT="5"></meta>

      The ads rotate when you press the arrow keys because the script is designed for viewing images such as in a gallery. The edits I’ve made to the CSS and HTML hide the back and forward controls.

      Also, meta tags are self closing (like image tags <img /> and line break tags <br /> (space intended)). So your meta tags can be written (using the one above as an example) like this:

      <meta HTTP-EQUIV="REFRESH" CONTENT="5" />

      Notice the forward slash toward its end and that the final </meta> is absent.

      :-)

    • says

      That was it…. Thanks so much. The refresh was left over from another rotation solution I tried. Working perfect now.

  5. says

    I am trying to rotate ad banners. Some are html and some are javascript links.
    The test page will show only the first ad. What am I missing?
    Also the banner seems to be right justified instead of centered.
    I’m pretty green with javascript…..

    • says

      Hi Stan,

      The ads on your test page seem to rotate just fine when viewed by me (with Firefox 3.6.3, Linux 64-bit). So I assume you’ve resolved the issue you had, if not try cleaning your browser cache before reloading the page.

      You can adjust the position of the banner in one of two ways:

      • Put it in a <div> box and specify “margin: 0 auto;” in its CSS; else (easier)
      • Edit the CSS of the featuredcontentglider.css file.

      To change the featuredcontentglider.css file, replace

      With

      Note: I’ve taken the CSS from your site to demonstrate the edits

      All I’ve done is remove “float: right;” and altered “margin-right: 50px;” to “margin-right: auto;”

      Stan, always specify units in your CSS or your pages won’t display properly. Th exception is the null value (0) which can be written without a unit type. A good (easy to follow) guide to CSS and HTML is HTML Dog and a good CSS and HTML reference site is Cookwood.

      Come back and a post a link to your website when you’ve got it running :-)

  6. Twri Rick says

    Hello!  great script.  I have one question: How can I do multiple ad spots on the same page?  Right now, in copying your script 4 times, I get all four spots working, but they loads the first set of ads int eh first spot first, then the second, then third, etc.  I am missing something obvious, but not sure what–any ideas?  You can see the current script and results at http://www.riograndeguardian.com/election2012/

    • says

      Hello Rick, I’ve still not had time to look at this yet. Have been busy with clients but I will look at it soon. I suspect you will need 4 instances f he script, and for you to change the name of the variables within each script so they do not interfere with each other.

  7. says

    No sure if this page is still supported but how can i have the ads changed on page refresh instead of auto rotate after x seconds since it’s against the tos/terms of most adnetworks.

    Thnx, great script and tutorial :)

Leave a Reply