Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Print and style

Reply
Thread Tools

Print and style

 
 
Michele Locati
Guest
Posts: n/a
 
      12-13-2004
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
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      12-13-2004


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/
 
Reply With Quote
 
 
 
 
Michele Locati
Guest
Posts: n/a
 
      12-14-2004
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
 
Reply With Quote
 
Martin Honnen
Guest
Posts: n/a
 
      12-14-2004


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/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
print a vs print '%s' % a vs print '%f' a David Cournapeau Python 0 12-30-2008 03:19 AM
Problem - I want to print Current Output of Pdf file and should print once.I get print dialog box but it is not working keto Java 0 05-30-2007 11:27 AM
Unlarging the print to print using PDF file to print Bun Mui Computer Support 3 09-13-2004 03:15 AM
Need help with Style conversion from Style object to Style key/value collection. Ken Varn ASP .Net Building Controls 0 04-26-2004 07:06 PM
Convert between Windows style paths and POSIX style paths Noah Python 5 07-11-2003 09:25 PM



Advertisments