/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Cross browser events

Copy linkTweet thisAlerts:
Mar 16.2007

I do not claim to be the author of the original code it’s more of a project I’m working on. Credit to the original author. All the code posted below has been modified from it’s original by me.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@SepetPhalanxauthorMar 16.2007 — This code only works in IE so far. Firefox returns the error "documents.layers has no properties". I've been researching this for a few weeks but haven't found a thorough explaination yet.


[CODE]
<script type="text/Javascript" language="JavaScript">
dateColor = '000000'; //date color.
faceColor = '000000'; //face color.
secsColor = '000000'; //seconds color.
minsColor = '000000'; //minutes color.
hourColor = '000000'; //hours color.
ClockHeight = 40;
ClockWidth = 40;
ClockFromMouseY = 0;
ClockFromMouseX = 100;

//Alter nothing below! Alignments will be lost!
d = new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
m = new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date = new Date();
day = date.getDate();
year = date.getYear();
if (year < 2000)
year = year + 1900;
TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
D = TodaysDate.split('');
H = '...';
H = H.split('');
M = '....';
M = M.split('');
S = '.....';
S = S.split('');
Face = '1 2 3 4 5 6 7 8 9 10 11 12';
font = 'Arial';
size = 1;
speed = 0.6;
//ns = (document.layers);
//ie = (document.all);
var browser = (navigator.appName.indexOf("Microsoft") != -1) ? "!ns" : "ns";
//browser = "!ns"; //debug

Face = Face.split(' ');
faceLength = Face.length;
a = size * 10;
ymouse = 0;
xmouse = 0;
scrll = 0;
Split = 360 / faceLength;
Dsplit = 360 / D.length;
HandHeight = ClockHeight / 4.5
HandWidth = ClockWidth / 4.5
HandY = -7;
HandX = -2.5;
scrll = 0;
step = 0.06;
currStep = 0;
y = new Array();
x = new Array();
Y = new Array();
X = new Array();
for (i = 0; i < faceLength; i++) {
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
}
Dy = new Array();
Dx = new Array();
DY = new Array();
DX = new Array();
for (i = 0; i < D.length; i++) {
Dy[i] = 0;
Dx[i] = 0;
DY[i] = 0;
DX[i] = 0;
}
//(ns) ? document.write("ns") : document.write("!ns");
(browser == "ns") ? document.write("ns") : document.write("!ns");
//if (ns) {
if (browser == "ns") {
for (i = 0; i < D.length; i++)
document.write('<layer name="nsDate' + i + '" top=0 left=0 height=' + a + ' width=' + a + '><center><font face=' + font + ' size=' + size + ' color=' + dateColor + '><b>' + D[i] + '</b></font></center></layer>');
for (i = 0; i < faceLength; i++)
document.write('<layer name="nsFace' + i + '" top=0 left=0 height=' + a + ' width=' + a + '><center><font face=' + font + ' size=' + size + ' color=' + faceColor + '><b>' + Face[i] + '</b></font></center></layer>');
for (i = 0; i < S.length; i++)
document.write('<layer name="nsSeconds' + i + '" top=0 left=0 width=15 height=15><font face=Arial size=3 color=' + secsColor + '><center><b>' + S[i] + '</b></center></font></layer>');
for (i = 0; i < M.length; i++)
document.write('<layer name="nsMinutes' + i + '" top=0 left=0 width=15 height=15><font face=Arial size=3 color=' + minsColor + '><center><b>' + M[i] + '</b></center></font></layer>');
for (i = 0; i < H.length; i++)
document.write('<layer name="nsHours' + i + '" top=0 left=0 width=15 height=15><font face=Arial size=3 color=' + hourColor + '><center><b>' + H[i] + '</b></center></font></layer>');
}
//if (ie) {
else {
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center"><font face=' + font + ' size=' + size + ' color=' + dateColor + '><b>' + D[i] + '</b></font></div>');
document.write('</div></div><div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < faceLength; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center"><font face=' + font + ' size=' + size + ' color=' + faceColor + '><b>' + Face[i] + '</b></font></div>');
document.write('</div></div><div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hourColor + ';text-align:center;font-weight:bold">' + H[i] + '</div>');
document.write('</div></div><div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + minsColor + ';text-align:center;font-weight:bold">' + M[i] + '</div>');
document.write('</div></div><div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + secsColor + ';text-align:center;font-weight:bold">' + S[i] + '</div>');
document.write('</div></div>');
}
//(ns) ? window.captureEvents(Event.MOUSEMOVE) : 0;
//(ns) ? document.captureEvents(Event.MOUSEMOVE) : 0;
(browser == "ns") ? document.captureEvents(Event.MOUSEMOVE) : 0;

function Mouse(evt) {
//ymouse = (ns) ? evt.pageY + ClockFromMouseY - (window.pageYOffset) : event.y + ClockFromMouseY;
//xmouse = (ns) ? evt.pageX + ClockFromMouseX : event.x + ClockFromMouseX;
//ymouse = (ns) ? evt.pageY + ClockFromMouseY - (window.pageYOffset) : window.event.y + ClockFromMouseY;
//xmouse = (ns) ? evt.pageX + ClockFromMouseX : window.event.x + ClockFromMouseX;
//if (ns) {
if (browser == "ns") {
ymouse = evt.pageY + ClockFromMouseY - (window.pageYOffset);
xmouse = evt.pageX + ClockFromMouseX;
}
else {
ymouse = window.event.y + ClockFromMouseY;
xmouse = window.event.x + ClockFromMouseX;
}
}

//(ns) ? window.onMouseMove = Mouse : document.onmousemove = Mouse;
document.onmousemove = Mouse;

function ClockAndAssign() {
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs / 30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins / 30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
//if (ie) {
if (browser == "ns") {}
else {
// line 145:
Od.style.top = window.document.body.scrollTop;
// line 146:
Of.style.top = window.document.body.scrollTop;
// line 147:
Oh.style.top = window.document.body.scrollTop;
// line 148:
Om.style.top = window.document.body.scrollTop;
// line 149:
Os.style.top = window.document.body.scrollTop;
}
for (i = 0; i < faceLength; i++) {
//var F = (ns) ? document.layers['nsFace' + i] : ieFace[i].style;
// line 153:
var F = (browser == "ns") ? document.layers["nsFace" + i] : ieFace[i].style;
F.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
F.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
}
for (i = 0; i < H.length; i++) {
//var HL = (ns) ? document.layers['nsHours' + i] : ieHours[i].style;
var HL = (browser == "ns") ? document.layers['nsHours' + i] : ieHours[i].style;
HL.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
HL.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
}
for (i = 0; i < M.length; i++) {
//var ML = (ns) ? document.layers['nsMinutes' + i] : ieMinutes[i].style;
var ML = (browser == "ns") ? document.layers['nsMinutes' + i] : ieMinutes[i].style;
ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
}
for (i = 0; i < S.length; i++) {
//var SL = (ns) ? document.layers['nsSeconds' + i] : ieSeconds[i].style;
var SL = (browser == "ns") ? document.layers['nsSeconds' + i] : ieSeconds[i].style;
SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
}
for (i = 0; i < D.length; i++) {
//var DL = (ns) ? document.layers['nsDate' + i] : ieDate[i].style;
var DL = (browser == "ns") ? document.layers['nsDate' + i] : ieDate[i].style;
DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
}
currStep -= step;
}

function Delay() {
//scrll = (ns) ? window.pageYOffset : 0;
scrll = (browser == "ns") ? window.pageYOffset : 0;
Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
for (i = 1; i < D.length; i++) {
Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
}
y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
for (i = 1; i < faceLength; i++) {
y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
}
ClockAndAssign();
setTimeout('Delay()', 20);
}

//if (ns || ie)
window.onload = Delay;
</script>
[/CODE]
Copy linkTweet thisAlerts:
@SepetPhalanxauthorMar 16.2007 — This similar code works cross browser just fine and when debugged both produce "isDom" as the value to determine the browser type. I'm not 100% sure what "isNav" or "isDom" stand for (it's obvious what "isOldIE" is) but that's not crucial. The point is they both show "isDom" which means they are both using the DIV portion rather than the LAYER. I was curious and eventually discovered that LAYERS is depreciated as of Netscape 5 (if i remember correctly).

This now being known I tried my code (uncomment the debug in my code) with only DIVs and get "Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead." as a result for lines 145 - 149 and 153 in my code (thanks to a Firefox plugin). The line numbers of the above code don't match my code (the above code is just a partial, I've marked the problem lines).

Anyway here's the similar code...
[CODE]
<script language="JavaScript" type="text/javascript">
var trailLength = 8; // The length of trail
var path = "http://www.webdeveloper.com/forum/images/webdev-logo2.gif"; // URL to cursor image
var dist = 0; //distance between cursor and trail in pixels when mouse doesn't move
var speed = 10; //speed of trails; higher value=>slower;
var dist2 = dist - 2; //do not change this
var i, d = 0, storage;
var isNav = (document.layers);
if (isNav)
document.write("isNav");
var isOldIE = (document.all && !document.getElementById);
if (isOldIE)
document.write("isOldIE");
var isDom = (document.getElementById);
if (isDom)
document.write("isDom");

function initTrail() {
storage = new Array();
for (i = 0; i < trailLength * 3; i++) {
storage[i] = 0;
}
for (i = 0; i < trailLength; i++) { // make divs for IE and dom browsers or layers for Navigator
if (isOldIE || isDom)
document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src=' + path + '></div>');
if (isNav)
document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + path + '"></layer>');
}
trail();
}

