By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,656 Members | 1,327 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,656 IT Pros & Developers. It's quick & easy.

Print and style

P: n/a
Hi to everybody

I've a little problem that I can't solve. An hour of Google search
didn't help.

I should set dinamically via JavaScript the height of an object when I
print the HTML page.

I already know that it would be possible with the stylesheets,
specifying media="print" as in the following example:

<STYLE type="text/css" media="print">
DIV#Thing
{
height:3cm;
}
</STYLE>
....
<DIV id="Thing">Hello!</DIV>

But I'm not able to set the height with JavaScript only for prints: if I
use a script like this

<SCRIPT type="text/javascript" language="javascript">
function SetHeight(h)
{
var p;
p=document.getElementById("Thing");
p.style.height=h+"cm";
}
</SCRIPT>

The code resizes "Thing" at screen too, but I'd like to do that only for
prints.

I could use a CSS with every height:

<STYLE type="text/css" media="print">
..Height1
{
height:1cm;
}
..Height2
{
height:2cm;
}
..Height3
{
height:3cm;
}
/* Etc... */
</STYLE>

along with a function like this:

<SCRIPT type="text/javascript" language="javascript">
function SetHeight(h)
{
var p;
p=document.getElementById("Thing");
p.className="Height"+h;
}
</SCRIPT>

But:
1) it is quite long to do and not very clever
2) I should write a huge number of classes, since the height could range
from 0.1cm to 100cm
I tried also with the events onbeforeprint and onafterprint: I set the
height of Thing when onbeforeprint raises, and I reset it when
onafterprint is called. This works great with Internet Explorer (tried
with IE6), but with Firefox 1.0 and Opera v7.23 the two events aren't
being called.

Does anybody could help me?

Thank you
Michele
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a


Michele Locati wrote:

I should set dinamically via JavaScript the height of an object when I
print the HTML page.

I already know that it would be possible with the stylesheets,
specifying media="print" as in the following example:

<STYLE type="text/css" media="print">
DIV#Thing
{
height:3cm;
}
</STYLE>
...
<DIV id="Thing">Hello!</DIV>

But I'm not able to set the height with JavaScript only for prints:


You have pretty much summed up the options which are there, the only
thing left to do is to create the <style> element with script
dynamically, that is a way that works with Mozilla and with Opera (at
least with the 7.5x versions, I am not sure about earlier versions):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>adding style rules</title>
<script type="text/javascript">
function addPrintRule (selector, definitions) {
var styleElement;
if (document.createElement && (styleElement =
document.createElement('style'))) {
styleElement.type = 'text/css';
styleElement.media = 'print';
var ruleText = selector + ' { ' + definitions + ' } ';
styleElement.appendChild(document.createTextNode(r uleText));

document.getElementsByTagName('head').item(0).appe ndChild(styleElement);
}
}
</script>
<script type="text/javascript">
function setPrintHeight (elementId, height) {
addPrintRule('#' + elementId, 'height: ' + height + '; ');
}
</script>
<style type="text/css" media="all">
p#p1 {
border: 1px solid green;
}
</style>
</head>
<body>
<p id="p1">
Kibology for all. All for Kibology.
</p>
<form action="">
<div>
<label>
height
<input type="text" name="height">
in cm
</label>
<input type="button" value="set height for printing"
onclick="var heightToSet = Number(this.form.elements.height.value);
if (heightToSet) {
setPrintHeight('p1', heightToSet + 'cm');
}">
</div>
</form>
</body>
</html>

That approach however then causes a problem with IE/Win as that doesn't
like the appendChild call on the <style> element so you might need to
use try/catch to catch the error and then try some IE way of adding
style rules to a stylesheet.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2

P: n/a
Thank you Martin!

I solved the problem of setting the height of an object only on prints
thanks to some italian people (it.comp.lang.javascript). Here's the
solution:

<HTML><HEAD>
<STYLE type="text/css" media="print" id="cssPrint">
DIV#Thing
{
height:0.7cm;
}
DIV#layAct
{
display:none;
}
</STYLE>
<STYLE type="text/css" media="all">
DIV#Thing
{
border:1px solid black;
}
</STYLE>
<SCRIPT type="text/javascript" language="javascript">
function SetCSS(cssId, selectorName,styleName, styleValue)
{
var oCSS, oRules, k;

if(!document["getElementById"]) return(false);
if(!(oCSS=document.getElementById(cssId))) return(false);
if(oCSS["styleSheet"])
oRules=oCSS.styleSheet.rules;
else if(oCSS["sheet"])
oRules=oCSS.sheet.cssRules;
else
return(false);
for(k=0; k<oRules.length; k++)
{
if(oRules[k].selectorText.toUpperCase()!=selectorName.toUpperC ase())
continue;
oRules[k].style[styleName]=styleValue;
return(true);
}
return(false);
}
function test()
{
if(SetCSS("cssPrint","DIV#Thing","height","10cm"))
document.getElementById("layAct").innerHTML="Succe ss.";
else
alert("Error!");
}
</SCRIPT>
</HEAD><BODY>
<DIV id="Thing">Thing</DIV>
<DIV id="layAct"><A href="#" onclick="test();return(false)">
Modify print height</A></DIV>
</BODY></HTML>

It works on Internet Explorer (tested with v6.0) and Firefox (tested
with v1.0).

Thank you
Michele
Jul 23 '05 #3

P: n/a


Michele Locati wrote:

I solved the problem of setting the height of an object only on prints
thanks to some italian people (it.comp.lang.javascript). Here's the
solution: if(oCSS["styleSheet"]) oRules=oCSS.styleSheet.rules;
else if(oCSS["sheet"])
oRules=oCSS.sheet.cssRules; It works on Internet Explorer (tested with v6.0) and Firefox (tested
with v1.0).


Yes, that (using document.styleSheets) is certainly the right way to do
it if you don't need Opera but your original post asked for Opera too
that is why I posted the example creating a new <style> element.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.