Text Effects - Javascript - Web Development - Neils Resource WebText Effects - Javascript - Web Development - Neils Resource WebText Effects - Javascript - WEB DEV. - NEILS RESOURCE WEB

Contract Menu | Expand Menu

Summary of Content
Some quirky text effects. There's more of these at http://www.mf2fm.co.uk/rv/

A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top.


The script below gives the following train station billboard type display

<script>
var text="Text to display here";
document.write("<big><tt id=dis nowrap>Display Area</tt></big>");
var symtype=new Array("","A","a","B","b","C","c","D","d","E","e","F","f","G","g","H","h","I","i","J","j","K","k","L","l","M","m","N","n",

"O","o","P","p","Q","q","R","r","S","s","T","t","U","u","V","v","W","w","X","x","Y","y","Z","z",

"0","1","2","3","4","5","6","7","8","9",".",",","&","!","?","-","_","'"); - show as a single line in the code
var symarray=new Array();
for (var i=0; i<text.length; i++){
symarray[i]=" ";}
function scroll(){
for (var i=0; i<text.length; i++){
if (symarray[i]!=text.substring(i,i+1)) {
for (var x=0; x<70; x++) if (symarray[i]==symtype[x]) {symarray[i]=symtype[x+1]; break}}
}var outsym="";
for (var i=0; i<text.length; i++) outsym+=symarray[i];
dis.innerHTML=outsym;
setTimeout('scroll()',10);
}scroll();
</script>



The script below gives a highlighter banner
Place in the body section where the banner is required
<div style="position:relative;left:0px;top:0px">
<span id="highlighter" style="position:absolute;left:-1px;top:0px;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span>
</div>
Place in the body section

Analysis of ticker construction line 1

tickercontents[0]='My Pick from the Latest Photo Addition<a href="Latestpickx.htm">' + '<span style="text-decoration: none"> Mark and Jackie' + '&nbsp; </a></span>'

Text Url remove hyperlink underline of following text space at end of line

Note: the placing of the 'marks

<script type="text/javascript">

/*
Highlighter Scroller script- By JavaScript Kit
*/

var tickercontents=new Array()
tickercontents[0]='My Pick from the Latest Photo Additions. <a href="/Latest/Latestpickx.htm">Mark and Jackie</a>'
tickercontents[1]='Photographs: Latest Additions (Sept 2004). <a href="/Latest/Latestpickx.htm">The Wedding</a>'
tickercontents[2]='Travels: Devon Fishing (August 2004). <a href="/TravelWeb/Devon/Devon0804x.htm">Devon</a>'


var tickdelay=3000 //delay btw messages
var highlightspeed=10 //10 pixels at a time.

////Do not edit pass this line////////////////

var currentmessage=0
var clipwidth=0

function changetickercontent(){
crosstick.style.clip="rect(0px 0px auto 0px)"
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}

function highlightmsg(){
var msgwidth=crosstick.offsetWidth
if (clipwidth<msgwidth){
clipwidth+=highlightspeed
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipwidth=0
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}

function start_ticking(){
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}

if (document.all || document.getElementById)
window.onload=start_ticking

</script>
 

Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL)

Top of PageTop of PageA double mouse click anywhere on the page will take you back to the top (except when over hyperlinks)

Last Update: 04/03/2008 - Text Effects - Javascript - Web Development - Neils Resource Web