Fun of JavaScript: free cursor trailer txet

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Fun of JavaScript: cursor trailer
Our cursortrailer belongs to the most popular trailing scripts ever written. It's crossrowser and very easy to install. Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x, Opera 6x/7x/8x/9x/10x, Google Chrome 3x/4x/5x.

Configuration:

Step 1: Open the webpage that will feature your cursortrailer. Paste the following code right above the </body>-tag of your webpage (almost at the bottom of the webpage):

<STYLE>
.textstyle {
position:absolute;
visibility:visible;
top:-100px;
left:-100px;
font-family:Arial;
color:red;
font-size:12pt;
font-weight:normal;
font-style:normal;
z-index:100000;
}
</STYLE>

<SCRIPT>
// CREDITS:
// Cursor Trailer
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

/// START OF CONFIGURATION ZONE /////////////////////////////////
///  Set the text of your trailer

var myTrailerText="Hi visitor, how are you?"

/// END OF CONFIGURATION ZONE /////////////////////////////////
/// Do not edit below this line

var text=new Array()
text[0]=myTrailerText
var trailertext=text[0]+" "
trailertext=trailertext.split("")
var spanwidth=new Array()
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0
var x,y
var flag=false
var step=20

var borderpadding=10

var windowheight=100
var windowwidth=100

var xpos=new Array()
for (i=0;i<=trailertext.length-1;i++) {
	xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=trailertext.length-1;i++) {
	ypos[i]=-50
}

function handlerMM(e){
	if (ns4 || ns6) {
		x=e.pageX
		y=e.pageY
	}
	if (ie) {
		x=document.body.scrollLeft+event.clientX
		y=document.body.scrollTop+event.clientY
	}
	flag=true
}

function getpagesize() {
	if (ie) {
		windowheight=parseInt(document.body.clientHeight)
		windowwidth=parseInt(document.body.clientWidth)
	}
	if (ns4 || ns6) {
		windowheight=parseInt(window.innerHeight)
		windowwidth=parseInt(window.innerWidth)
	}
	
	makesnake()
}

if (ie || ns6 || ns4) {

for (i=0;i<=trailertext.length-1;i++) {
    	document.write("<span id='span"+i+"' class='textstyle'>")
		document.write(trailertext[i])
    	document.write("</span>")
	}

for (i=0;i<=trailertext.length-1;i++) {
		if (ie) {
			var thisspan=eval("document.all.span"+i)
			spanwidth[i]=Math.round(parseInt(thisspan.offsetWidth))
			if (spanwidth[i]==0) {spanwidth[i]=borderpadding}
		}
		if (ns6) {
			var thisspan=eval("document.getElementById('span"+i+"')")
			spanwidth[i]=Math.round(parseInt(thisspan.offsetWidth))
			if (spanwidth[i]==0) {spanwidth[i]=borderpadding}
		}
		if (ns4) {
			var thisspan=eval("document.span"+i+".document")
			spanwidth[i]=Math.round(thisspan.width)
			if (spanwidth[i]==0) {spanwidth[i]=borderpadding}
			thisspan.clear()
		}
	}
}

if (ns4){
	document.captureEvents(Event.MOUSEMOVE);
}

if (ie || ns6 || ns4) {
	document.onmousemove = handlerMM;
}
</SCRIPT>

Step 2: Go to the top of the code and configure the the the textstyle within the <style>-tags.

Step 3: Go to the top of the script and configure the trailer-text.

Step 4: Paste the following red onload event handler inside the <body> tag itself:

<body onLoad="getpagesize()">