Multiple Messages Typing Live

[Total: 0    Average: 0/5]

This uses a construct to define the operations and store the data for one message

Head Code:

<script>
/*
 * JS-X.com
 * This uses a construct to define the operations and store the data for one message
 * Just create multiple variables for each new message.
 * Rules:
 * - You must define the DIV with the ID for each message
 * - You must pass the name of this ID to the variable
 * - You must pass the name of the variable in the creation of the object/class
 */

var MESSAGE_CLASS = function(_var)
{
  /* set these defaults if you want */
  this.message="Message Not Defined";
  this.baseColor="#888800";
  this.textColor="#000000";
  this.bgColor  ="#DDEEFF";
  this.blinkRate=100; /* msecs */
  this.font="Arial"; /* font family */
  this.size="12px"; /* font size */
  this.skipSpaces=true;

  /* FROB below at own risk */
  this.n=0; /* dont mess with this - used for counting */
  this.objectID=null; /* if not set, this will not do anything */
  this.OBJ=null;
  this.myTimer=null;
  this.variable=_var;

  this.setID       =function(_i){this.objectID=_i;}
  this.setMessage  =function(_m){this.message=_m;}
  this.setBaseColor=function(_c){this.baseColor=_c;}
  this.setTextColor=function(_c){this.textColor=_c;}
  this.setBGColor  =function(_c){this.bgColor=_c;}
  this.setBlink    =function(_r){this.blinkRate=_r;}
  this.setFont     =function(_f){this.font=_f;}
  this.setSize     =function(_s){this.size=_s;}
  this.setSkip     =function(_s){this.skipSpaces=_s;}


  this.update=function()
  {
    var temp1,temp2;
    var temp3=0;
    temp1=this.message.split("");
    temp2=temp1[this.n];
    if(this.skipSpaces)
    {
      while(temp2==" ")
      {
	if(++temp3>this.message.length)
	{
	  this.skipSpaces=false; /* all spaces in string - turn this off */
	}
	/* found a space - move past it */
        if(++this.n>=this.message.length)this.n=0;
        temp1=this.message.split("");
        temp2=temp1[this.n];
      }
    }
    var x=this.message.substr(0,this.n);
    if(this.n<this.message.length)
    {
      x+="<span style='color:"+this.textColor+"'>"+temp2+"</span>";
    }
    x+=this.message.substr(this.n+1,this.message.length);
    this.OBJ.innerHTML=x;
    if(++this.n>=this.message.length)this.n=0;
  }
  this.stop=function(){if(this.myTimer){clearInterval(this.myTimer);this.myTimer=null;}}
  this.start=function()
  {
    this.stop();
    this.OBJ=document.getElementById(this.objectID);
    if(!this.variable)
    {
      alert("ERROR: You didn't pass the name of the variable to the class new()");
      return;
    }
    if(!this.OBJ) /* wrong set up - just abort */
    {
      this.myTimer=setInterval(this.variable+".start()",this.blinkRate);
      //alert("ERROR: ID ""+this.objectID+"" not defined.");
      return; /* just return - maybe as the page loads the object will get defined... */
    }
    this.OBJ.style.color=this.baseColor;
    this.OBJ.style.fontSize=this.size;
    this.OBJ.style.fontFamily=this.font;
    this.OBJ.style.backgroundColor=this.bgColor;
    this.OBJ.innerHTML=this.message;
    this.myTimer=setInterval(this.variable+".update()",this.blinkRate);
  }
}


var msg1 = new MESSAGE_CLASS("msg1");
msg1.setID("message1");
msg1.setMessage("This is my first special message about cool stuff.");
msg1.start();
/* set any other attributes you want to */




var msg2 = new MESSAGE_CLASS("msg2");
msg2.setID("message2");
msg2.setMessage("I have a second message here.");
msg2.setBaseColor("#808080");
msg2.setTextColor("#00F0F0");
msg2.setBGColor("#AAAAAA");
msg2.setBlink(100);
msg2.setFont("Courier");
msg2.setSize("20px");
msg2.setID("message2");
msg2.setSkip(true);
msg2.start();
</script>

Body Code:

<div id=message1>-Message1 Until Script Starts-</div>
<div id=message2>-Message2 Until Script Starts-</div>

Times Viewed: 3

Leave a Reply

Your email address will not be published. Required fields are marked *