More Special Effects

 

Flying Text

Text can be given the appearance of flying by using CSS positioning. The first example will fly the text to the right only. Step one is to define the text, uniquely identify it and give it some initial position. The text is contained in a div element with some inline css style. Inline style is used as the position can only be set on an element by element basis. It is placed in the body of the document. For example:

<div id="flyer" style="position:absolute;left:0px;top:10px">
Sic Semper Noninferi . . .</div>

An alternative to inline style is to use a css style element with an id selector:

#flyer {position:absolute;left:0px;top:10px}

The move() function sets the position of the div element using its style.left property. Note the addition of "px". This is very important for correct functioning in some browsers. If the text hasn't reached the right edge, it increments the position. Finally a delay to allow reading the message is built in by using the setTimeout() method. Without the delay the text would blur across the screen. The JavaScript code is placed in the head section of the document.

spot=0; // global state memory for position
function move() {
styleObj=document.getElementById('flyer').style;
if (spot < 500) { // check if at right stop point
  spot+=2; // no - so move over a bit
  styleObj.left=spot + "px"; // redisplay at new site
  setTimeout(move,50); // but first wait 50 milliseconds
  }
}

To start the flying on page load, add an onLoad event attribute to the body element. For example;

<body onload="move();">

    Try it

A simple modification to this routine would be to add parameters for the stop, increment, and delay settings. This would make the function much more flexible for reuse.

Another modification would be to add vertical motion with the .top style property. How about moving the other way with negative values for the steps (don't forget to set initial and final positions and invert the check method). And instead of simply stopping when you reach the limit you may want to repeat the movement. Repetition can be done by adding an else component to the decision to increment. Some of these features have been implemented in the following script:

spot=0; // global state memory for position
times=0; // keep track of repetitions;
function move() {
styleObj=document.getElementById('flyer').style;
if (spot < 500) { // check if at right stop point
  spot+=2; // no - so move over a bit
  styleObj.left=spot + "px"; // redisplay at new site
  styleObj.top=spot + "px";
  setTimeout(move,50); // but first wait 50 milliseconds
 }
else {
  if (times < 2) times++;
  else return;
  spot = 0;
  setTimeout(move,50);
 }
}

    Try it

For an 'Over The Top' application you could add a routine to randomly pick both the horizontal and vertical increments. And then once an edge is hit, reverse that direction. How about correct angle of bounce off the wall. Lots of ideas here for those who want to explore animation. See what you can do with dynamic text movement.

News Scrollers

Many sites now include a news scroller with important or fresh information. The usual way of adding a scroller is with animated gifs. But a JavaScript news Scroller will allow you to stop the scrolling by hovering on the newsbox. Go ahead, try hovering over the newsbox. This gives you time to read the text. To use the news Scroller as seen here, you will need to copy the news Scroller script. The script is enclosed in comments, // News Scroller and // End News Scroller, in this document's head section. Copy it and make it your own with a bit of hand tuning. Be sure to include the style rules for .scroll and .newsbox that are also in this document's head section. Then add the following div element where the newsbox is to appear:

<div class="newsbox"><script type="text/javascript">
c=new scrollerObj('c','135','100','200','100',p6,'ffdd00','cccccc','3','left')
</script></div>

The parameters represent the boxName, boxHeight, boxWidth, contentHeight, contentWidth, content, boxColor, textColor, speed and initial FloatPosition.

Scrolling Marquees

Marquees or scrolling banners are used to draw the reader's attention to important information such as a new product release. The HTML marquee tag has been superceded by dynamic marquees using JavaScript data manipulation. One algorithm that is easy to implement is to rebuild the message to be displayed by dropping the first letter and adding one to the end, then redisplaying the message after a short delay. The first rather simple example uses the status bar for display. It could be autostarted with the onLoad event but then it should also be timed out instead of continuously running. Remember that the status line has some very important uses and should not be captured forever by a JavaScript function.

mmsg=" -- See you all at the Chicago Flower Show";
counter=(mmsg.length+1)*2; rate=9;
function scrollMsg(){
 if (counter>0){
    window.status=mmsg;
    mmsg=mmsg.substring(1,mmsg.length)+mmsg.substring(0,1);
    setTimeout(scrollMsg,1000/rate);counter -=1;}
}

The example is terminated by counting the letters and stopping after two passes through. You can change the number of passes by changing the multiplier on the counter variable. Another refinement would be to start with no message at the start. I chose to present the whole message first to remove the drama ;-]

