Use CSS to hide the effects of javascripts

[fawkes]

Is it possible to hide the effects of javascripts using stylesheets?

For example, in screen mode an advert appears that doesn't need to be there during print mode.

Can I use

script{display:none;}

or will this not work?

 

[BillyRayPreachersSon]

You can use CSS to hide things from printing that appear on the screen, yes.

To give a more exact answer, you'd need to provide more details, however.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[fawkes]

The page calls a javascript on somebody elses site that shows an image on the screen for advertising, I have no control over the script so I don't know what it does exactly but an image appears on the page.

What I want to do is hide that image on printing.

I will try just using img{display:none;} as I don't have any images on my site and if I do add images I could give them a class such as myimg{display:block;}

What I wanted was to know if I could use the script tag to set the display attribute for everything that is produced by the enclosed script.

 

[manarth]

No. anything produced by JavaScript is as much on the page as anything in the HTML. To the DOM, there is no difference.

Make the script produce the image between your defined set of tags: e.g.

<div class="advert">
  <script type="text/javascript" src="foo.js"> </script>
</div>

You can now manipulate it using [tt]div.advert {display: none;}[/tt]

<marc>
New to Tek-Tips? Get better answers - faq581-3339

 

[BillyRayPreachersSon]

While you can use Javascript to programatically hide things, I would say that in this case you would be better off using just CSS as you've shown.

Even better, if the script from <unknown site> inserts its elements in a known container (such as a DIV element with an ID), you could restrict the hiding of images to that container only:

<style type="text/css" media="print">
   div#someId img {
      display: none;
   }
</style>

or even better, remove their whole ad:

<style type="text/css" media="print">
   div#someId {
      display: none;
   }
</style>

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]