Wassercrats
05-27-2004, 03: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?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<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;}
</style>
<script language = "JavaScript1.2">
<!--
var x,y;
var flag=0;
var xpos=new Array();
for (i=0;i<1;i++) {
xpos[i]=-50;
}
var ypos=new Array();
for (i=0;i<1;i++) {
ypos[i]=-50;
}
function meander(e) {
x = (e) ? e.pageX : document.body.scrollLeft+event.clientX;
y = (e) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1
}
function makebanner() {
if (flag==1) {
for (i=0; i>=1; i--) {
xpos[i]=xpos[i-1];
ypos[i]=ypos[i-1];
}
xpos[0]=x
ypos[0]=y
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) {
thisspan.posLeft=xpos[i]+'%';
thisspan.posTop=ypos[i]+'%';
}
if (!thisspan.posLeft) {
thisspan.left=xpos[i]+'px';
thisspan.top=ypos[i]+'px';
window.status = ypos;
return;
}
}
}
var timer=setTimeout(makebanner,30);
}
window.onload=makebanner;
//-->
</script></head><body>
<script language="JavaScript1.2">
<!--
document.write("<span id='span"+0+"'></span>")
i=1;
function testing()
{
document.onmousemove = meander;
}
//-->
</script>
<table><tr><td style = "height: 700px; vertical-align: bottom;">
<a style = "vertical-align: bottom" href = "#" onmouseover = "testing()" onmouseout = "window.makebanner()">test</a></span>
</td></tr></table>
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?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<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;}
</style>
<script language = "JavaScript1.2">
<!--
var x,y;
var flag=0;
var xpos=new Array();
for (i=0;i<1;i++) {
xpos[i]=-50;
}
var ypos=new Array();
for (i=0;i<1;i++) {
ypos[i]=-50;
}
function meander(e) {
x = (e) ? e.pageX : document.body.scrollLeft+event.clientX;
y = (e) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1
}
function makebanner() {
if (flag==1) {
for (i=0; i>=1; i--) {
xpos[i]=xpos[i-1];
ypos[i]=ypos[i-1];
}
xpos[0]=x
ypos[0]=y
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) {
thisspan.posLeft=xpos[i]+'%';
thisspan.posTop=ypos[i]+'%';
}
if (!thisspan.posLeft) {
thisspan.left=xpos[i]+'px';
thisspan.top=ypos[i]+'px';
window.status = ypos;
return;
}
}
}
var timer=setTimeout(makebanner,30);
}
window.onload=makebanner;
//-->
</script></head><body>
<script language="JavaScript1.2">
<!--
document.write("<span id='span"+0+"'></span>")
i=1;
function testing()
{
document.onmousemove = meander;
}
//-->
</script>
<table><tr><td style = "height: 700px; vertical-align: bottom;">
<a style = "vertical-align: bottom" href = "#" onmouseover = "testing()" onmouseout = "window.makebanner()">test</a></span>
</td></tr></table>