function trail() {
for (i = 0; i < trailLength; i++) {
if (isOldIE) {
document.all["obj" + i].style.top = storage[d];
document.all["obj" + i].style.left = storage[d + 1];
}
if (isDom) {
document.getElementById("obj" + i).style.top = storage[d];
document.getElementById("obj" + i).style.left = storage[d + 1];
}
if (isNav) {
document.layers["obj" + i].top = storage[d];
document.layers["obj" + i].left = storage[d + 1];
}
d = d + 2;
}
for (i = storage.length; i >= 2; i--) {
storage[i] = storage[i - 2];
}
d = 0;
clearTimeout(timer);
var timer = setTimeout("trail()", speed);
}

function processEvent(e) {
if (document.all) {
storage[0] = window.event.y + document.body.scrollTop + dist2;
storage[1] = window.event.x + document.body.scrollLeft + dist2;
}
else {
storage[0] = e.pageY + dist2 + 2;
storage[1] = e.pageX + dist2 + 2;
}
}

if (isNav) {
document.captureEvents(Event.MOUSEMOVE);
}
if (isOldIE || isNav || isDom) {
initTrail();
document.onmousemove = processEvent;
}
</script>
[/CODE]

I've been doing all my work in Notepad++ for syntax highlighting and to compare the two codes side by side. (Notepad++ for the win.)
Copy linkTweet thisAlerts:
@SepetPhalanxauthorMar 19.2007 — What do I need to do to make it work in both browsers?
Copy linkTweet thisAlerts:
@SepetPhalanxauthorApr 09.2007 — Resolved

[CODE]
<script language="JavaScript" type="text/javascript">
dateColor = '000000'; //date color.
faceColor = '000000'; //face color.
hourColor = '000000'; //hours color.
minsColor = '000000'; //minutes color.
secsColor = '000000'; //seconds color.
ClockHeight = 40;
ClockWidth = 40;
ClockFromMouseY = 0;
ClockFromMouseX = 100;

