Print and style

M

Michele Locati

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
 
M

Martin Honnen

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(ruleText));

document.getElementsByTagName('head').item(0).appendChild(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.
 
M

Michele Locati

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.toUpperCase())
continue;
oRules[k].style[styleName]=styleValue;
return(true);
}
return(false);
}
function test()
{
if(SetCSS("cssPrint","DIV#Thing","height","10cm"))
document.getElementById("layAct").innerHTML="Success.";
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
 
M

Martin Honnen

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top