I've got a <span id=name> on a page, and I want to dynamically set the visibility of it
Normally I do something lik
var blk = ...get span...
blk.style.display='none';
Now, I've got a <span> that I want to remain visible on the screen, but (dynamically) be able to make invisible on print-outs.
For statically print-invisible blocks, I use a stylesheet:
@media print {
.doprint { display:inline; }
.noprint { display:none; }
}
@media screen {
.doprint { display:none; }
.noprint { display:inline; }
}
and the I just tag the blocks in question with
<span class=noprint>...</span>
Now, I want to get this "noprint" behaviour on a block, dynamically. The span block may have classes already, so I'd hope for a way to set the "display:none for media=print" attribute separately, not using the class definitions?
Any ideas?
/Stefan Lennerbrant
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
No, not really. It is IE only (more or less) but I'd like to change as little as possible in the current html layout.
Most optimal would be to just set an attribute that permanently sets the block to "invisible during print" -- some kind of equivalent to: style.display[media=print]
Is it not possible to access media "blocks" dynamically? I haven't found anything on MSDN yet...
Does this help:
http://www.onlinetools.org
There seems to be a function which allows you to add classes to the class="" bit of your blocks...
I'm probably missing the point of the problem here though ;-)
*blush*
Tim
>If you want to make it invisible when printing, what does it matter if it already has classes???
Because it is still visible on screen. If I'd replaced the current class with my "noprint" class then it wouldn't print but it also would loose all the current class properties (visible on screen)
I've been searching and reading, and as far as I can tell it's not possible to dynamically access the specific media styles? Is this really so?
For instance, what happens when I do this, below?
The font-size for screen display is 60 and for printing, it's 40. The "default" setting is 20px.
When loading at the page, the "test" text is displayed at 60px. Printing it gives a 40px print-out. The 20px size is not used at all. Ok, that seems reasonable.
Now, using the javascript links to set specific sizes, the new size affects both screen display and print-out display. Seems fair...
However, I'm looking for a way to change only the print-out 40px setting -- not affecting the screen 60px setting.
Is this really not possible?
Try out the following, below:
<html>
<head>
<style>
body { font-size:20px; }
@media print {
body { font-size:40px; }
}
@media screen {
body { font-size:60px; }
}
</style>
</head>
<body>
<span id=test>
Testing...
</span>
<br>
<br>
<span style="font-size:20px">Com
<span style="font-size:40px">Com
<span style="font-size:60px">Com
<script>
function setsize(sz)
{
document.getElementById('t
}
</script>
<a href="javascript:setsize(2
<a href="javascript:setsize(4
<a href="javascript:setsize(6
</body>
Nope.
This is one single page and it has to look one way on the screen and another way when printing using the browser Ctrl+P
Right now I fixed it by adding " noprint" (leading space) to the class name of the block in question, using the
http://www.onlinetools.org
method as noted by TimYates.
This is not the answer to the question, but it is a solution to the problem.
I'd be happy to find a way to modify a specific media version of a style, but pragmatically the class method seems to work.
It really seems odd that no information is avilable (and no one is complaining; am I missing something here?) regarding how to dynamically (js) change styles on specific media "variants" of the style object.
However, adding the "noprint" class to the span in question, solved the immediate problem. Thanks for the tip.
If anyone ever comes up with a way to change the "display" (or "fontSize" or other) property of the "print media" style, not affecting the "screen media" version, it would be very interesting to find out how it's done...
Thanks
/Stefan Lennerbrant
The styles.html page was interesting, but addressed the problem when having mixed stylesheet and inline settings, and wanting a general solution to set a style on several elements without having to bother about which one (stylesheet or inline) that needs to be changed.
No provisions at all were made to handle the different media style settings.
This really seems to be an area held in total darkness:-)
/Stefan Lennerbrant
Hmm... Try this:
<style media="print">
body { font-size:40px; }
}
</style>
<style media="screen">
body { font-size:60px; }
}
</style>
<a href="#"
onClick="t=''; x = document.styleSheets[0].ru
for (i in x) t += '<br>'+i+':'+document.styl
document.getElementById('s
document.styleSheets[0].ru
return false">document.styleSheet
<div id="show"></div>
Well, the "looping/examination" of the style sheet works both when separating the media styles into two different sheets, and with my original combined stylesheet with @media.
With a combined stylesheet, the rules are just put in order, such that
<style>
body { font-size:20px; }
@media print {
body { font-size:40px; }
td { font-size:41px; }
}
@media screen {
body { font-size:60px; }
td { font-size:61px; }
}
</style>
results in stylesheet[0].rules[0] = body/20px, rules[1] = body/40px, rules[2] = td/41px, rules[3]=body/60px and rules[4]=td/61px
No mentioning of media settings anywhere.
Not even when separating them into two stylesheets (with the media="xxx" element), there seems to be a way to query the stylesheet of its media type -- and even less so when using one single stylesheet such that the individual rules has got a media type.
Still, however, the original question regards how to change the inline style of a <span>, such that only one "media variant" is changed (i.e. "print"), keeping the other (i.e. "screen") intact.
I'm still in the dark:-)
As I suggested before, use the link tag:
<link rel="alternate" href="yourpage.html?printa
So in your code you can simply do
<script>
isPrinting=location.search
spans = document.getElementsByTagN
for (i=0;i<spans.length;i++) if (spans[i].className=='nopr
</script>
But that requires a page reload to print, right?
The case is that I have one single page (one single page load). It is shown on the screen and by using Ctrl+P it is printed.
However, the "page" may want to change its print (and print only) style layout using javascript, regarding one single <span> element.
I do understand correctly, that your suggestion requires a page reload?
Business Accounts
Answer for Membership
by: monolith_888Posted on 2006-03-07 at 08:17:11ID: 16124670
Is this IE only? If so, you can take advantage of the onbeforeprint() and onafterprint() functionality:
///////////////////////// START //////////////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>Print</title>
<script language="Javascript">
function switchStuff(status)
{
var spans = document.getElementsByTagN
for(var i=0; i<spans.length; i++)
{
if(spans[i].className == 'noprint')
spans[i].style.display = (status == 'hide') ? 'none' : 'inline';
}
}
</script>
</head>
<body onbeforeprint="switchStuff
<span id="filler"> hi </span>
<span id="filler" class='noprint'> foo </span>
<span id="filler"> bar </span>
</body>
</html>
///////////////////////// END //////////////////////////
-monoith