Wandering Hearts

2. Get the Script

Join the Discussion

Questions? Comments?

More of this Feature

Introduction Add to Your Page

The script for the wandering hearts is in three parts. The first two parts go in the head section of your web page. The first part is the script itself. You need to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called hearts.js.

// Wandering Hearts Script
// copyright Stephen Chapman, 19th November 2005, 5th January 2008
// you may copy this script provided that you retain the copyright notice

function start() {
ha = new heart(0,0,'heart0');
hb = new heart(pageWidth()-objWidth('heart1'),0,'heart1');
mover();
}
last_id = 'heart1';

function moveit() {
ha.moveit();
hb.moveit();
}

// no changes required below
var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById;if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else {var nsDOM = ((navigator.appName.indexOf('Netscape')!=-1) && (parseInt(navigator.appVersion)==4)); if (nsDOM) aDOM = 1;}} function xDOM(objectId, wS) {if (stdDOM) return wS ? document.getElementById(objectId).style: document.getElementById(objectId); if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId];if (nsDOM) return document.layers[objectId];}
function objWidth(objectID) {var obj = xDOM(objectID,0); if(obj.offsetWidth) return obj.offsetWidth; if (obj.clip) return obj.clip.width; return 0;}
function objHeight(objectID) {var obj = xDOM(objectID,0); if(obj.offsetHeight) return obj.offsetHeight; if (obj.clip) return obj.clip.height; return 0;}
 function objLeft(objectID) {var obj = xDOM(objectID,0);var objs = xDOM(objectID,1);  if(objs.left) return objs.left; if (objs.pixelLeft) return objs.pixelLeft; if (obj.offsetLeft) return obj.offsetLeft; return 0;} function objTop(objectID) {var obj = xDOM(objectID,0);var objs = xDOM(objectID,1);  if(objs.top) return objs.top; if (objs.pixelTop) return objs.pixelTop; if (obj.offsetTop) return obj.offsetTop; return 0;}
function setObjVis(objectID,vis) {var objs = xDOM(objectID,1); objs.visibility = vis;}
 function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}
function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;} function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset: document.documentElement.scrollLeft? document.documentElement.scrollLeft: document.body.scrollLeft? document.body.scrollLeft:0;}
function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset: document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop? document.body.scrollTop:0;}
function mover() {moveit(); setTimeout('this.mover()',25);} function distance(s,e) {return Math.abs(s-e)} function direction(s,e) {return s>e?-1:1} function rate(a,b) {return a<b?a/b:1} function heart(x,y,obj) {this.xxx = x; this.yyy = y;this.dist = this.distX = this.distY = 0;this.stepx = 2;this.stepy = 2;this.obj = obj;this.nextEnd();this.moveit(); setObjVis(this.obj,'visible');}
heart.prototype.nextEnd = function() {var eX = Math.floor(Math.random()* (pageWidth()-objWidth(this.obj)));var eY = Math.floor(Math.random()* (pageHeight()-objHeight(this.obj)));this.dist = this.distX = distance(this.xxx,eX);this.distY = distance(this.yyy,eY);this.stepx = 2 * direction(this.xxx,eX) * rate(this.distX,this.distY);this.stepy = 2 * direction(this.yyy,eY) * rate(this.distY,this.distX);}; heart.prototype.moveit = function() {if (this.dist > 0) {this.xxx += this.stepx;this.yyy += this.stepy; this.dist -= Math.abs(this.stepx);}else {this.nextEnd();} var x = (posLeft()+this.xxx);var y = (posTop()+this.yyy); moveObjTo(this.obj,x,y);}

var pageLoaded = 0;
window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {
if (document.getElementById &&
document.getElementById(i) != null) f();
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
loaded(last_id,start);
window.onscroll = moveit;

You next attach the script into your web page that you wish to display your wandering hearts on by adding the following code into the head section of your page. We need a stylesheet for the heart objects so we'll add that at the same time.

The next step is to add the rest of the code to your page.

Introduction | The Script | Add to Your Page

Guide since 2004

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

JavaScript