Hi,
 I have a page with about 20 DIV's on it where each represents a category of
items selected from a table above.  I found cross-browser code to modify the
visibility of the DIV's but I need to control the display style (the
invisible DIVs would still take up significant space and I will only be
showing one DIV at a time).  The code needs to work with IE 4 and Nav 4
browsers and forward.

Thanks for any help.  Also do you have any recommendations for a good
cross-browser book/site for future reference?

can you explain why you need to control the style of elements that are
hidden?

I'm confused by that.

Atrax - MVP [Microsoft Most Valued Professional]

http://www.infinitemonkeys.ws/

Host with me for $100 a year!
http://www.atrax.ws/hosting/

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

I think you'll only need to adjust positioning of ur divs
(absolute/relative) and their z-index. That will suffice and they won't
take up any extra space. Can you elaborate a bit more perhaps with a bit
of code consisting 3/4 divs instead of 20.

HTH,
- Manish

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

I need to control the style attribute, display.  That is I need to only show
and hide the div contents but the hiddent ones must not take up any
space in the browser.  Consider this:

Line1<br>
<div id="d1">
Line 2<br>
Line 3<br>
</div>
<div id="d2">
Line 4<br>
Line 5<br>
</div>
<div id="d3">
Line 6<br>
Line 7<br>
</div>
Line 8

If I use the style attribute visibility to hide div's d1, d2, and d3 Line 8
appears 6 blank lines after Line 1.  If I use style attribute display to
hide
Line 8 it appears on the line following Line 1.  I need the later.

'The following HTML/ASP creates the categories the users choose from

<table class="tdsm" width=100% border=1 bgcolor="#FFEEDD">
<%
i=1
iDiv = 1
while not rs.eof
 if i = 1 then %><tr><%end if
 i = i + 1
 %><td class="lesmoj"><A
HREF="javascript:show('grp<%=rs("product_type")%>')"><%=rs("product_desc")%>
</A></td><%
 if i = 9 then
  i = 1
 %></tr><%end if
 rs.movenext
 iDiv = iDiv + 1
wend
%>

Then for each category I create a div containing the products for that
category

iDiv = iDiv - 1
for i = 1 to iDiv%>
 <div class="tdsm" id="grp<%=i%>"
style="display:none"><br><%=rs("product_desc")%>
  <table class="tdsm" width=100% border=1 bgcolor="#FFEEDD">
  <%
  set rsProduct = DataConn.Execute(sSQL)
  iProductCnt=1
  while not rsProduct.eof
   if iProductCnt = 1 then %><tr><%end if
   iProductCnt = iProductCnt + 1
   %><td class="lesmoj"><%=rsProduct("product_desc")%></A></td><%
   if iProductCnt = 9 then
    iProductCnt = 1
   %></tr><%end if
   rsProduct.movenext
  wend
  %>
  </table>
 </div><%
 rs.movenext
next

For clarity consider this:

Line1<br>
<div id="d1">
Line 2<br>
Line 3<br>
</div>
<div id="d2">
Line 4<br>
Line 5<br>
</div>
<div id="d3">
Line 6<br>
Line 7<br>
</div>
Line 8

If I use the style attribute visibility to hide div's d1, d2, and d3 Line 8
appears 6 blank lines after Line 1.  If I use style attribute display to
hide
Line 8 it appears on the line following Line 1.  I need the later.

you need to set the DIV's position attribute to absolute and then specify
the top/left coordinates, if you are only displaying one div at a time the
use the following

<DIV style="position:absolute; top:100; left:-1000;" id=idDiv1>

and then you can programmatically set the left attribute to wherever on your
page you will be displaying it, so when a user select category 1 you will
programmatically change left as follows

function changeCategory(category)
{
var idDiv = document.getElementByID("idDiv"+currentCat);

idDiv.style.left=-1000;

idDiv = document.getElementByID("idDiv"+category);
idDiv.style.left=100;

currentCat = category;

currentCat is a global variable that stores the category number, and
category is the passed in new category from your selection. This way with
the default set to one, when the user selects category 2 then that will be
passed into the function above and the function will hide category 1 (set
left to -1000) and show category 2 (set left to 100 or whatever you set left
to be).

Because you are using position:absolute you dont need to worry about setting
visibility or display you just set the left position of all the divs that
are not to be displayed to -1000, and this hides them off the screen and
they only appear invisible, you then set left to your value and they then
appear visible.

I hope this helps, i use this on a search engine only slightly more advanced
than i have written here. and youll need to do error checks, incase a div
doesnt exist etc.

Regards and have fun

Neil

The following code (copy and paste into a .HTM) works in NAV 4.72 and
IE 5.0 on my system.  I borrowed from several sources to get this right.
All
of the sources checked IE and NAV explicitly.  I only check NAV, in
particular
NAV layers.  I believe that after NAV 4.x layers were removed and that
document.all should work.  To get around the display style element, I wanted
each DIV to display in the same space, I used:
position:absolute;top:35px

and inserted <BR>'s to beyond the largest DIV.  The next style elements:

visibility:hide;visibility:hidden

hides the DIV's when they are first loaded.  visibility:hide is required by
NAV

while IE requires visibility:hidden.

<script>
ns4 = (document.layers)? true:false;
function show(id)

 if (ns4) document.layers[id].visibility = "show"
 else document.all[id].style.visibility = "visible"

function hide(id) {
 if (ns4) document.layers[id].visibility = "hide"
 else document.all[id].style.visibility = "hidden"
</script>

<a href="javascript:show('div1')">Show1</a> |
<a href="javascript:hide('div1')">Hide1</a> |
<a href="javascript:show('div2')">Show2</a> |
<a href="javascript:hide('div2')">Hide2</a> |
<a href="javascript:show('div3')">Show3</a> |
<a href="javascript:hide('div3')">Hide3</a>
<br>

<DIV ID="div1"
STYLE="position:absolute;top:35px;visibility:hide;visibility:hidden">
 div1
</DIV>
<DIV ID="div2"
STYLE="position:absolute;top:35px;visibility:hide;visibility:hidden">
 div2
</DIV>
<DIV ID="div3"
STYLE="position:absolute;top:35px;visibility:hide;visibility:hidden">
 div3
</DIV>
<br><br>Next Line

don't know if that works in NS,
but in IE, setting visibility = "hidden" still consumes space.
use display = "none" / "inline" instead.

what's the outcome in NS, please?

Ulrich

[snip]

Hi Shane,

Have you tried:
if (ns4) document.ids[id].visibility = "hide"

[snip]

--

remove subdomain from address when replying

I just tried the code to make sure it worked and discovered that

function show(id)

was missing a trailing '{'.  After adding it, it worked as I expected in NAV
and IE.
You are right that each of the divs occupies space.  To deal with this each
div uses
absolute positioning so that each of them occupy the same space.  The
problem with
display="none" is that once this is initially set (the divs can not be
visible on startup in
my app) NAV can not access the display property and modifying the visibility
property
does not make the div visible.

No I have not.  The code seems to be working at this point but
I'll probably encounter some situation where it will not and I'll
give this a try.  Thanks for the suggestion.