Welcome to WebmasterWorld Guest from 3.227.233.55

Forum Moderators: open

Message Too Old, No Replies

Hiding and unhiding DIVS at the touch of a button

How does one do this nicely with JavaScript?

     
11:10 am on Sep 16, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 22, 2002
posts:453
votes: 0


Forgive me for this - it's probably quite straightforward but as I've still got my holiday head on (got back yesterday), I can't get to grips with it.

I've a page that contains two DIVS like so :

<div id="shown" left="23" top="79" visibility="show">Normal results</layer>
<div id="hidden" left="22" top="149" visibility="hide">Print friendly</layer>

The first DIV is visible, the second hidden. My intention is to have normal search results for the site displayed in the first DIV, with a set of duplicate (but more printer friendly) results in the second DIV.

The user will click a print button to start the ball rolling and the JavaScript will hide the first DIV, display the second, print the page, hide the second DIV and display the first again. Phew.

Hiding the first DIV, printing and showing the first DIV again I can do :

function Print()
{
document.all.shown.style.display='none';
window.print();
document.all.shown.style.display='';
}

I can't seem to get the two DIV thing to work though and the JavaScript Bible hasn't given much cause for celebration so far. Anyone know a simple(ish) way to accomplish the above?

Cheers.

R.

11:39 am on Sept 16, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 31, 2003
posts:196
votes: 0


This one works.

Also, you close a layer-tag after opening a div-tag. That's a little sloppy.


<html><body><script language="JavaScript" >
function h()
{
document.all.shown.style.display='none';
document.all.hidden.style.display='';
}
function s()
{
document.all.hidden.style.display='none';
document.all.shown.style.display='';
}
</script>
<a href='#' onClick='s()'/>Show</a>
<a href='#' onClick='h()'/>Hide</a>
<div id="shown" left="23" top="79" style="display:show">Normal results</div>
<div id="hidden" left="22" top="149" style="display:none">Print friendly</div>
</body></html>
12:26 pm on Sept 16, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 22, 2002
posts:453
votes: 0


Dude, you rock. :)

Thanks v.much!

R.

12:59 pm on Sept 16, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Watch out for browser compatibility.

DOM1: document.getElementById('LayerName').style.visibility='hidden/visible';

Pre IE5.5: document.all.layerName.style.visibility='hidden/visible';

Old NN: document.layers.layerName.visibility="hidden/visible";

HTH

1:01 pm on Sept 16, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 0


Using DOM you can use a function like this:

<script>
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
</script>

Have the div:

<div id="nameOfDiv" style="display:none">text</div>

then the switcher event:

<a href="javascript:showHide('nameOfDiv');">show layer</a>

Thats the basics you can alter for your needs. You could pass a second aurgument that is the visible you want to hide or vice versa.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members