HTML Programming
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > HTML Programming
Reload this Page

NS problems - changing style to absolute

Discuss NS problems - changing style to absolute in the HTML Programming forum on Dev Shed.
NS problems - changing style to absolute HTML Programming forum covering discussions of HTML and XHTML, as well as HTML-related issues such as writing W3C Compliant code. Use HyperText Markup Language for building websites.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old October 23rd, 2000, 01:10 AM
mab mab is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2000
Posts: 4 mab User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Hi, I'm trying to do an expandable menu. yes there are billions of different ways of doing it out there, but I need it to be as fail-safe as possible. So I've chosen to use divs within a table. They start out open and are then closed (so the scriptless will still be able to see the lot).

It's the standard story: I have some code that works completely in IE and almost completely in NS.

I'm using relatively posn'd divs that I then hide by making them hidden and absolute (so the rest of the table contracts around them). This works fine in IE, but I can't find an equivalent way of doing this in NS.

I also don't want to absolutely position the parent divs - this doesn't fail-safe. This rules out using clipping to make them close up.

I can't think of any other way of doing it nicely, however.

One of the other very important things is for the html to load very quickly. The code I have below is very small for this sort of functionality and I'd like to keep it that way if at all possible.

Please help URL

code below (ignore the img swapping stuff):

<html>
<head>
<title>Hacking out a working expandable menu</title>


<style type="text/css">

.closed {position:absolute;
width: 170px;
z-index: 1;
visibility : hidden;
}

.open {position:relative;
left: 0px;
top: 0px;
width: 170px;
z-index: 100;
visibility : visible;
}

td.OnMouseOver{
background-color: #444444
}

</style>


<!-- ******************************************
***** Begin Expandable menu script
******************************************** -->

<script language="javascript">
<!-- hide me


//*******************************************
//** This section tests for netscape vs ie and sets variables
//** dependant on browser type.
//*******************************************

if (document.layers) {
visible = 'show';
hidden = 'hide';
} else if (document.all) {
visible = 'visible';
hidden = 'hidden';
}


function reveal(menu) {
if (daMenu.visibility == visible) {
if (document.layers) {
daMenu = document.layers[menu];
daMenu.position = 'absolute';
} else if (document.all) {
daMenu = document.all(menu).style;
daMenu.position = 'absolute';
}
daMenu.visibility = hidden;
} else {
if (document.layers) {
daMenu = document.layers[menu];
} else if (document.all) {
daMenu = document.all(menu).style;
daMenu.position = 'relative';
}
daMenu.visibility = visible;
}
lastMenu = daMenu;
}

function hide(menu) {
if (document.layers) {
daMenu = document.layers[menu];
} else if (document.all) {
daMenu = document.all(menu).style;
}
daMenu.visibility = hidden;
daMenu.position = 'absolute';

}

// show me -->
</script>


<!-- ******************************************
***** End Expandable menu script
******************************************** -->

<!-- ******************************************
***** Begin rollover-controlling script
******************************************** -->


<script language="javascript">
<!-- hide me

if ( document.images ) {
var normImgs = new Array();
var rollImgs = new Array();
}
function loadImgs() {
if ( document.images && normImgs) {
var newImgURLs = loadImgs.arguments;
var i = normImgs.length; var j = 0;
while ( j < newImgURLs.length ) {
normImgs[i] = new Image; normImgs[i].src = newImgURLs[j];
rollImgs[i] = new Image; rollImgs[i].src = newImgURLs[j+1];
i++; j+=2;
}
}
}
function swapImg(imgName, imgIX, imgState) {
if ( document.images && document.images[imgName] && rollImgs && normImgs && rollImgs[imgIX] && normImgs[imgIX] ) {
if ( imgState == 1 ) { document.images[imgName].src = rollImgs[imgIX].src; }
else { document.images[imgName].src = normImgs[imgIX].src; }
}
}

// show me -->
</script>

<!-- ******************************************
***** End rollover script
******************************************** -->


