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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    pageX/Y in firefox 3 problem...

    Good day,

    I'm having problem with pageX/Y javascript using firefox 3 and Netscape. It seems that firefox does not read my code if pageX and pageY is present.
    But works perfectly in ie6, safari.

    html code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="drag.css" />
    <script type="text/javascript" src="drag.js"> </script>
    </head>
    
    <body>
    <div id="box"></div>
    </body>
    </html>
    JS code:
    Code:
    // JavaScript Document
    window.onload= initDrag;
    
    function initDrag(){
    	var box = document.getElementById("box");
    	var isMouseDown = false;
    	var x=0;
    	var y=0;
    	
    	box.onmousedown = box_down;
    	box.onmouseup = box_up;
    	box.onmousemove = box_move;
    	box.onmouseout = mouse_out;
    	
    	function box_down(){
    		isMouseDown = true;	
    
    	}
    	function box_up(){
    		isMouseDown = false;	
    		
    	}
    	function box_move(){
    		if(isMouseDown){
    			if(event.clientX || event.clientY) //IE
    			{	
    				x = event.clientX;
    				y = event.clientY;
    				
    			}
    			else{ // Not IE
    				x = event.pageX;
    				y = event.pageY;
    			}
    			
    			box.style.top = (y - 50) + "px";
    			box.style.left = (x - 50) + "px";
    		}
    		
    	}
    	function mouse_out(){
    		isMouseDown=false;
    	}
    }
    css:
    Code:
    #box{
    	background-color: #999999;
    	width: 100px;
    	height: 100px;
    	position: absolute;
    }
    any idea?


    Thanks

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,525
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    // JavaScript Document
    window.onload= initDrag;
    var isMouseDown = false;
    
    function initDrag(){
    	var box = document.getElementById("box");
    	var isMouseDown = false;
    	var x=0;
    	var y=0;
    
    	box.onmousedown = box_down;
    	box.onmouseup = box_up;
    	box.onmousemove = function(e){ box_move(e); }
    	box.onmouseout = mouse_out;
    
    	function box_down(){
     	isMouseDown = true;
    
    	}
    	function box_up(){
    		isMouseDown = false;
    
    	}
    	function box_move(e){
    	if(isMouseDown){
    			box.style.top = (zxcMse(e)[1] - 50) + "px";
    			box.style.left = (zxcMse(e)[0] - 50) + "px";
    		}
    
    	}
    	function mouse_out(){
    		isMouseDown=false;
    	}
    }
    
    function zxcMse(ev){
     if(!ev) var ev=window.event;
     if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
     return [ev.pageX,ev.pageY];
    }
    
    function zxcDocS(){
     if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.scrollLeft,document.body.scrollTop];
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok it work almost fine, but it only grip the center (almost)... but anyway thanks.

    ... Im gonna try to understand your code, because it looks complicated to me... and im not an expert to this thing

    thanks


  •  

    Posting Permissions

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