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 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    positionng a div with click

    i have a table with 28 columns in a page with horizontal scroll bar

    i need to display a div when a header cell is clicked
    but the div shld be displayed at the location of the header clicked header cell only

    currently i have a script to get the mouse click coordinates & have applied to div left

    but the problem is even if the table is scrolled the div remians there only . it needs to be in the header cell where its clicked

    suppose i scroll & click another header cell
    i do get the cordinates but its the screen cordinates so not matching the actual headercell cordinates

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it might have to do with the way you have you div positioned in your css (but who knows, really?)

    anyway. this seems to do what you want:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style>
            #square {
                position:absolute;
            }
    		td:hover {
    		cursor:pointer;
            }
        </style>
    	</head>
    
    <body onload="setListeners()">
    <table id="mytable" width="200%" cellpadding="0">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
    	<td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
    	    <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
    	<td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
          </tr>
    </table>
    <script>
    function MoveSquare (e,col) {
    		var square = document.getElementById ("square");
                      var posx = 0;
    				var posy = 0;
    				if (e==null)
    				e = window.event;
    				if (e.pageX || e.pageY){
    				posx = e.pageX;
    				posy = e.pageY;
    					}
    				else if (e.clientX || e.clientY){
    				posx = (e.clientX + document.body.scrollLeft
    				+ document.documentElement.scrollLeft);
    				posy = (e.clientY + document.body.scrollTop
    				+ document.documentElement.scrollTop);
    						} 
                    square.style.left = posx+15 + "px";
                    square.style.top = posy+20 + "px";
    				square.innerHTML="you clicked on column "+col
            }
    		
    		function setListeners () {
        var heads = document.getElementById("mytable").getElementsByTagName("td");
        for (var i = 0; i < heads.length; i++) {
            heads[i].onclick = function (event){MoveSquare(event,this.innerHTML);};
        }
    }
    </script>
    <div id="square">hi there</div>
    </body>
    </html>
    Last edited by xelawho; 01-24-2012 at 05:14 PM. Reason: added doctype

  • #3
    mjy
    mjy is offline
    New Coder
    Join Date
    Jan 2012
    Location
    United States
    Posts
    28
    Thanks
    0
    Thanked 6 Times in 6 Posts
    I'm not clear exactly what you're doing, but I know that to position a <div> you would need to convert the screen coordinates (aka "viewport" coordinates) of the mouse pointer to document coordinates. Here's an excerpt from my book that might help:
    Document vs. Viewport Coordinates
    The coordinates contained in the clientX and clientY properties of a MouseEvent object, which give the pointer position with reference to the upper-left corner of the browser window, are known as viewport coordinates. If the page has been scrolled these coordinates differ from the document coordinates, which are with reference to the upper-left corner of the document.
    To convert between these two types of coordinates, you need to know the amount the document has been scrolled. The horizontal and vertical scrolling distances are contained in the scrollLeft and scrollTop properties of the <html> element node:
    Code:
    document.documentElement.scrollLeft
    document.documentElement.scrollTop
    To make sure that these two properties do in fact belong to the <html> element node, you should use the following HTML5 DOCTYPE declaration at the top of your web page:
    Code:
    <!DOCTYPE html>
    Author of the Kindle book JavaScript: Just the Basics - A Primer for the Complete Beginner. Learn JavaScript for the price of a fancy coffee drink.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts


    it's certainly not necessary to declare it as an html5 doctype (and there are various arguments for not using that doctype unless absolutely necessary) - scrollLeft and scrollTop have been around long enough to work with a range of doctypes, as the code posted above shows.

    the rest of what you say is a nice little theoretical discussion of what the posted code puts into practice, so no problems here

  • #5
    mjy
    mjy is offline
    New Coder
    Join Date
    Jan 2012
    Location
    United States
    Posts
    28
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by xelawho View Post


    it's certainly not necessary to declare it as an html5 doctype (and there are various arguments for not using that doctype unless absolutely necessary) - scrollLeft and scrollTop have been around long enough to work with a range of doctypes, as the code posted above shows.

    the rest of what you say is a nice little theoretical discussion of what the posted code puts into practice, so no problems here
    Sorry to create the confusion. To simplify the discussion in my book I suggested just using the <!DOCTYPE html> HTML5 DOCTYPE together with document.documentElement.scrollLeft/Top (documentElement representing the HTML element). With certain older DOCTYPEs, the scrollLeft/Top properties of the *BODY* element contain the correct scroll amounts and the scrollLeft/Top properties of the HTML element are always set to zero. But I can see that xelawho's code is written to work universally (e.g. scroll left amount is obtained from document.body.scrollLeft + document.documentElement.scrollLeft), so you don't have to worry about using a particular DOCTYPE. A much better way to go.
    Author of the Kindle book JavaScript: Just the Basics - A Primer for the Complete Beginner. Learn JavaScript for the price of a fancy coffee drink.

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    a i dp have
    <table id="mytable" width="200%" cellpadding="0">
    <tr>
    <td>name</td>-- header cell
    <td>age</td>-- header cell
    <td>add</td>-- header cell
    <td>desig</td>-- header cell
    <td>dep</td>-- header cell
    <td>salar</td>-- header cell
    <td>loca</td>-- header cell
    <td>ci</td>-- header cell
    <td>coun</td>-- header cell
    <td>road</td>-- header cell
    <td>11</td>-- header cell
    <td>12</td>-- header cell
    <td>13</td>-- header cell
    <td>14</td>-- header cell
    </tr>

    <tr>
    <td>1</td>--data cell
    <td>2</td>--data cell
    <td>3</td>--data cell
    <td>4</td>--data cell
    <td>5</td>--data cell
    <td>6</td>--data cell
    <td>7</td>--data cell
    <td>8</td>--data cell
    <td>9</td>--data cell
    <td>10</td>--data cell
    <td>11</td>--data cell
    <td>12</td>--data cell
    <td>13</td>--data cell
    <td>14</td>--data cell
    </tr>
    </table>

    when header cell is clicked ie suppose users click on heade cell dep a div shld be displaed
    inline with that header cell
    suppose users click on heade cell name a div shld be displaed
    inline with that header cell
    means a div shld be displaed in column name


  •  

    Posting Permissions

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