LOCAL TIME:
mailto:KZG



Script, that makes any text "waving" by html font size manipulation.
A so-called "roller coaster" script is available all over the net, the effect may be static or moving. Common of them is a changing font-size fromm letter to letter, increasing-decreasing, and so on. The result is a "waving-line" text effect. This WaveText Wizard has got the idea of them, of course, but has increased functionality.
As commonly known, a wave is always has wavelength, amplitude, and speed. These properties may be set, even change on-the fly here. This script defines a javascript class, therefore a safe multipart wave-show is granted on the same site. As beeing a class, you don't need to copy the whole stuff to every page you are to make shaking, enough to keep the location of the software in the <HEAD> section. Here you'll be able to design your moving text effect, and granted freely use that, wherever you want. Had no idea at a glance? Visit the free wave-effect gallery now.
Abstract: A "good looking" wave is usually a transformed sinus wave. The wavelength (or period) and amplitude are measured in characters here, thus there is no need for the exact values of the sin(x) function, nor for Pi. A simple, almost linear approximation gives a good sinus-like feeling. An amplitude of a wave is the vertical distance between the lowest and highest part of the zigzag. Amplitude is determined here by the various height of letters. The fontsize of each letter defined in html tags is an integer number, the value must be from 1 to 7. The scope of this work is the usual html FONT tag, not the css style.fontSize The period, or wavelength is counted in characters here too, and defines, how many letters should be displayed periodically with changing height in the given font size range. Besides, in order to keep the original text readable, it is advisable to define a minimum length of straight text with the highest and/or the smallest letters. These special lengths of straight string lines can also be given in count of characters here. Sign of displayed string length determines the wave direction, negative value means wave from left to right. The value -1 or zero means that displayed string is the whole text. If smaller, produces a waving and scrolling text effect. A "delay time" bellow is given in milliseconds, decrease in this value results higher speed. A value smaller than 10 produces a static wave-line, as the above example.
That's all you must know about dull maths. See in practice, press the green "Try it!" button:
 Fizetős hirdetések (x) 
Instructions: There are 3 easy steps.
No.1.  Locate javascript code. Insert the line below into the <HEAD> section of your page:
<script type="text/javascript" language="JavaScript" src="http://www.java.xc.hu/WaveText-javascript.html"></script>
No.2.  Paste or type your text here, that requires special attention. Set html tag, then grab your html code bellow your input text.
Choose a html tag:
Your html code is: < id="valami"> </>
Note: Some of the various appearence of the chosen tag is a site-specific font-style side-effect, (e.g. <A>) done by css. It is not discussed here.
Preview:
Submit to Net Wave Gallery submissions are logged, gallery opens soon
In order to display this wave-effect on your site, you have to include the location of this script (see:1), insert the appropriate html tag (see:2) and trigger the event with some code (see:3.e.g.) The same, or any other part of your page can trigger to start waving the choosen text with the aid of a javascript event, e.g. onmouseover, or onclick.
There are 3 equivalent formulas of identifying the desired text object, recommended is the first one.
Fontsize min.:  max.:
Wave Length in characters:
Smallest strlen: high:
Displayed string length:
Delay time in milliseconds :
No.3.  Customize parameters, copy the appropriate event code bellow, then paste it into your code:
e.g. onclick="kzgWave.Start('valami');" easy: copy and paste inside of any clickable html tag of yours
var obj=document.getElementById('valami');kzgWave.Start(obj); first parameter is given as an object: designed for to fit into any other application
kzgWave.Start('span',5); this call: a html tag name and index is site-specific, won't work elsewhere

Advanced: Here are some customizable additional parameters:
kzgWave.TEXT = If given, this alternative message appears instead of the original content. Use when your text has lots of spaces.
kzgWave.IsOn() This function returns true if waving is on, else returns false.
kzgWave.ID() Returns the temporary internal ID of the actually waved html tag. If there is not any, returns an empty string.
kzgWave.Stop() Halt waving, restore original values
hacking offer: Displays pure html code of the preview section. Works while waving, too. Suitable for debugging any html code.
var obj=document.getElementById(kzgWave.ID())
var Letter=obj.childNodes.item(0) 		Identification of actually waved object
An example for accessing the first letter of the rolled text as an object

