Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Location
    A bubble gum pyramid
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Determining cursor coordinates for zooming link script

    I want to use a zooming link script like the one described here (demo here), 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


    Code:
    <!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>
    Last edited by Wassercrats; 05-27-2004 at 04:35 PM.

  • #2
    New to the CF scene
    Join Date
    May 2004
    Location
    A bubble gum pyramid
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found the solution! This page 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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •