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 Coder
    Join Date
    Mar 2006
    Location
    Australia
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS positioning/javascript problem

    I'm having a nightmare from which I cannot wake up. to try to keep things really simple, here's the problem:
    I want to determine if a mouse click is outside of a certain div. Is use a function to get the corners of the div and compare this to the mouse position registered inside the click event object. So far so good. But my function to get the position of the div returns the x position of the div relative to the positioned content div (the same value as it is assigned in the stylesheet), not to the left of the page. Whereas the function that returns the mouse position, returns it relative to the left of the whole page. I had assumed by using offsetParent, I could get to the true page position of the div, but it doesn't work.
    Here's the code:
    Code:
    document.onclick=hideRater;
    
    function showRater (e){
    	e=(e)? e: ((window.event) ? window.event: null);
        var rater=document.getElementById("<%=popupPanel.ClientID%>")
        rater.style.visibility="visible";
    }
    function hideRater(e) {
        var rater=document.getElementById("<%=popupPanel.ClientID%>")
        if(!inElement(e,rater)){ //I want to hide the rater div if the user clicks outside it
            alert("click was outside rater: hiding it now"); //this is a debug message
            rater.style.visibility="hidden";
        }
    }
    var tempX = 0;
    var tempY = 0;
    
    function inElement(e,el){
    	e=(e)? e: ((window.event) ? window.event: null);
    	if(e){
    		getMouseXY(e);
    	}
        var pos= new Position(el);
    	if(tempX <= pos.right && tempX >= pos.left && tempY >= pos.top && tempY <= pos.bottom){
    			return true;
        } else return false;
    }
    
    function Position(elt){
    		var x = 0;
    		var y = 0;
    		var offsetPointer=elt;
    			while (offsetPointer) {//loop through parent elements to add offsets. x and y  end up being position of elt
    			x += offsetPointer.offsetLeft;
    			y += offsetPointer.offsetTop;
    			offsetPointer = offsetPointer.offsetParent;
    		}
    		// correct for MacIE body margin factors
    		if (navigator.userAgent.indexOf("Mac") != -1 &&
    		typeof document.body.leftMargin != "undefined") {
    			x += document.body.leftMargin;
    			y += document.body.topMargin;
    		}
    		this.left=x;
    		this.top=y;
    		this.height=elt.offsetHeight;
    		this.width=elt.offsetWidth;
    		this.right=x+this.width;
    		this.bottom=y+this.height;
    }
    
    function getMouseXY(e) {
    	if (e.pageX || e.pageY) 	{
    		tempX = e.pageX;
    		tempY = e.pageY;
    	}
    	else if (e.clientX || e.clientY) 	{
    		tempX = e.clientX + document.body.scrollLeft
    			+ document.documentElement.scrollLeft;
    		tempY = e.clientY + document.body.scrollTop
    			+ document.documentElement.scrollTop;
    	} 
      // catch possible negative values in NS4
      if (tempX < 0){tempX = 0}
      if (tempY < 0){tempY = 0}  
      return true;
    }
    pp
    -------------------------------------
    "Laziness is the mother of invention" - Thomas Edison (not really)

  • #2
    New Coder
    Join Date
    Mar 2006
    Location
    Australia
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perhaps I should add this information:
    The body is styled like so:
    Code:
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	width: 800px;
    	margin: 0px auto auto auto;
    	position: relative;
    	border: none;
    	background-image: url(images/bg-slash.gif);
    	scrollbar-base-color: #c3d8ed;
    }
    
    #overall{ background-color: #fff; padding-top: 5px; width: 799px; border-right: 1px solid #ccc; border-left: 1px solid #ccc;}
    Then the HTML has the form:
    ....
    <body>
    <div id="overall">
    (All content here)
    </div>
    </body>

    It is the left position of the 'overall' div that I can't find and that makes it impossible to compare the mouse position with the position of the 'rater' div.

    You can see the site itself at www.menslineaus.org.au
    pp
    -------------------------------------
    "Laziness is the mother of invention" - Thomas Edison (not really)


  •  

    Posting Permissions

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