July 23, 2008 11:51pm pdt

1. hielo 119,248
2. Kravimir 88,300
3. Gertone 35,765
4. Steggs 27,950
5. b0lsc0tt 26,118
6. Xyptilon2 21,000
7. LordOfPorts 17,452
8. GreenGhost 16,875
9. mplungjan 14,310
10. dbrunton 14,100
11. Rouchie 14,000
12. jason1178 13,150
13. Roonaan 12,097
14. TName 11,500
15. mr_egyptian 11,300

1. Gertone 623,757
2. rdcpro 333,594
3. hielo 122,848
4. TName 102,130
5. Steggs 94,720
6. dualsoul 94,078
7. Kravimir 88,300
8. Zvonko 84,967
9. acperkins 80,890
10. VirusMinus 80,050
11. mplungjan 71,086
12. b1xml2 68,850
13. CEHJ 63,873
14. COBOLdin... 54,942
15. carl_tawn 54,907

11.06.2007 at 06:00AM PST, ID: 22941629

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

5.4

Calculate height of <ul>

Zones: Extensible HTML (XHTML), JavaScript, Cascading Style Sheets (CSS)

Tags: height, javascript, calculate, ul

Hi

I have two questions:
1) I would like to calculate the height of a nested unordered list and
2) then add this height as a margin above its next sibling presumably with Javascript.

Thank you.

<ul>
<li><h1>List Title1</h1>
<ul class="get-height-of-this">
<li>blah blah</li>
<li>blah blah blah</li>
</ul>
</li>
<li><h1>List Title2</h1>
<ul class="and-add-it-above-this">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>
<li>...

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: Lady_M

Solution Provided By: TName

Participating Experts: 2

Solution Grade: A

Translate:

Loading Advertisement...

Microsoft

Internet Protocols
Applications

Development
OS

Hardware
Windows Security

Apple

Operating Systems
Hardware

Programming
Networking

Software

Internet

Search Engines
File Sharing
WebTrends / Stats
Spy / Ad Blockers

Web Browsers
New Net Users
Web Development
Chat / IM

Anti Spam
Web Servers
Anti-Virus
Email Clients

Gamers

Tips
Online / MMORPG
Puzzle
Emulators

Action / Adventure
Role Playing
Consoles
Game Programming

Strategy
Sports
Misc
Computer Games

Digital Living

Hardware
Automotive
New Net Users
New Users

Software
Digital Music
Gaming World
Home Security

Apple
Networking Hardware

Virus & Spyware

Vulnerabilities
IDS
Encryption
Anti-Virus

Operating Systems Security
Software Firewalls
WebApplications
Cell Phones

Operating Systems
Internet
Hardware Firewalls

Hardware

Displays / Monitors
Handhelds / PDAs
Components
Peripherals
Laptops/Notebooks

Servers
Misc
Apple
Embedded Hardware
Networking Hardware

Storage
Desktops
New Users

Software

System Utilities
Industry Specific
Network Management
Photos / Graphics
Page Layout
VMware
Misc
Web Development

OS
CYGWIN
Voice Recognition
Virtualization
Message Queue
Quality Assurance
Security
Firewalls

MultiMedia Applications
Development
Database
Office / Productivity
Business Management
OS/2 Apps
Server Software
Internet / Email

ITPro

OS
Storage
Encryption
Operating Systems Security
Apple Hardware
Laptops & Notebooks
Servers
Networking Hardware
Peripherals
Devices

Displays / Monitors
WebTrends / Stats
Search Engines
Firewalls
Web Computing
WebApplications
IDS
Vulnerabilities
Email Clients
File Sharing

Spy / Ad Blockers
Web Browsers
Web Servers
Networking
Anti-Virus
Consulting
Chat / IM
Anti Spam

Developer

Web Servers
Web Browsers
Game Programming
Dev Tools
Industry Specific
Office / Productivity

Database
CYGWIN
Web Development
Search Engines
File Sharing
WebTrends / Stats

Programming
Content Management
Application Servers
Protocols

Storage

Removable Backup Media
Storage Technology
Servers

Grid
Remote Access
Backup / Restore

Misc
Hard Drives

Miscellaneous
Security
Development
Linux
VMware

MainFrame OS
Unix
Apple
OS / 2
AS / 400

BeOS
Microsoft
VMS / OpenVMS

Database

Oracle
Miscellaneous
MySQL
Software
Sybase
Contact Management
PostgreSQL
Data Manipulation
Clarion
InterSystems Cache

Siebel
MUMPS
OLAP
SQLBase
SAS
GIS & GPS
4GL
Berkeley DB
DB2
Informix

Interbase / Firebird
FoxPro
Reporting
LDAP
Filemaker Pro
MS SQL Server
dBase
MS Access

Security

Misc
Web Browsers
Software Firewalls
Operating Systems Security
File Sharing

Spy / Ad Blockers
Vulnerabilities
WebApplications
IDS
Anti-Virus

Encryption
Anti Spam
Email Clients
VPN
Chat / IM

Programming

Editors IDEs
Installation
Handhelds / PDAs
Multimedia Programming
System / Kernel
Automation

Algorithms
Game
Signal Processing
Project Management
Open Source
Database

Misc
Languages
Processor Platforms
Theory

Web Development

Scripting
Blogs
Web Servers
Software
Search Engines
Web Graphics
Web Services

Images
Internet Marketing
Images and Photos
Components
Document Imaging
Web Languages/Standards
Illustration

WebApplications
Fonts
WebTrends / Stats
Authoring
Digital Camera Software
Miscellaneous

Networking

Protocols
Apple Networking
Network Management
Message Queue
Application Servers
Content Management
File Servers
Email Servers
Misc
Java Editors & IDEs

Wireless
Networking Hardware
Backup / Restore
System Utilities
ISPs & Hosting
Web Servers
Storage Technology
Removable Backup Media
Servers
Web Computing

Broadband
Grid
OS / 2
Novell Netware
Unix Networking
Windows Networking
Security
Telecommunications
Operating Systems
Linux Networking

Other

Lounge
Business Travel
Community Support
New Net Users

Philosophy / Religion
Math / Science
Miscellaneous
URLs

Expert Lounge
Politics
Puzzles / Riddles
Automotive

Community Support

Suggestions
New to EE
New Topics
CleanUp

Announcements
General
Feedback

Input
EE Bugs

11.06.2007 at 06:11AM PST, ID: 20223883

starfailure:

you can give the specified <ul> an id, then do:
int x = document.getElementById('myul').offsetHeight

and similarly:
document.getElementById('nextsibling').style.height = x;

Assisted Solution

11.06.2007 at 06:11AM PST, ID: 20223889

starfailure:

posted too soon. i think it has to be:
document.getElementById('nextsibling').style.height = x + "px";

Assisted Solution

11.06.2007 at 06:15AM PST, ID: 20223925

Rank: Sage

TName:

Hi, have a look at this. Changed the class names to IDs. Just click somewhere on the body to apply the margin:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
ul{ border: 1px solid #ccc; }
</style>
<script>
function test() {
var hSrc=document.getElementById('get-height-of-this').offsetHeight;
var hTrg=document.getElementById('and-add-it-above-this').offsetHeight;
var q=hSrc-hTrg;
if (q>0)
document.getElementById('and-add-it-above-this').style.marginTop=q+'px';
}

</script>
</head>
<body onClick="test();">
<div class="wrapper">
<ul>
<li><h1>List Title1</h1>
<ul id="get-height-of-this">
<li>blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>
</li>
<li><h1>List Title2</h1>
<ul id="and-add-it-above-this">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

11.06.2007 at 06:21AM PST, ID: 20223981

Lady_M:

Thanks for all the fast answers. I will try them now and get back to you shortly.

11.06.2007 at 06:21AM PST, ID: 20223987

starfailure:

I'm sorry for my despicable comments. I sometimes don't read the questions very well when I'm at work :)
I later realized you wanted margin height. So, use TName's.
document.getElementById('and-add-it-above-this').style.marginTop = parseInt(document.getElementById('get-height-of-this').offsetHeight) + 'px'

11.06.2007 at 06:24AM PST, ID: 20224011

Lady_M:

Actually sorry I should have mentioned before:
There are 5 lists in a row and I need to get the height of the previous sibling in each case and drop the next (nested) one by the appropriate amount. So it's not a case of just calculating the height of the first one and adding it to the second.

11.06.2007 at 06:32AM PST, ID: 20224070

Rank: Sage

TName:

Ok, so you really need a very different function then...
But first, and for the record, let me post an addition to the function above: If the initial margin-top is set inline, you can add the margin-top of one of the child ULs to the final margin-top of the second one:

function test() {
var src=document.getElementById('get-height-of-this');
var trg=document.getElementById('and-add-it-above-this');
var hSrc=src.offsetHeight;
var hTrg=trg.offsetHeight;
var q=hSrc-hTrg;
if (q>0)
trg.style.marginTop=q+parseInt(src.style.marginTop)+'px';
       // or if you want to add the initial margin-top of trg to its ner margin-top,
// replace the above line with this one:
       //trg.style.marginTop=q+parseInt(trg.style.marginTop)'px';
}

11.06.2007 at 06:33AM PST, ID: 20224089

Lady_M:

This is a long list split at each <h1> level and which are floated left to create columns.

Like this:

<ul id="columnlist">
<li><h1>List Title1</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>
</li>
<li><h1>List Title2</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li><h1>List Title3</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li><h1>List Title4</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li><h1>List Title5</h1>
<ul>
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>
</ul>

11.06.2007 at 06:46AM PST, ID: 20224193

Lady_M:

Hi TNAME:
I think you might be working on a new function. This is the whole page with your function in case it's any use.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
ul#columnlist {
border:1px dotted red;
float:left;
width:auto;
list-style-type:none;
}

ul#columnlist li {
float: left;
border: 1px dotted green;
}

ul#columnlist li ul {
float: left;
border: 1px dotted blue;
clear:left;
}

ul#columnlist li ul li {
border: 1px dotted yellow;
clear:left;
}

