473,804 Members | 3,004 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to determine a postion (for a menu in a centered table)

I have a script for a menu. However, this menu uses absolute coordinates.
This menu had to be placed on a website. This website is position
(centered) using a table. How can I determine/calculate where to fix my
menuregardless the browser, slidebar width, tool etc.

Thanks

Ernst
Jul 23 '05 #1
3 1470
Ernst wrote:
I have a script for a menu. However, this menu uses absolute coordinates.
This menu had to be placed on a website. This website is position
(centered) using a table. How can I determine/calculate where to fix my
menuregardless the browser, slidebar width, tool etc.


The following functions might help. Pass a reference to your menu
element as argument. The return value will be an integer defining the
distance in pixel.

function getAbsoluteX (elm) {
var x = 0;
if (elm && typeof elm.offsetParen t != "undefined" ) {
while (elm && typeof elm.offsetLeft == "number") {
x += elm.offsetLeft;
elm = elm.offsetParen t;
}
}
return x;
}

function getAbsoluteY(el m) {
var y = 0;
if (elm && typeof elm.offsetParen t != "undefined" ) {
while (elm && typeof elm.offsetTop == "number") {
y += elm.offsetTop;
elm = elm.offsetParen t;
}
}
return y;
}

// usage:
var tableElm = document.getEle mentById("mainT able");
var x = getAbsoluteX(ta bleElm);
var y = getAbsoluteY(ta bleElm);

var menuElm = document.getEle mentById("menu" );
menuElm.style.l eft = x + "px";
menuElm.style.t op = y + "px";

Daniel
Jul 23 '05 #2
Daniel thanks for the effort.
I'm going to implement this.
Ernst wrote:
I have a script for a menu. However, this menu uses absolute coordinates.
This menu had to be placed on a website. This website is position
(centered) using a table. How can I determine/calculate where to fix my
menuregardless the browser, slidebar width, tool etc.


The following functions might help. Pass a reference to your menu
element as argument. The return value will be an integer defining the
distance in pixel.

function getAbsoluteX (elm) {
var x = 0;
if (elm && typeof elm.offsetParen t != "undefined" ) {
while (elm && typeof elm.offsetLeft == "number") {
x += elm.offsetLeft;
elm = elm.offsetParen t;
}
}
return x;
}

function getAbsoluteY(el m) {
var y = 0;
if (elm && typeof elm.offsetParen t != "undefined" ) {
while (elm && typeof elm.offsetTop == "number") {
y += elm.offsetTop;
elm = elm.offsetParen t;
}
}
return y;
}

// usage:
var tableElm = document.getEle mentById("mainT able");
var x = getAbsoluteX(ta bleElm);
var y = getAbsoluteY(ta bleElm);

var menuElm = document.getEle mentById("menu" );
menuElm.style.l eft = x + "px";
menuElm.style.t op = y + "px";


Jul 23 '05 #3
Ernst wrote:
I have a script for a menu. However, this menu uses absolute coordinates. This menu had to be placed on a website. This website is position
(centered) using a table. How can I determine/calculate where to fix my menuregardless the browser, slidebar width, tool etc.


Why use JavaScript for layout? That what CSS was created for.
Programming your layout should always be a last resort.

You can *relatively* position an absolutely positioned element (place it
in a relationship with another element) by wrapping both in a relatively
positioned 'container' and adjusting the coordinates (left: / top:).
Absolutely positioned elements get their positioning context (x, y) from
their next outer containing element, if that element is itself
positioned, or the body/html element if none is positioned (depending on
doctype). Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled </title>
<style type="text/css">

html, body {
height: 100%;
margin: 0;
background: buttonface;
}
div#container {
position: relative;
width: 722px;
height: 100%;
margin: 0 auto;
}
div#menu {
position: absolute;
left: 4px;
top: 2px;
width: 100px;
height: 200px;
border: 3px white groove;
background: crimson;
overflow: hidden;
}
div#menu hr {
height: 8px;width:90%;
}
table#content {
width: 720px;
height: 100%;
border-right: 1px black dashed;
border-left: 1px black dashed;
background: pink;
}
td {
width: 50%;
height: 102px;
}

</style>
<script type="text/javascript">
//<![CDATA[

//]]>
</script>
</head>
<body>
<div id="container" >
<div id="menu">
<hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr />
</div>
<table id="content">
<tbody>
<tr>
<td></td>
</tr><tr>
<td></td>
</tr>
<tbody>
</table>
</div>
</body>
</html>

Just a demo, your mileage may vary depending on that doctype.

http://www.brainjar.com/css/positioning/default.asp

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #4

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

Similar topics

2
1265
by: Steve K | last post by:
HI, Can anyone figure out why the words in my menu bar hang out near the very top of the red bar in Mozilla? http://aem.cornell.edu/business_test_site/overview/ http://aem.cornell.edu/business_test_site/site_styles.css The words should be vertically centered. They are correct in Safari and
18
2892
by: Christopher W. Douglas | last post by:
I am writing a VB.NET application in Visual Studio 2003. I have written a method that handles several events, such as closing a form and changing the visible status of a form. I have some code that applies to all these events, but I need to have specific code execute when the form closes. The properties for this method are sender (the originator) and e (event arguments). I know how to get typeof (sender) to determine what form or...
0
1253
by: Fred Lock | last post by:
Does anyone know how to make the following centered floated "unknown width" menu into a fully-fledged single-level drop menu? (as copied from http://www.cssplay.co.uk/menus/centered.html): #menu2 { display:table; padding:0; margin:0 auto; list-style-type:none; white-space:nowrap;
2
1534
by: jayson_13 | last post by:
Hi, I have a menu screen and i want to store the menus in a table. Is the a way that i can load the form according to the menu user has selected? Eg: Menu =================
40
2998
by: Jeff | last post by:
I have a system on a network and want to determine if anyone is currently connected to the back-end files. An interesting twist is that I have noticed that some users can be connected (have the front end open at the first form) and even though this links to the back-end files, there are no ldb files created. This is so I know when it is safe to compact the back-end files without going round to make sure everyone is logged off. User...
2
2772
by: duzhidian | last post by:
Hello: Many books talk about how to the layout of html using the following sequence: wrapper menu bar (short and not long enough to expand the whole wrapper) left sidebar right sidebar main content
4
1261
by: Doug | last post by:
Hi I am using a form in an application that i have attached to the context menu using a program called right click configurator. The position of the applicaiton when called through the context menu is important. Is it possible for a form's load position to be made relative to the context menu? I see that there are several options such as center, and windows default, but I would like to be able to have more control over the initial...
5
2304
by: totalstranger | last post by:
I'm working on a lightweight, auto width, auto centered, one level drop down menu. It's working in FF, IE7 and Safari (all windows versions on my local system), however it fails in Opera. Can someone please take a look at this and give some suggestions. http://www.arnb.org/testmenu.html Thank you
2
2803
by: Jeff | last post by:
hi asp.net 2.0 I wan thte menu to be horizontally centered on the webpage, but I want the submenuitems to left aligned. So I created a table cell with HorizontalAlign set to Center. With this option set the menu was horizontaly centered as I wanted, except that also submenuitems was centered too (not what I wanted). So then I tryed to add a extra div around the menu (<div style="text-align:left; margin-left:auto;
0
9706
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
10569
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10315
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
10075
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9140
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
7615
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
6847
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
5519
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...
3
2990
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.