Forum Moderators: not2easy

Message Too Old, No Replies

Hiding Javascript in Print version of HTML page with CSS

can I hide a 'DHTML menu builder' menu with CSS

         

dorjesempa

5:03 pm on Feb 9, 2004 (gmt 0)

10+ Year Member


Hi,

I have javascript menus created using the application DHTML menu builder in my HTML pages. There is a bunch of javascript which is in the body text of the page, which controls the menu, and which can't really be shifted to an external javascript.

What I'm wondering is, is it possible to hide this menu, (and the javascript which controls it) when my HTML document is printed?

I've managed to hide most of my navigation etc by creating a 'noprint' class. But this DHTML menu sits unwanted at the top of my pages when printed out.

Can it be done?

I've pasted the 'offending' code below this ....

many thanks in advance,

dorjesempa

<body link="#999999" vlink="#999999" alink="#999999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- DHTML Menu Builder Loader Code START -->
<div id=DMBRI style="position:absolute;"> <img src="menus/images/dmb_i.gif" name=DMBImgFiles width="1" height="1" border="0" alt=""> <img src="menus/dmb_m.gif" name=DMBJSCode width="1" height="1" border="0" alt=""> </div>
<script language="JavaScript" type="text/javascript">
var rimPath=null;var rjsPath=null;var rPath2Root=null;function InitRelCode(){var iImg;var jImg;var tObj;if(!document.layers){iImg=document.images['DMBImgFiles'];jImg=document.images['DMBJSCode'];tObj=jImg;}else{tObj=document.layers['DMBRI'];if(tObj){iImg=tObj.document.images['DMBImgFiles'];jImg=tObj.document.images['DMBJSCode'];}}if(!tObj){window.setTimeout("InitRelCode()",700);return false;}rimPath=_gp(iImg.src);rjsPath=_gp(jImg.src);rPath2Root=rjsPath+"../";return true;}function _purl(u){return xrep(xrep(u,"%%REP%%",rPath2Root),"\\","/");}function _fip(img){if(img.src.indexOf("%%REL%%")!=-1) img.src=rimPath+img.src.split("%%REL%%")[1];return img.src;}function _gp(p){return p.substr(0,p.lastIndexOf("/")+1);}function xrep(s,f,n){if(s) s=s.split(f).join(n);return s;}InitRelCode();
</script>
<script language="JavaScript" type="text/javascript">
function LoadMenus() {if(!rjsPath){window.setTimeout("LoadMenus()", 10);return false;}var navVer = navigator.appVersion;
if(navVer.substr(0,3) >= 4)
if((navigator.appName=="Netscape") && (parseInt(navigator.appVersion)==4)) {
document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'nsmenu_2.js"><\/script\>');
} else {
document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'iemenu_2.js"><\/script\>');
}return true;}LoadMenus();</script>
<!-- DHTML Menu Builder Loader Code END -->

Purple Martin

10:06 pm on Feb 9, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Have you tried applying your "noprint" class to the "DMBRI" div?

As for hiding the JavaScript from the printer, there's no need: it's already hidden by it's very nature.

dorjesempa

9:12 am on Feb 10, 2004 (gmt 0)

10+ Year Member


Hi, many thanks for your reply, and suggestion. I played around with the noprint class ... and added a new div around the larger part of the javascript code. And lo and behold the menu bar dissapears in the print version!

I wonder if I could ask a couple of follow up questions?

When the page prints, there is a large blank space now at the top of the page, where the menu used to be. Is there a way to remove this space? ...it's as if the div is hidden, rather than removed, as it were.

Secondly, what does adding a div like this around the javascript do? Other than allowing me to define this area of code as being 'noprint' .... has it altered the property of the html in any other way? Can I effectively stick a div around any unit of code, such as a table, and then manipulate the properties of the div in order to alter the properties of that which is within the div?

once again, my gratitude ...

dorjesempa

<body link="#999999" vlink="#999999" alink="#999999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><!-- DHTML Menu Builder Loader Code START -->
<div id=DMBRI style="position:absolute;">
<img src="menus/images/dmb_i.gif" name=DMBImgFiles width="1" height="1" border="0" alt="">
<img src="menus/dmb_m.gif" name=DMBJSCode width="1" height="1" border="0" alt="">
</div>
<div class="noprint">
<script language="JavaScript" type="text/javascript">
var rimPath=null;var rjsPath=null;var rPath2Root=null;function InitRelCode(){var iImg;var jImg;var tObj;if(!document.layers){iImg=document.images['DMBImgFiles'];jImg=document.images['DMBJSCode'];tObj=jImg;}else{tObj=document.layers['DMBRI'];if(tObj){iImg=tObj.document.images['DMBImgFiles'];jImg=tObj.document.images['DMBJSCode'];}}if(!tObj){window.setTimeout("InitRelCode()",700);return false;}rimPath=_gp(iImg.src);rjsPath=_gp(jImg.src);rPath2Root=rjsPath+"../";return true;}function _purl(u){return xrep(xrep(u,"%%REP%%",rPath2Root),"\\","/");}function _fip(img){if(img.src.indexOf("%%REL%%")!=-1) img.src=rimPath+img.src.split("%%REL%%")[1];return img.src;}function _gp(p){return p.substr(0,p.lastIndexOf("/")+1);}function xrep(s,f,n){if(s) s=s.split(f).join(n);return s;}InitRelCode();
</script>
<script language="JavaScript" type="text/javascript">
function LoadMenus() {if(!rjsPath){window.setTimeout("LoadMenus()", 10);return false;}var navVer = navigator.appVersion;
if(navVer.substr(0,3) >= 4)
if((navigator.appName=="Netscape") && (parseInt(navigator.appVersion)==4)) {
document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'nsmenu_2.js"><\/script\>');
} else {
document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'iemenu_2.js"><\/script\>');
}return true;}LoadMenus();</script>
</div>
<!-- DHTML Menu Builder Loader Code END -->

Purple Martin

10:47 pm on Feb 10, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



...it's as if the div is hidden, rather than removed, as it were.

Yes, that's exactly what's happened.

Is there a way to remove this space?

Yes, you can change the position of the rest of the page contents using @media print { ... } in your CSS to budge the content up a bit. Just put the new CSS position styles for the content inside the curly braces.

Can I effectively stick a div around any unit of code, such as a table, and then manipulate the properties of the div in order to alter the properties of that which is within the div?

Yes! For example, that's how people make stuff show/hide with JavaScript, that's how people position a chunk of content, that's how people make styles apply to a whole chunk of content. The stuff inside the div inherits the properties of the div (assuming there aren't overriding styles for elements inside the div). Hint: a div is a block element - if you want to do the same things with an in-line element, you can use a span in the same way.