An improved version starts with a blank marquee and runs continuously. Output is to a textarea form element to show some display variations that are allowed with JavaScript. You can use style to hide or change the look of the textarea if you wish.

text="Warning: Dates in calendar are closer than they appear. ";
len=text.length;// total chars in status line
msg=""; // build blank message for clean start
for (i=0;i<=len;i++){msg+=" ";}
pos=0; // pointer into text array
speed=9; // adjust scrolling speed here
function scroll(){
  msg=msg.substring(1,len)+text.charAt(pos);
  // slides window over and adds one char from text message
  document.getElementById('scrollText').value=msg;
  if (pos++===text.length){pos=0;}
  // returns to front of message for next go around
  setTimeout(scroll,1000/speed);
}

Validations

There are many types of common validations that you should be ready to do. Most involve freeform controls. These checks include:

However do not make any false assumptions in what the entry will be. Some common validation mistakes seen on entry forms are:

Validating On A By Entry Basis

Many forms are best validated on a by entry basis. The onchange event can call a function to validate the contents of an entry box when you move off the entry box and that entry has changed. Another event that can be used is the onblur event which occurs whenever an element loses focus. The entry can be checked when you click on a new entry field or another spot in your window or use the tab key to move off the entry. The next example brings up an alert dialog if the correct word is not entered.

Input the word STOP in the following entry box:
Then click somewhere outside of the box to test!		 
<table><tr><td>
Input the word STOP in the following entry box:<br>
Then click somewhere outside of the box to test!</td><td>
<input id="inp1" type="text" value="" onclick="return false;"
          onblur="validStr('inp1','STOP');return true;">
</td></tr></table>

And here is the JavaScript checking routine. Note that the validation is case sensitive. The onclick event suppresses other key clicks.

function validStr(id,expectedval){
   inputval=document.getElementById(id).value;
   if(inputval!=expectedval){
      alert('You must enter the word '+expectedval);
   }
   else alert('Nice one!');
}

Validating Numeric Data

Numeric input must also be verified before continuing. JavaScript's built-in function Number() and internal methods (such as isNaN(), parseInt(), parseFloat(), etc.) work well for validating decimal based numbers. However they are incomplete for other radix systems and you will have to gather together your own set of functions to paste into projects.

The following is an example of a hexadecimal entry checker. This code can be reused in many validation situations with suitable changes to the characters allowed and perhaps a length control (fixed or maximum). The steps are:

  1. Make sure there is something to check!
  2. Since uppercase letters are more common, be sure to uppercase the string.
    Or you could include both cases in the character scan.
  3. Do a simple character by character check for valid characters.

In this test invalid or null hexadecimal string will display an error message and return a false value. If the whole string passes the check an ok! message is displayed and a true value is returned. Often these validating functions are written without display messages, leaving it up to the calling function. One last variation is to accept a second parameter which represents whether a message is to be displayed.

function isHex(entry){
validChar='0123456789ABCDEF'; // characters allowed in hex
strlen=entry.length;   // how long is test string
if(strlen<1){alert('Enter Something!');return false;}
entry=entry.toUpperCase();   // lowercase characters?
// Now scan string for illegal characters
for (i=0;i<strlen;i++){
    if(validChar.indexOf(entry.charAt(i))<0){
      alert('Entry must be in hexadecimal format!');return false;}
    } // end scan loop
alert('ok!');return true;
}
Hexcode String Test  

Once you know for sure that a variable is a number, then you can use the Math object methods parseInt() and parseFloat() to make them into the appropriate type if required. Using parseInt() and parseFloat() by themselves may cause unexpected problems as they can truncate some nonnumeric strings and yield a number as an answer (eg. 1st.). isNaN() is a function to test for numbers but it is limited to decimal values only.