Alternating Message Text Box

Sandeep Gangadharan May 25, 2007

General

With the help of this script you can put up a text box on your Web page that displays alternating messages for your visitors. It saves space, as a lot of text can be contained in a minimal display area.

Notes

Created by: Sandeep Gangadharan
Web Site: http://sivamdesign.com/scripts/
Posted: May 25, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: altTextBox.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Sandeep Gangadharan | http://sivamdesign.com/scripts/ */
var text = 0;

var message=new Array();
  message[0] = "Welcome to the JavaScript Source!"
  message[1] = "Tons of scripts for your Web pages"
  message[2] = "Why not share your scripts with others?"
  message[3] = "Be sure to come back again ..."

function changeText() {
  if (message.length > 0) {
    document.change.descript.value=message[text];
    text++;
  }
  if (text == 4) {text = 0; }  // change the # 4 at the left to the maximum # of message lines you want included
    window.setTimeout("changeText()", 3500); }  // change the # on the left to adjust the speed of the
                                               // scroll. The smaller the # the faster the speed

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  changeText();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

textarea.test {
  width: 350px;
  height: 50;
  border: none;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="altTextBox.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form name="change">
  <textarea class="test" name="descript" wrap="virtual"></textarea>
</form>

Leave a Response

(11 comments)

It's just a simple matter of changing the array statements:[br /][br /] message[0] = "New message here"[br /][br /]Just change the array number ("[0]" for each one, as shown in the script.[br /][br /]Otherwise, there are comments in the script that give explanations.

Lee Dec 4, 2007

How about you, if possible, add comments in the external .js file showing how to use the file (changing the text to what you want to say) and things like that.

Andrew LeDawson Nov 25, 2007

very net and smoothy, this is best tab script among all i have searched for. allow me to copy it , :), thx.

G Liu Nov 19, 2007

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Nov 7, 2007

I am only getting a multine-line text area that has a vertical scroll bar. What could be wrong?

claudia Oct 26, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details