468,103 Members | 1,186 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,103 developers. It's quick & easy.

HELP: I need to make the div show up next to a button

Hi Guys,

I am having problem finding the position of a button that I can set the
div position next to the button.

Can you please help? Thanks in advance.

Jul 23 '05 #1
9 6022
I am using firefox thank you.

Jul 23 '05 #2
gl**@tollnz.co.nz wrote:
I am using firefox thank you.


You're welcome I'm sure. Ever hear of CSS?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/str*ict.dtd">
<html>
<head>
<style id="ss" type="text/css">

div#container {
position: relative;
width: 120px;
height: 200px;
margin: 160px auto;
}
button {
position: absolute;
top: 88px;
width: 60px;
height: 24px;
font: 12px tahoma;
}
div#div {
visibility: hidden;
position: absolute;
left: 80px;
top: 0;
width: 40px;
height: 200px;
border: 1px #000 solid;
background: coral;
}

</style>
<script type="text/javascript">

function x()
{
document.getElementById('div').style.visibility = 'visible';
}

</script>
</head>
<body>
<div id="container">
<button onclick="x()"> button </button>
<div id="div"></div>
</div>
</body>
</html>

Jul 23 '05 #3
gl**@tollnz.co.nz wrote:
Hi Guys,

I am having problem finding the position of a button that I can set the
div position next to the button.


Not to nit-pick, but what do you mean by 'position'?

Do you want to place the div using HTML/DOM rendering or absolute
co-ordinates (like a tool-tip)?

For HTML/DOM rendering, you can create a div and append it to anther
element similarly to if you'd coded it in the original HTML - or you
could code it in the HTML and have it hidden, then use script to
reveal it when a button is clicked.

If you are looking for a tool-tip kind of thing, you may be after the
coordinates of a mouse click.

Alternatively, you can get the location of the top left corner of the
button reasonably easily, but lower right is more difficult.

Here's finding the location of a mouse click (Firefox & IE):

<script type="text/javascript">
function sayPos(e){
e = e || window.event;
alert('X: ' + e.clientX + '\nY: ' + e.clientY);
}
</script>
<div id="divA" style="position:relative; height:100px;
border:1px solid red;"
onclick="sayPos(event);"></div>

Test thoroughly as the support for this stuff varies greatly across
different browsers.

More info? Tooltips:

<URL:http://www.walterzorn.com/tooltip/tooltip_e.htm>
Finding the coordinates of an element on a page (and lots of other
useful stuff about CSS/JavaScript/DOM/browser compatibility):

<URL:http://www.quirksmode.org/js/findpos.html>
--
Rob
Jul 23 '05 #4
umm...

I have a table and several buttons in rows like this
button1
button2
button3

and I have only 1 div,

when I click on button2, the javascript will set the div appear beside
the button.

Thanks

Jul 23 '05 #5
gl**@tollnz.co.nz wrote:
I have a table and several buttons in rows like this
button1
button2
button3
and I have only 1 div,
when I click on button2, the javascript will set the div appear beside
the button.
Thanks


This works in my IE 6, Netscape 7.2, Firefox 1.0.1. Code to detect top
of button found here:

http://www.quirksmode.org/js/findpos.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
#btnDiv{
display: none;
border: 2px solid red;
position: absolute;
padding: 0 5px 0 5px;
left: 100px;
}
input{
margin: 2px;
padding: 2px;
}
</style>
<script language="JavaScript" type="text/javascript">
function processbtnclk(objBtn){
objDiv=document.getElementById('btnDiv');
objDiv.style.top=findPosY(objBtn)+'px';
objDiv.style.display='block';
objDiv.style.visibility='visible';
}
function findPosY(obj){
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
} else if (obj.y){
curtop += obj.y;
}
return curtop;
}
</script>
</head>
<body>
<br>
<input type="button" onclick="processbtnclk(this)" value="button 1"><br>
<input type="button" onclick="processbtnclk(this)" value="button 2"><br>
<input type="button" onclick="processbtnclk(this)" value="button 3">
<div id='btnDiv'>This is the Div that moves next to the clicked button</div>
</body>
</html>
Jul 23 '05 #6
hi mscir

I tried using offsetLeft,Top, Parent
Some how I couldn't get the the div display correctly next to the first
button if I click the button more than once, the div just moved to the
right each time. Also I was visibility:visible instead of block, will
that make the difference?

Jul 23 '05 #7
gl**@tollnz.co.nz wrote:
umm...

I have a table and several buttons in rows like this
button1
button2
button3

and I have only 1 div,

when I click on button2, the javascript will set the div appear beside
the button.

Thanks

<style type="text/css">
..blah {border: 1px solid blue; width: 20em; height: 2em;
background-color: #eee;}
</style>
<script type="text/javascript">
function addDiv(x){
var id = 'c-' + x.id.split('-')[1];
var oDiv = document.createElement('DIV');
oDiv.className = 'blah';
document.createElement('DIV').appendChild(oDiv);
}
</script>
<table>
<tr>
<td>
<input type="button" value="button 1" id="b-1" onclick="
addDiv(this);">
</td><td id="c-1"></td>
</tr><tr>
<td>
<input type="button" value="button 2" id="b-2" onclick="
addDiv(this);">
</td><td id="c-2"></td>
</tr><tr>
<td>
<input type="button" value="button 3" id="b-3" onclick="
addDiv(this);">
</td><td id="c-3"></td>
</tr>
</table>
--
Rob
Jul 23 '05 #8
RobG wrote:

Ooops, cut 'n paste aint what it used to be...
function addDiv(x){
var id = 'c-' + x.id.split('-')[1];
var oDiv = document.createElement('DIV');
oDiv.className = 'blah';
document.createElement('DIV').appendChild(oDiv);
function addDiv(x){
var id = 'c-' + x.id.split('-')[1];
var oDiv = document.createElement('DIV');
oDiv.className = 'blah';
document.getElementById(id).appendChild(oDiv);
}
</script>
<table>

[...]

--
Rob
Jul 23 '05 #9
thanks rob.

Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Sudheer Kareem | last post: by
5 posts views Thread by TrvlOrm | last post: by
7 posts views Thread by Dave Hopper | last post: by
5 posts views Thread by MFC | last post: by
2 posts views Thread by Doug Slocum | last post: by
83 posts views Thread by deppy_3 | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.