</style>
<script>
function test() {
var src=document.getElementById('get-height-of-this');
var trg=document.getElementById('and-add-it-above-this');
var hSrc=src.offsetHeight;
var hTrg=trg.offsetHeight;
var q=hSrc-hTrg;
if (q>0)
trg.style.marginTop=q+parseInt(src.style.marginTop)+'px';
// or if you want to add the initial margin-top of trg to its ner margin-top,
// replace the above line with this one:
//trg.style.marginTop=q+parseInt(trg.style.marginTop)'px';
}

</script>
</head>
<body onClick="test();">
<ul id="columnlist">
<li><h1>List Title1</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>
</li>
<li><h1>List Title2</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li><h1>List Title3</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li><h1>List Title4</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li><h1>List Title5</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>
</ul>
</body>
</html>

11.06.2007 at 06:54AM PST, ID: 20224262

Lady_M:

Thanks starfailure, no problem. I understand what you're getting at. I'm trying to get it working.

11.06.2007 at 07:11AM PST, ID: 20224463

Rank: Sage

TName:

This is not what you want , as it will just set the height of each sibling to the offsetheight of the last sibling, but I'm afraid I'm still not sure what exactly you want to achieve. Could you elaborate a bit on "and drop the next (nested) one by the appropriate amount." ?
What should the end result look like, if not "all the same height"?

@ starfailure
Well, your document.getElementById('nextsibling').style.height seems to not have been that far off in the end...
Premonition, I guess ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
ul#columnlist {
border:1px dotted red;
float:left;
width:auto;
list-style-type:none;
}

ul#columnlist li {
float: left;
border: 1px dotted green;
}

ul#columnlist li ul {
float: left;
border: 1px dotted blue;
clear:left;
}

ul#columnlist li ul li {
border: 1px dotted yellow;
clear:left;
}

</style>
<script>
function test() {
var nd=document.getElementById('columnlist');
var currNode, lastNode=null;

for (var i=0; i<nd.childNodes.length; i++) {
if (nd.childNodes[i].tagName==='LI') {
currNode=nd.childNodes[i];
if (!lastNode) lastNode=currNode;
            if (lastNode!=currNode) {
currNode.style.height=lastNode.offsetHeight+'px';
            }
            lastNode=currNode;
       }
}
}

</script>
</head>
<body onClick="test();">
<ul id="columnlist">
<li><h1>List Title1</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>
</li>
<li><h1>List Title2</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li><h1>List Title3</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li><h1>List Title4</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li><h1>List Title5</h1>
<ul id="get-height-of-this-and-add-it-above-next-nested-list">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>
</ul>
</body>
</html>

11.06.2007 at 07:19AM PST, ID: 20224538

Rank: Sage

TName:

BTW, the reason why each LI will be a bit higher than the last one is that offsetHeight includes the border height (2x1px) and, if present, padding, and if you assign this value to the heigth attribute, the border will be added to that value again - so you could subtract the border height first (2px in this case...)

currNode.style.height=lastNode.offsetHeight-2+'px';

11.06.2007 at 07:25AM PST, ID: 20224587

Lady_M:

Okay to explain:
I want the H1s at the same height and level. But I want their nested lists to be stepped down each time. So the bottom of list 1 is level with the top of list 2. And the bottom of list 2 is level with the top of list 3. And the bottom of list 3 is level with list 4. you get the picture.

<ul id="columnlist">
<li vertically aligned to top of page><h1>List Title1</h1>
<ul name="list1" id="vertically-aligned-under-h1">
<li>blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>
</li>
<li vertically aligned to top of page><h1>List Title2</h1>
<ul name="list2" id="top-vertically-aligned-with-bottom-of-List1">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li vertically aligned to top of page><h1>List Title3</h1>
<ul name="list3" id="top-vertically-aligned-with-bottom-of-List2">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li vertically aligned to top of page><h1>List Title4</h1>
<ul name="list4" id="top-vertically-aligned-with-bottom-of-List3">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>

<li vertically aligned to top of page><h1>List Title5</h1>
<ulname="list5" id="top-vertically-aligned-with-bottom-of-List4">
<li>blah blah blah</li>
<li>blah blah</li>
</ul>
</li>
</ul>

11.06.2007 at 07:26AM PST, ID: 20224600

Lady_M:

imagine looking at a staircase from the side. except with headings above each step hanging from the ceiling.

11.06.2007 at 07:30AM PST, ID: 20224641

Lady_M:

like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" border="0">
<tr>
<td><strong>Title 1 </strong></td>
<td><strong>Title2</strong></td>
<td><strong>Title3</strong></td>
<td><strong>Title4</strong></td>
<td><strong>Title5</strong></td>
</tr>
<tr>
<td>list item </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>list item </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>list item </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>list item </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>list item </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>list item </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>list item </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>list item </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>list item </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>list item </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>list item </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>list item </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>list item </td>
</tr>
</table>

</body>
</html>

11.06.2007 at 07:37AM PST, ID: 20224683

Lady_M:

what does," tagName==='LI' "(with the 3 equals signs) mean by the way?