View Full Version : Determining cursor coordinates for zooming link script

05-27-2004, 04:30 PM
I want to use a zooming link script like the one described here (http://builder.com.com/5100-31-5074157.html?tag=search#CodeExample1) (demo here (http://www.psacake.com/web/ip.asp)), but I have to use it with a doctype declaration of at least HTML 4.01 or else my page won't render correctly. It renders correctly using XHTML-transitional, but it breaks with versions before 4.01 or without a DTD.

The problem with the script when I use a 4.01 or higher DTD is that clicking a link that's below the fold will cause the zoom effect to occur too high. I have an idea of how to fix the script, but it requires that I detect the cursor coordinates, where the y position increases as you go further below the fold, instead of the screen height being the maximum.

I tried editing two cursor trail scripts to make them just give me the vertical location of the cursor, but they don't work with the DTD I require. The one below comes from llizard, who got it from Liorean. If you try it (at least in IE 6), you will see that it prints the vertical cursor position to the status bar after you hover over the link, and the maximum is the screen height, not the page height. If you remove the DTD, it does what I want, but breaks my CSS.

Anyone know of a zooming link script or a way to identify the vertical position of a link that will work for me?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
BODY {width:100%;overflow-x:hidden;overflow-y:scroll;}
<script language = "JavaScript1.2">
var x,y;
var flag=0;
var xpos=new Array();
for (i=0;i<1;i++) {
var ypos=new Array();
for (i=0;i<1;i++) {
function meander(e) {
x = (e) ? e.pageX : document.body.scrollLeft+event.clientX;
y = (e) ? e.pageY : document.body.scrollTop+event.clientY;
function makebanner() {
if (flag==1) {
for (i=0; i>=1; i--) {
for (i=0; i<1; i++)
if (document.getElementById) {
var thisspan = document.getElementById("span"+i).style;
} else {
var thisspan = eval((document.layers)?"document.span"+i:"span"+(i)+".style");
if (thisspan.posLeft) {
if (!thisspan.posLeft) {
window.status = ypos;
var timer=setTimeout(makebanner,30);
<script language="JavaScript1.2">
document.write("<span id='span"+0+"'></span>")

function testing()
document.onmousemove = meander;
<table><tr><td style = "height: 700px; vertical-align: bottom;">
<a style = "vertical-align: bottom" href = "#" onmouseover = "testing()" onmouseout = "window.makebanner()">test</a></span>

05-28-2004, 06:51 PM
I found the solution! This page (http://www.projectit.com/articles/yamf/yamfwoes07.html) says "Internet Explorer 6 no longer returns the correct canvas dimensions using the body style sheet properties if !DOCTYPE is set with compliance."

For scripts that determine the amount of vertical scrolling, like cursor trail scripts and the zooming link script that I want to use, for IE 6 you have to add document.documentElement.scrollTop to document.body.scrollTop. The scripts I've been trying only use document.body.scrollTop.

I think I'll email a few authors of such scripts.