Hiding/Showing a DIV from IE and Nav 
Author Message
 Hiding/Showing a DIV from IE and Nav

 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?



Sat, 28 Aug 2004 14:14:47 GMT  
 Hiding/Showing a DIV from IE and Nav
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!



Sat, 28 Aug 2004 14:31:32 GMT  
 Hiding/Showing a DIV from IE and Nav
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!



Sat, 28 Aug 2004 17:59:37 GMT  
 Hiding/Showing a DIV from IE and Nav
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.

Quote:

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

> I'm confused by that.



Sat, 28 Aug 2004 22:28:17 GMT  
 Hiding/Showing a DIV from IE and Nav
'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.


Quote:
> 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.



Sat, 28 Aug 2004 22:41:30 GMT  
 Hiding/Showing a DIV from IE and Nav
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;

Quote:
}

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

Quote:
> 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?



Sun, 29 Aug 2004 00:58:55 GMT  
 Hiding/Showing a DIV from IE and Nav


Fri, 19 Jun 1992 00:00:00 GMT  
 Hiding/Showing a DIV from IE and Nav
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"

Quote:
}

function hide(id) {
 if (ns4) document.layers[id].visibility = "hide"
 else document.all[id].style.visibility = "hidden"
Quote:
}

</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



Sun, 29 Aug 2004 01:23:56 GMT  
 Hiding/Showing a DIV from IE and Nav
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


Quote:
> 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



Sun, 29 Aug 2004 05:24:16 GMT  
 Hiding/Showing a DIV from IE and Nav

[snip]

Quote:
> <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"

Hi Shane,

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

[snip]

--

remove subdomain from address when replying



Sun, 29 Aug 2004 05:24:18 GMT  
 Hiding/Showing a DIV from IE and Nav
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.


Quote:
> 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?



Sun, 29 Aug 2004 11:06:22 GMT  
 Hiding/Showing a DIV from IE and Nav
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.


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



Sun, 29 Aug 2004 11:11:37 GMT  
 
 [ 12 post ] 

 Relevant Pages 

1. show/hide div

2. Show/Hide only works in IE

3. Using DHTML to dynamically change NAV bar - Show/ Hide Layers & outer(inner)HTML

4. Can I use z-Index to show a DIV in front of an Applet

5. DIV not showing over combo

6. top anf left Div tag style properties not showing as expected

7. Div does not show.....

8. Netscape 6 problem when trying to make visible/hidden complex DIV objects

9. ow to hide a group of div with the same name and ID

10. JavaScript works in IE and later versions of Nav, but not Nav 4.79 (long as it includes an entire page)

11. onClicks to show hidden/visible problems in NetScape

12. Need help with script to show a hidden text box if a check box is checked

 

 
Powered by phpBB® Forum Software