Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials

Javascript Statusbar Tips:
 
Default status changing message Flashing text Typing text
scrolling text Type in & Scrollout Link description Hide status message

Statusbar is the bar at the bottom of your browser window. JavaScript programs can be used to write messages to the statusbar.


Default status
Do you want to put a message in the status bar on your page. For example a greeting text as the default message. The following example for writing a default message on the status bar.

Copy and paste the following javascript.
<html>
<SCRIPT>window.defaultStatus="This is a default status message."</SCRIPT>

<body>

This is an example for default status. Look at the statusbar</body>

<html>

Top




Javascript: Changing message on status bar
You can display different messages in the status bar on your page. For example when you have a special sale, you can display the changing messages in the status bar. The following example for showing changing messages on the status bar.

<SCRIPT LANGUAGE="JavaScript">
<!--

CurrentMessage = 0;

var msg=Array("Welcome to webgimmicks.com","More useful javascript examples available here...",

"Enjoy your visit....")

function MessageFlipper() {
  if (CurrentMessage <msg.length) {

   defaultStatus = MSG[CurrentMessage];

   CurrentMessage++;

  } else {

     CurrentMessage = 0;

  }

  //Schedule the next message every 3 seconds
 setTimeout("MessageFlipper();", 3000);

 }

// -->
</SCRIPT>

<body onLoad="setTimeout('MessageFlipper()')">

This is an example for changing message on statusbar. Messages will change every 3 seconds ...

</body>

Top




Javascript: Flashing text on status bar
Lean how to show a flashing text / blinking text on status bar using javascript. The following is an example for flashing / blinking text on statusbar.

<head>
<script language="JavaScript">

<!--

var Message = "This is an example for flashing text.....";
var DisplayStatus = 0;

function StartFlashing()

{

  if (DisplayStatus == 0)

    {

      window.status=Message;

      DisplayStatus=1;

    }

  else

    {

      window.status="";

      DisplayStatus=0;

    }

  setTimeout("StartFlashing()",150);

}

// -->

</script>

</head>

<body onload="StartFlashing()">

See the flashing text on statusbar ....

</body>

Top



Jvascript: Typing text (Typewriter) on status bar


Another status bar script is typewriter style ( typing text)on status bar . This status bar javascript is very easy to install, Copy and paste the following following  code for typing text on the status bar.

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

CurrentText=""
var CurrentPosition=0;

MsgArraynum=0;

var MsgArray=Array("This is an example for 'typing' text on status bar.....","More useful

javascript examples  are available in this site ...","Enjoy your visit here..... ")

function StartTyping() {
      CurrentText    = CurrentText + MsgArray[MsgArraynum].charAt(CurrentPosition)

      status = CurrentText

 

if (CurrentPosition >= MsgArray[MsgArraynum].length) {

  CurrentText   = ""

     CurrentPosition=0

if (MsgArraynum<MsgArray.length-1){

      MsgArraynum++ }

else {MsgArraynum=0 }

 window.setTimeout("StartTyping()",100);

} else {

CurrentPosition++;

window.setTimeout("StartTyping()",100);

   }

 }

// End -->
</SCRIPT>

</head>

<BODY onLoad="StartTyping()">

Check the status bar ... You should be seeing 'typing' text...

</body>

     Top



Javascript : Scrolling text on  the statusbar
Another status bar script is scrolling text on status bar . This status bar javascript is very easy to install, Copy and paste the following following  code for scrolling text on the status bar.

Copy and try the following code for creating scrolling message on status bar.

<HTML>
<head>

<script language="Javascript">

<!--
var CurrentMsg = "Welcome To webgimmicks.com.. This is an example for scrolling message....   Try

other examples in this site also...    Enjoy your visit !!";

var CurrentPosition = 0;
function MessageScroll() {

   status = CurrentMsg.substring(CurrentPosition, CurrentMsg.length)  + CurrentMsg.substring(0,

CurrentPosition);
   CurrentPosition++;

   if (CurrentPosition > CurrentMsg.length) CurrentPosition = 0;

// set timeout for next update

   window.setTimeout("MessageScroll()",100);

}

// Start the scrolling message

MessageScroll();

// -->

</script>

</head>

Check the status bar ... You should be seeing a scrolling message

</html>

 

Top



Javascript: Type And Scroll  Text in Status Bar 
Here we are going to combine the two text effects together.

Source Code:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">

CurrentText=""
var CurrentPosition=0;

MsgIndex=0;

var msgarray=Array("Watch this message .... It willl start scrolling later","This is 2nd

message","This is 3rd message","This is 4th message")
function StartTyping() {

      CurrentText    = CurrentText + msgarray[MsgIndex].charAt(CurrentPosition)

      status = CurrentText

if (CurrentPosition >= msgarray[MsgIndex]Length) {
CurrentPosition=1;

window.setTimeout("StartScrolling()",80);

} else {

CurrentPosition++;

window.setTimeout("StartTyping()",10);

   }

}

function StartScrolling() {

window.status=msgarray[MsgIndex].substring(CurrentPosition, msgarray[MsgIndex].length);

if (CurrentPosition >= msgarray[MsgIndex].length) {

CurrentPosition=0;

CurrentText=""

if (MsgIndex < msgarray.length-1)

MsgIndex++

else{MsgIndex=0}

window.setTimeout("StartTyping()", 10);

} else {

CurrentPosition++;

window.setTimeout("StartScrolling()", 80);

   }

}

// End -->

</SCRIPT>

</head>

<BODY onLoad="StartTyping()">

</body>

 

Top



Javascript: Write a link note on the statusbar

Normally when the mouse is over a link the browser displays the URL of the link in the statusbar. Instead we can write a javascript program to show a link message when the mouse is over the link.This simple javascript gives a description of your links on mouseover which appears in the status bar of the visitors browser.

Eg: If you pass mouse over the following  link, you should be seeing a message in the status bar:
hotmail.com

Copy and paste the following javascript code for showing link description on status bar:

<html>
<head>

<script language="JavaScript">

<!-- hide

function DisplayMessage(text) {
   showmsg = false;

   window.status = text;

}

// -->

</script>

</head>

<body bordor=0 >

<a href="http://www.hotmail.com" onMouseOver="DisplayMessage('Free email service from hotmail.com');return true;">Hotmail.com</a>

</body>
</html>

 


You can apply this link description rollover script to as many links on the webpage that you desire.

  Top








Page contents: itechies.net - Learn how to write messages to the statusbar,link description on status bar,Type And Scroll Text in Status Bar , Flashing text in status bar, scrolling text in status bar, ,link description on status bar using javascript.
javascript tutorial
javascript book
Buy this book