473,795 Members | 2,967 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 6220
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.getEle mentById('div') .style.visibili ty = '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="JavaS cript" type="text/javascript">
function processbtnclk(o bjBtn){
objDiv=document .getElementById ('btnDiv');
objDiv.style.to p=findPosY(objB tn)+'px';
objDiv.style.di splay='block';
objDiv.style.vi sibility='visib le';
}
function findPosY(obj){
var curtop = 0;
if (obj.offsetPare nt) {
while (obj.offsetPare nt) {
curtop += obj.offsetTop;
obj = obj.offsetParen t;
}
} else if (obj.y){
curtop += obj.y;
}
return curtop;
}
</script>
</head>
<body>
<br>
<input type="button" onclick="proces sbtnclk(this)" value="button 1"><br>
<input type="button" onclick="proces sbtnclk(this)" value="button 2"><br>
<input type="button" onclick="proces sbtnclk(this)" value="button 3">
<div id='btnDiv'>Thi s 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:visi ble 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.create Element('DIV');
oDiv.className = 'blah';
document.create Element('DIV'). appendChild(oDi v);
}
</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.create Element('DIV');
oDiv.className = 'blah';
document.create Element('DIV'). appendChild(oDi v);
function addDiv(x){
var id = 'c-' + x.id.split('-')[1];
var oDiv = document.create Element('DIV');
oDiv.className = 'blah';
document.getEle mentById(id).ap pendChild(oDiv) ;
}
</script>
<table>

[...]

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

Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
6487
by: Sudheer Kareem | last post by:
Dear All Please tell me how to assosiate help files with my Vb.net Project. Regards Sudheer
5
2066
by: TrvlOrm | last post by:
HI There, I have been struggling with JavaScript code for days now, and this is my last resort! Please help... I am trying to create a JavaScript slide show with links for Next Slide, Previous Slide and Home Slide. Is it possible for you to view my page and tell me what I am doing wrong. I have looked at this page for hours and can't figure it out, I
7
2582
by: Dave Hopper | last post by:
Hi I posted a question recently regarding problems I am having getting a value from a list box to use in a query. I got a lot of help, for which I thank you and it's nearly working! But I need a little more help on one more point. This is what i've got. I have code that hunts for updated appointments in a public folder based on the order that happens to be open (code fires on an on open event) This works fine and updates my
5
2394
by: MFC | last post by:
Ok, after three C# books, (C# How to Program, Programming in the Key of C#, and C# Weekend Crash Course) and three weeks, I believe I have tried everything to make a certain form function correctly. I am trying to learn C# after playing around for a bit with procedural programming with PHP, not OOP, and believe I have learned quite a bit in three weeks, just not enough to accomplish this one task. If anyone has a bit of free time and...
2
1808
by: Doug Slocum | last post by:
Hi, I'm using ASP.NET. I need help adding new buttons to my web page at run time on the server side prior to sending to the client. As the web form is loading, I won't know in advance how many buttons I'll need or the properties for each until I read a database. For each new button, I need to assign the text, name ('id' for later reference), and set the code-behind to handle the events for each. I hope I'm clear. Could someone suggest...
13
4337
by: Joner | last post by:
Hello, I'm having trouble with a little programme of mine where I connect to an access database. It seems to connect fine, and disconnect fine, but then after it won't reconnect, I get the error "operation is not allowed when object is open" so I take out the line of code: BookDetails.Connection1.Open and it comes up with the error "operation is not allowed when object
83
7879
by: deppy_3 | last post by:
Hi.I am started learning Programm language C before some time.I am trying to make a programm about a very simple "sell shop".This programm hasn't got any compile problem but when i run it i face some other ploblems which i can not correct.I would appreciated if someone take a look at my programm so as to help me.I tried many times to find out where my mistakes are but i didn't manage something. I have made some comments due to the programm...
0
5577
by: gunimpi | last post by:
http://www.vbforums.com/showthread.php?p=2745431#post2745431 ******************************************************** VB6 OR VBA & Webbrowser DOM Tiny $50 Mini Project Programmer help wanted ******************************************************** For this teeny job, please refer to: http://feeds.reddit.com/feed/8fu/?o=25
1
2464
by: ebernedo | last post by:
Hey guys, I have two main questions First off (pictures are kind of blurry) I have this table http://i197.photobucket.com/albums/aa109/ebernedo/DiscTable.jpg And thats my database I use my Form on I created a search form: http://i197.photobucket.com/albums/aa109/ebernedo/DiscSearchForm.jpg
7
5341
helpwithcode
by: helpwithcode | last post by:
Hi people, I am just learning java.I have been creating a project which involves JDBC Connectivity.I find that the statements, String string_dob=text_dob.getText(); //Converting string to date System.out.println(string_dob); s.Info_DOB=Date.valueOf(string_dob); runs perfectly fine in the method insert() and throws up an illegal Exception in the method UPDATE.This is the error I get when I pass a date "1979-05-02"
0
9672
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10213
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10163
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9040
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7538
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6780
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5436
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5563
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2920
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.