...

View Full Version : positionng a div with click



svibuk
01-24-2012, 07:50 AM
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

xelawho
01-24-2012, 02:58 PM
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:



<!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>

mjy
01-24-2012, 04:54 PM
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:


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:


<!DOCTYPE html>

xelawho
01-24-2012, 05:18 PM
:confused:

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 :thumbsup:

mjy
01-25-2012, 01:41 AM
:confused:

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 :thumbsup:

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.

svibuk
01-29-2012, 07:22 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum