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

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

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

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

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

<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.

  Copyright secured by Digiprove © 2010

Huge Text File, Need to Extract Specific Lines? Here’s How

If like me, you have to manipulate huge text files containing thousands of lines of data and you hate trawling through them manually, slowly, one-by-one, line-by-line then boy do I have a few tricks to teach you.

These tricks of mass manipulation of text files will turn your week long, heart-wrenching job into a 5 minute heart-lifting pleasure bordering on the orgasmic [just trying to liven things-up].

I used to export and paste my text files into an Open Office spreadsheet then sort them before cutting and pasting. Doing so used to cut in half the time taken to edit my text files. I even pseudo-shuffled lines of data by typing letters of the alphabet beside each data line then sorting them into groups of like letters (e.g alla’s together, all b’s together…). They were the Dark Years (o.k Weeks ;-) but I’m allowed ) to tell my tale my way; and if I want to make people feel sorry for us lonely, depressed webmasters then I will. I’m glad those days are over.

I like to get things done as quickly as possible. I don’t like to dawdle. A trait that has put me out of really good jobs and embarrassed others at the same time: I’ve built spreadsheets and devised processes that convert week-long jobs into 2 hour, Monday morning tasks; who needs an extra employee once he’s killed his job position :-? But that didn’t bother me. Progress and evolution, onwards and upwards; they are mymottos.

Boost Your Web Traffic

Website traffic takes two forms: targeted and sporadic. Sporadic traffic comes from social bookmarking sites. Targeted traffic comes organically through banner advertisement, text links, search engines, off-line advertisement and chatter. Which form of traffic do you think is best? Targeted traffic is good, sporadic traffic can be good. People who use social bookmarking sites like … Read more

A Little Bit of Linux Sanity

I’ve been using Linux for several years. My distro of choice is Kubuntu, the KDE environment version of Ubuntu. My relationship with Linux has had many good times and all the fun of the occasional arguments that beset all happy couples.  Yes, I’m a geek and love all things IT and technical; and as a … Read more

Snazz-Up Your Website With Free Graphics and Sound Effects

Seamless Website Pattern Background Designs

Ambiance is the most important part of any website. Your articles could be top notch, your games the best in the world and your photos unique but your visitors will not stay if they’re in the wrong setting. Visitors have expectations, preconceived ideas, of how a website should look, behave and consequently “feel” to their mental sensors: a search engine needs to be kept simple, a forum needs to be clean and easy to navigate, and a fanzine needs to appear like any shop bought magazine. Making your site look great and even giving it a few sound effects when appropriate is all part of any webmaster’s job. Give your visitors a good experience and they’ll tell their friends about you. Give them a bad experience and, well, what did you do the last time you saw a bad website?

Here are a few resources that I’ve found useful. I think you will like them too.

+ More Posts