</head>
<body>
<table cellpadding=0 cellspacing=0 border=0 width=170>
<tr>
<td><a href="[Docurl]"
onMouseOver="swapImg('Nav_TheFund_norm.gif', 0, 1); reveal('TheFund');"
onMouseOut="swapImg('Nav_TheFund_norm.gif', 0, 0);">
<img src="images/Nav_TheFund_norm.gif" width=170 height=30 border=0 name="Nav_TheFund_norm.gif">
</a>
</td>
</tr>
<tr>
<td>
<div id="TheFund" class="open">
<table cellpadding=0 cellspacing=0 border=0>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Description</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Investment Philosophy</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Focus of the fund</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Investment sectors</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Investment size</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Description of investors</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Target ownership levels</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Staff bios</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td><a href="[Docurl]"
onMouseOver="swapImg('Nav_TheFundPortfolio_norm.gif', 1, 1); reveal('TheFundPortfolio');"
onMouseOut="swapImg('Nav_TheFundPortfolio_norm.gif', 1, 0)">
<img src="images/Nav_TheFundPortfolio_norm.gif" width=170 height=30 border=0 name="Nav_TheFundPortfolio_norm.gif">
</a>
</td>
</tr>
<tr>
<td>
<div id="TheFundPortfolio" class="open">
<table cellpadding=0 cellspacing=0 border=0>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Description</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Investment Philosophy</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Target ownership levels</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
<tr bgcolor=#BBBBBB>
<td> <a href="[Docurl]">Staff bios</a></td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=1><img src="images/1pixel.gif" height=1 width=170></td>
</tr>
</table>
</div> </td>
</tr>
<tr>
<td><a href="[Docurl]"
onMouseOver="swapImg('Nav_LookingForFunds_norm.gif', 2, 1)"
onMouseOut="swapImg('Nav_LookingForFunds_norm.gif', 2, 0)">
<img src="images/Nav_LookingForFunds_norm.gif" width=170 height=30 border=0 name="Nav_LookingForFunds_norm.gif">
</a>
</td>
</tr>
<tr>
<td>
<div>
</div>
</td>
</tr>
<tr>
<td><a href="[Docurl]"
onMouseOver="swapImg('Nav_InTheMedia_norm.gif', 3, 1)"
onMouseOut="swapImg('Nav_InTheMedia_norm.gif', 3, 0)">
<img src="images/Nav_InTheMedia_norm.gif" width=170 height=30 border=0 name="Nav_InTheMedia_norm.gif">
</a>
</td>
</tr>
<tr>
<td>
<div>
</div>
</td>
</tr>
<tr>
<td><a href="[Docurl]"
onMouseOver="swapImg('Nav_Investors_norm.gif', 4, 1)"
onMouseOut="swapImg('Nav_Investors_norm.gif', 4, 0)">
<img src="images/Nav_Investors_norm.gif" width=170 height=30 border=0 name="Nav_Investors_norm.gif">
</a>
</td>
</tr>
<tr>
<td>
<div>
</div>
</td>
</tr>
<tr>
<td><a href="[Docurl]"
onMouseOver="swapImg('Nav_Investees_norm.gif', 5, 1)"
onMouseOut="swapImg('Nav_Investees_norm.gif', 5, 0)">
<img src="images/Nav_Investees_norm.gif" width=170 height=30 border=0 name="Nav_Investees_norm.gif">
</a>
</td>
</tr>
<tr>
<td>
<div>
</div>
</td>
</tr>
</table>


<!-- ******************************************
***** Begin rollover-controlling script
******************************************** -->


<script language="Javascript">
<!-- hide me

loadImgs("images/Nav_TheFund_norm.gif", "images/Nav_TheFund_Roll.gif",
"images/Nav_TheFundPortfolio_norm.gif", "images/Nav_TheFundPortfolio_Roll.gif",
"images/Nav_LookingForFunds_norm.gif", "images/Nav_LookingForFunds_Roll.gif",
"images/Nav_InTheMedia_norm.gif", "images/Nav_InTheMedia_Roll.gif",
"images/Nav_Investors_norm.gif", "images/Nav_Investors_Roll.gif",
"images/Nav_Investees_norm.gif", "images/Nav_Investees_Roll.gif")

//show me -->
</script>

<!-- ******************************************
***** End rollover script
******************************************** -->


<!-- ******************************************
***** Begin menu-contracting script
******************************************** -->


<script language="Javascript">
<!-- hide me

//*******************************************
//** This section closes all the menus at startup.
//** The menus start open - in this way, people with no script
//** will still be able to see the menus.
//*******************************************


hide('TheFund');
hide('TheFundPortfolio');

//show me -->
</script>

<!-- ******************************************
***** End menu-contracting script
******************************************** -->


</body>
</html>



[This message has been edited by mab (edited October 23, 2000).]
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > HTML Programming > NS problems - changing style to absolute

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway.