Forum Moderators: open
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.
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>
Thanks v.much!
R.
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
<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.