//Alter nothing below! Alignments will be lost!
d = new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
m = new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date = new Date();
day = date.getDate();
year = date.getYear();
if (year < 2000)
year = year + 1900;
TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
D = TodaysDate.split('');
H = '...';
H = H.split('');
M = '....';
M = M.split('');
S = '.....';
S = S.split('');
F = '1 2 3 4 5 6 7 8 9 10 11 12';
F = F.split(' ');
xmouse = 0;
ymouse = 0;
scrll = 0;
speed = 0.6;
FSplit = 360 / F.length;
Dsplit = 360 / D.length;
HandHeight = ClockHeight / 4.5
HandWidth = ClockWidth / 4.5
HandX = -2.5;
HandY = -7;
step = 0.06;
currStep = 0;
x = new Array();
y = new Array();
X = new Array();
Y = new Array();
for (i = 0; i < F.length; i++) {
x[i] = 0;
y[i] = 0;
X[i] = 0;
Y[i] = 0;
}
Dx = new Array();
Dy = new Array();
DX = new Array();
DY = new Array();
for (i = 0; i < D.length; i++) {
Dx[i] = 0;
Dy[i] = 0;
DX[i] = 0;
DY[i] = 0;
}
for (i = 0; i < D.length; i++)
document.write('<div id="Date' + i + '" style="position:absolute;width:10px;height:10px;font-family:Arial;font-size:10px;color:' + dateColor + ';text-align:center;font-weight:bold;top:0px;left:0;">' + D[i] + '</div>');
for (i = 0; i < F.length; i++)
document.write('<div id="Face' + i + '" style="position:absolute;width:10px;height:10px;font-family:Arial;font-size:10px;color:' + faceColor + ';text-align:center;font-weight:bold;top:0px;left:0;">' + F[i] + '</div>');
for (i = 0; i < H.length; i++)
document.write('<div id="Hour' + i + '" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hourColor + ';text-align:center;font-weight:bold;">' + H[i] + '</div>');
for (i = 0; i < M.length; i++)
document.write('<div id="Minu' + i + '" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + minsColor + ';text-align:center;font-weight:bold;">' + M[i] + '</div>');
for (i = 0; i < S.length; i++)
document.write('<div id="Seco' + i + '" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + secsColor + ';text-align:center;font-weight:bold;">' + S[i] + '</div>');

function Mouse(evt) {
if (document.all) {
xmouse = window.event.x + ClockFromMouseX;
ymouse = window.event.y + ClockFromMouseY;
}
else {
xmouse = evt.pageX + ClockFromMouseX;
ymouse = evt.pageY + ClockFromMouseY - (window.pageYOffset);
}
}

function ClockAndAssign() {
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs / 30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins / 30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
for (i = 0; i < D.length; i++) {
document.getElementById("Date" + i).style.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
document.getElementById("Date" + i).style.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
}
for (i = 0; i < F.length; i++) {
document.getElementById("Face" + i).style.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * FSplit * Math.PI / 180);
document.getElementById("Face" + i).style.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * FSplit * Math.PI / 180) + scrll;
}
for (i = 0; i < H.length; i++) {
document.getElementById("Hour" + i).style.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
document.getElementById("Hour" + i).style.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
}
for (i = 0; i < M.length; i++) {
document.getElementById("Minu" + i).style.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
document.getElementById("Minu" + i).style.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
}
for (i = 0; i < S.length; i++) {
document.getElementById("Seco" + i).style.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
document.getElementById("Seco" + i).style.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
}
currStep -= step;
}

function Delay() {
scrll = (!document.all) ? window.pageYOffset : 0;
Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
for (i = 1; i < D.length; i++) {
Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
}
x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
for (i = 1; i < F.length; i++) {
x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
}
ClockAndAssign();
setTimeout('Delay()', 20);
}

document.onmousemove = Mouse;
window.onload = Delay;
</script>
[/CODE]
×

Success!

Help @SepetPhalanx spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...