Notes:
1. If you decide to use this sript, don't forget to support stopping it by a "kzgWave.Stop()" call. Visitors may find confusing lingering wave effects.
2. Setting the highest and lowest font sizes to the same value results no waves, but timing event remains active.
3. Displayed string length can be both negative or positive. Length = 0 or -1 means whole text. Either if abandoned, or positive sign means wave (big letter's moving)
    from right to left, negative is the opposite. To understand, try to set the smallest string length value with approximately three times more than the value of highest.
3. By setting delay-time less then 10 milliseconds, waving would pause
5. Any change in the generated temporary ID triggers an internal stopWave() call.
6. If you desire to produce more then one sneaky string on your site, define yourself another variable than kzgWave as "new kzgWaveTextClass()"
7. The wave-effect gallery was created for demonstrative purpose. Some of the examples were hopefully would design(ed) by anonym visitors.

Code:
Recommended way is to keep a link in your <HEAD> section of your page, as shown above.
If you dislike to stay in contact with a foreign web address, the whole stuff is bellow this line: 
<script type="text/javascript"><!--

/** WaveText © KZG from here **/
function kzgWaveTextClass(){
/* ACTIVATION: onanyevent="ClassName.Start ( [ whichone = 'body' [, parmlist ]] )"
 parmlist = [tagIndex=0 [,lowHeight=1 [,topHeight=7 [,waveLength=16
                        [,smallStr=3 [,highStr=3 [,dispLength=0 [,delayTime=250 ] ]]]]]]]
 whichone = 0 | null | html_Tag_Name | html_ID_name | html_DOM_object
 Note: if the first parameter is 0 or null, global parameters are changed "on the fly", Start returns true.
 Start returns false, if whichone can not be identified.
 'tagIndex' is effective only, if 'whichone' represents a html tag name
 dispLength = 0 or -1 means whole text, sign determines wave direction
    (either if abandoned) positive sign means wave from right to left, negative is the opposite
 delayTime is given in milliseconds, decrease in this value results higher speed
 delayTime < 10 means no move: text appears with variant fonts only once
 example: <TD onmouseover="WaveInstall(this)" >
 
                      default ClassName is kzgWave
*/

this.Start = WaveInstall;
this.Stop  = stopWave ;
this.IsOn  = isRolling;
this.ID    = getUniqueID;
this.TEXT  = "";
this.MSG   = getLastMsg;
////////////////////////////////
// don't change bellow this line
/*
    Copyright (©) 2007 KZG

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 2 of the License, or
    any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see http://www.gnu.org/licenses

    Please, don't contact me by electronic mail. Instead, use the link bellow:
    mailto:KZG

    Thanks for every external links, if given. Please use as here:
    WaveText © KZG

*/

this.javaTimerLoop = javaTimerLoop;
var CurrProcName=this;

var lowSize=1
var topSize=7   //Note: The fontsize parameter must be a number from 1 to 7.
var lowHeight=1
var topHeight=7

var waveLength=16
var smallStr=3
var highStr=3
var dispLength=0;
var prevLength=0;

var delayTime=150;
var delayStop=9;

var tagNumber;
var whichTag="";

var WaveEvent=0;
var waveTimeout;

var WaveStart=0;
var wavePeriod;
var chrCount;
var waveStr;
var mtxMask;
var waveMtx=new Array(0);
var WaveD;
var textStart;

var rollerText="";
var origiText="";
var origi_ID_;

var prev_Obj,prev_IX,prevLetterSP;
 
var obj,uniqueID="";

var mtx7 = new Array (0.2468, 0.1123, 0.0953, 0.0912, 0.0953, 0.1123, 0.2468)
var mtx6 = new Array (0.2678, 0.1240, 0.1083, 0.1082, 0.1240, 0.2678)
var mtx5 = new Array (0.2952, 0.1407, 0.1282, 0.1407, 0.2952)
var mtx4 = new Array (0.3333, 0.1667, 0.1667, 0.3333)
var mtx3 = new Array (0.3918, 0.2165, 0.3918)
var mtx2 = new Array (0.5,    0.5)
var mtx1 = new Array; mtx1[0] = 1
var sinMtx = new Array (mtx1 ,mtx2 ,mtx3 ,mtx4 ,mtx5 ,mtx6 ,mtx7)
var fsMtx = new Array ("xx-small", "x-small", "small", "medium", "large",  "x-large", "xx-large")

var tagMtx= new Array("A","ADDRESS","B","BIG","CAPTION","CENTER","CITE","CODE","DD","DEL","DFN","DIR",
"DIV","DL","DT","EM","FONT","H1","H2","H3","H4","H5","H6","I","INS","KBD","P","Q","PRE",
"S","SAMP","SMALL","SPAN","STRIKE","STRONG","SUB","SUP","TD","TH","TT","U","VAR");

function getUniqueID()
{return uniqueID;};

function getLastMsg()
{return String(rollerText)};

function getArg ( Z , varName)
{ var x = varName; if (! isNaN(parseInt(Z)) ) {x = Math.abs(parseInt(Z)) }; return x; };

function WaveInstall(htmlTagName,occurr,lH,tH,wL,lS,tS,dL,tI){
var i,x,n;

lowHeight = getArg( lH ,lowHeight ); topHeight = getArg( tH, topHeight );
waveLength = getArg(wL, waveLength); smallStr = getArg( lS, smallStr); highStr = getArg( tS, highStr);
if (! isNaN(parseInt(dL)) ) { dispLength = parseInt(dL) }; delayTime = getArg( tI, delayTime);  


 if (( htmlTagName != null) && ( htmlTagName != 0 )) {
 if (( prev_Obj != htmlTagName ) || ( prev_IX != occurr ))
 { this.Stop ()}; prev_Obj = htmlTagName ; prev_IX = occurr; };

if ((WaveEvent == null )||(WaveEvent == 0 )){WaveEvent = 0 } ;
if ((WaveEvent == 1) || ( htmlTagName == null) || ( htmlTagName == 0 ) ) { return true ; };


if ( (origiText.length == 0 ) && (WaveEvent == 0 ) ) {

tagNumber =0; tagNumber = getArg(occurr,0); obj = null;
 if (htmlTagName == null ) {whichTag="body"; htmlTagName=whichTag;} else { whichTag=htmlTagName };

//////////// whichTag[tagNumber] ////////////////
// try if whichTag were an object
if (whichTag.nodeName != null) { obj = whichTag }
else { x=document.getElementById(whichTag)
// try if as whichTag were an ID
if ( x != null ) {obj = x}
else { x=document.getElementsByTagName(whichTag) ;
// try if as whichTag were a tagname
if ((tagNumber < x.length ) && ( tagNumber >= 0 ) && ( x.length > 0 )) {obj = x[tagNumber];};
};};

n=0; if ( obj != null ) { x = String(obj.nodeName.toUpperCase()) ; 
for (i=0; i < tagMtx.length ; i++ ) {if (x == tagMtx[i]){n=i+1; };};
if ( n == 0 ) { alert("The container tag: " + x + " can't perform a wave.\n"+
"Choose another from the option list in the website:\nhttp://www.java.xc.hu/WaveText.html"); };};
if  ( n != 0) {
// almost acceptable: obj holds the identified object
 origiText="";  if (obj.childNodes.length == 1) 
 {if (obj.childNodes[0].nodeValue == obj.innerHTML ){origiText=obj.innerHTML;};};

origiText = obj.innerHTML
rollerText = String(this.TEXT); 
if ( rollerText.length == 0 ) { rollerText = String(origiText); };

//Please dont't use html code inside your
//text mode: < > & change tokens to: '<' '>' '&' characters
//html mode: unchanged innerHTML 

 if (rollerText.length ==0 ) {
 alert ("WaveText error:\nString length is zero in your " +   htmlTagName.toUpperCase() + "[" + occurr + "] tag");
 } else {  // html hack here //

 // create uniqueID
uniqueID="WaveID_"; 
while ( ( document.getElementById(uniqueID) != null ) && ( String(uniqueID) != String(rollerText) ))
      { uniqueID += String.fromCharCode( 64+Math.ceil(25*Math.random()) ) };

origi_ID_ = obj.id ; obj.id = uniqueID;

 WaveEvent=1; if (dispLength >= 0) { WaveStart = 1} else {WaveStart = -1 }; textStart=WaveStart; Waved=true;
 prevLetterSP = obj.style.letterSpacing;
 document.getElementById(uniqueID).innerHTML=WaveText(rollerText);
 if (delayTime > delayStop) { CurrProcName.javaTimerLoop();};
 return true;
 }} else { return false ; //alert ("html tag " + whichTag.toUpperCase() + "[" + occurr + "] is undefined here")
			 };
}

}
// initialization ends here


function ltgtChange(str)
{ var strITT = str.replace(/\&/g ,"&").replace(/[<]/gi,"<").replace(/[>]/gi,">");
strITT=strITT.replace(/\n/g,"
"); return strITT };
function amp_Change(str)
{ return str.replace(/\&/g,"&"); };


function WaveHossz()
{return 2*( chrCount - (waveMtx[waveMtx.length-1]+waveMtx[0])/2 ) - waveLength }

function WaveText(str) 
 { var i, x, cPnn, cN, cP, cPc, strObj, currFS
   var wave="";
   var waveFS, waveByte;
   var spN=0;
 if ( topHeight < lowHeight) {x=topHeight;topHeight=lowHeight;lowHeight=x;};
 if ( topHeight >= 7 ) {topHeight=7;};
 if ( lowHeight <= 0 ) {lowHeight=1;};
 if ( lowHeight >= topHeight) { lowHeight = topHeight  };
 if ( waveLength <= 0 ) {waveLength = 16}; 
    
if (( mtxMask != 'k' +  lowHeight + 'z' + topHeight + 'g' +  smallStr + highStr + waveLength ) ||
    (prevLength != dispLength )) { strObj = document.getElementById(uniqueID) ; 

    if ((str == uniqueID) && (strObj != null) && ( strObj.childNodes.length != 0 )) 
    { x = Math.abs(dispLength); cN = Math.abs(prevLength);
    if (( x  == 0 ) || ( dispLength == -1)){  x = rollerText.length };
    if (( cN == 0 ) || ( prevLength == -1)){ cN = rollerText.length };
    for ( i =  x ; i < cN ; i++) {strObj.removeChild(strObj.lastChild)}
    wave=strObj.innerHTML;   for ( i = cN ; i <  x ; i++)               {  wave+='<' + 
    'font  style="font-size: ' + fsMtx[0] + ';" >' + ' ' +  '<' + '/' + 'font>' ; }
    strObj.innerHTML=wave; wave="";                        }; 

chrCount=0; mtxMask = 'k' +  lowHeight + 'z' + topHeight + 'g' +  smallStr + highStr + waveLength;
if ( waveMtx.length > 0 ) {waveMtx.splice(0,waveMtx.length)}; // clear mtx

for (i=0;i < sinMtx[topHeight - lowHeight].length ; i++)
    { x = Math.ceil(0.5*waveLength*(sinMtx[topHeight - lowHeight][i])); 
    waveMtx.push(x); chrCount+=x;  };

while ( (0 < chrCount) && (WaveHossz()>0) )
{ x=0;for (i=0;i < waveMtx.length ; i++){
   if (( waveMtx[Math.abs(x)] >0 ) && (WaveHossz()>0) ){ waveMtx[Math.abs(x)]--;chrCount--; }; 
   x=Math.abs(x)+(i+1-waveMtx.length)*(2*(i%2)-1)
    }; };
 
if (waveMtx.length < 1) {if (highStr > 0) {waveMtx[0]=highStr; chrCount=highStr;};};

if (smallStr>waveMtx[0]) { chrCount = chrCount - waveMtx[0] + smallStr ; waveMtx[0] = smallStr;};
if (highStr > waveMtx[waveMtx.length-1]) 
{ chrCount = chrCount - waveMtx[waveMtx.length-1] + highStr ;  waveMtx[waveMtx.length-1] = highStr ;};

cP=WaveHossz();
if ((cP < 0)&&(waveMtx.length > 2)) { cP=Math.abs(cP); x = Math.floor( cP / (2* waveMtx.length - 2 )) ;
for (i=1; i < waveMtx.length-1;i++) {chrCount+=x;waveMtx[i]+=x;} ; };

cP=WaveHossz() ; if (cP < 0) { cP=Math.abs(cP); x = Math.floor(cP/2) ; 
waveMtx[0] += x ; waveMtx[waveMtx.length-1] += cP - x;  }; //?????

waveStr = 0; for (i=1;i < waveMtx.length -1 ; i++) { waveStr += waveMtx[i]};
if (i==1) {wavePeriod=waveMtx[0]} else { wavePeriod=2*waveStr+waveMtx[i]+waveMtx[0] }

for ( i = topHeight - lowHeight - 1; i > 0 ; i--) {waveMtx.push( waveMtx [i] )}

i=0;while ( ( wavePeriod > 0 ) && (waveMtx [0]==0) && ( i < topHeight - lowHeight ) )
{if ( waveMtx[i] > 0 ){waveMtx[i]--;waveMtx[0]++}; i++;}

i=1;while ( ( wavePeriod > 0 ) && (waveMtx[topHeight - lowHeight]==0) && ( i < waveMtx.length ) )
{if ( waveMtx[i] > 0 ){waveMtx[i]--;waveMtx[topHeight - lowHeight]++}; i++;}

}

//////////
        prevLength = dispLength;
//////////
if (dispLength >= 0) { WaveStart-- ; if ( WaveStart < 0) {  WaveStart = wavePeriod - 1 ; }; }
 else { WaveStart++ ; if ( WaveStart > wavePeriod ) {  WaveStart = 0; }; };

i=0; x=0; while ( (x < waveMtx.length ) && ( WaveStart > i + waveMtx[x] ) )
                {  i+=waveMtx[x];x++; };

cPc=0; strObj = null; if ( String(str) == String(uniqueID) ) {  strObj = document.getElementById(uniqueID) ;};
if ( strObj != null ) {cPc = strObj.childNodes.length; strObj.style.letterSpacing="2px"; };

if ( String(str) == String(rollerText) ) {cPc = str.length};

cPc = String(rollerText).length ; // hehe

cP=0; cPnn=0; cN=cPc; if (( dispLength != 0 ) && ( dispLength != -1 ))  {
 if (Math.abs(dispLength) < cPc) {textStart++; 
    if ((textStart < 0 )||(textStart > cPc + spN )) { textStart = 0 }; 
    cN = Math.abs(dispLength); cP = textStart;  }; };

    while ( cPnn < cN ){
     { while ( x < waveMtx.length ) 
       { for ( fs = WaveStart - i ; fs < waveMtx[x] ; fs++ )
          { waveFS = x + lowHeight; 
	    if ( x > topHeight - lowHeight ){ waveFS = 2*topHeight - lowHeight - x };
      if (cPnn < cN) {    if (( cP < cPc + spN) && ( cP >= cPc )) { waveByte = "  " }
                         else  { if (cP >= cPc ) { cP = 0 };  waveByte=ltgtChange(rollerText.charAt(cP)); } ;
			 if ( waveByte == " " ){ waveByte = "  " };
	if ( waveByte != "  " ) {currFS = fsMtx[waveFS-1]} else { currFS = fsMtx[0] };
        if ( strObj == null ) 
	{ wave+='<' + 'font  style="font-size: ' + currFS + ';" >' + waveByte +  '<' + '/' + 'font>' ; }
	 else { strObj.childNodes.item(cPnn).innerHTML = waveByte; 
	        strObj.childNodes.item(cPnn).style.fontSize = currFS ;  };};
cPnn++; cP++ ;  } x++;   i = WaveStart ; };  x=0; }; };

Waved=true;
return wave };

function isRolling()
{ if ((origiText.length != 0 ) && (WaveEvent == 1 ) )
{return true}{return false};};

function stopWave ()
{ if ( isRolling() ) 
{ clearTimeout(waveTimeout); WaveEvent = 0; WaveD=false;
var x=document.getElementById(uniqueID);
if ( x != null) {x.innerHTML=origiText;  x.id = origi_ID_; x.style.letterSpacing = prevLetterSP; };
 origiText=""; origi_ID_ = ""; uniqueID = ""; }; }

//
function javaTimerLoop () 
{ var x = document.getElementById(uniqueID); 
  if ( x != null) { if (delayTime > delayStop) {
//   if ( Waved ) { x.innerHTML = WaveText( rollerText );};
   if ( Waved ) { WaveText(uniqueID) };
    };
  waveTimeout = setTimeout( CurrProcName.javaTimerLoop, delayTime ); } else { stopWave();}
}


} // end kzgWaveTextClass
var kzgWave = new kzgWaveTextClass()
/** WaveText © KZG ends here **/
//--></script >
Last modified: 2015 July 21 23:08:50.