PDA

View Full Version : Changing Text after X seconds (text banner ad)


kirby
03-29-2005, 04:15 AM
How do I make the text in a cell change after a specified amount of time?

ranjan
03-29-2005, 06:59 PM
Javascript is one of the ways...

Briefly this is how it is done

Make an arrayof the changing text like this

var textRotation = new Array(3); //3 is the number of elements in the array
textRotation[0] = "this is my first banner";
textRotation[1] = "this is my second";
textRotation[2] = "this is thrid";

You can add more elements to the array by changing the above.

Now we need to let our script know the number of elements in this array

var counter = textRotation.length;

Our array count starts at 0 and ends at 1 less than the number of elements in the array.
In the example above array is from 0 to 2(1 less than 3 total elements in the array)
A random Number can be generated between 0 and 2 like this

counter--; // reduce the count by 1

var randomNumber = Math.round(Math.random()*counter);

Now create the HTML for banner

var randomBanner = "

" + textRotation[randomNumber] + "</p>";

Macromedia has provided us with certain prebuilt functions, one such is findObj. the function finds an HTML object. Lets say we have a table cell or a div layer where the text banner will be displayed and its id is "textBanner". To find this element we simply say

var el = findObj("textbanner");

To insert our Banner HTML in this

el.innerHTML = randomBanner;

Wrap all of the above code in a function called textRotator()

Lastly to make the script loop in a timer, we call the function itself. The line below becomes the last line of your function textRotator

setTimeout('textRotator();',5000);//5 secs

From your snippets panel insert the findObj function

Snippets >> Javascripts >> Readable MM functions >> Find Object

Now we need to call our function textRotator when the document loads, you can do it either by

window.onload = textRotator; //within script tags

or in your body tag

<body onLoad="textRotator()">

Finally you should have a table cell or div with ID textbanner in your HTML

<td id="textbanner"></td>

Notes:

1. You can create links to the above banners by holding the links in another array.
2. You can create HTML for images by storing the image srcs in the arrayand you have a random image rotator.
3. Dreamweaver inserts a function called MM_findObj many a times, if you already have this function in your document, findObj from the snippet panel is just a duplicate of this function, use MM_findObj instead of findObj

As you can see once you know the basics you can create random anything scripts!

Finally the whole code is



function findObj(theObj, theDoc)
{
var p, i, foundObj;

if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);

return foundObj;
}
function textRotator() {
var textRotation = new Array(2); //2 is the number of elements in the array
textRotation[0] = "this is my first banner";
textRotation[1] = "this is my second";

var counter = textRotation.length;
counter--;
var randomNumber = Math.round(Math.random()*counter);
var randomBanner = "<p>" + textRotation[randomNumber] + "</p>";
var el = findObj("textbanner");
el.innerHTML = randomBanner;
setTimeout('textRotator();',5000);
}
window.onload = textRotator;

ranjan
03-29-2005, 07:03 PM
Note To Admins:

If you would like like to add this post above as a tutorial i do not mind

domedia
03-29-2005, 07:25 PM
Ranjan, it is highly appreciated - and accepted! :)
I'll replace your post with a link to the article once it's up.

ranjan
03-29-2005, 10:07 PM
A variation of the above script with fade effects

http://ranjan.ws/banner.htm ('http://ranjan.ws/banner.htm')