473,387 Members | 1,925 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Print and style

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
3 4377


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
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


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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: weiwei | last post by:
HI I am having a problem with print friendly function with asp, I have download some code regard with print friendly, it works fine with static html information, however, I have the dynamic pages...
4
by: Julie Siebel | last post by:
Apologies...I'm sure this has been asked before, but I can't seem to come up with the correct Google search terms. While my problem is with stylesheets, the errors are being caused by my...
2
by: Rob McLennan - ZETLAND | last post by:
Hi, I have set up an external stylesheet, named "print.css", to format the style of all pages printed from my company's website. I've been previewing my changes to the stylesheet by doing...
1
by: Benjamin | last post by:
I have a weird behavior occuring in IE 6.0. I am trying to use HTML to display documents to a user, but then also have it sent directly to the printer and have it look similiar (I know probably...
7
by: BBB | last post by:
I have a web form with a <div> section ... I have it setup so the Update/Cancel buttons are fixed at the bottom of the screen while the content of the form is in the <div> and scrolls. Nice to the...
1
by: SAN CAZIANO | last post by:
I have to insert a button in the left of all record in a table to print the current record, simply create a table and print it in the printer. anyone have an idea or there is a printer/report...
3
by: Nick | last post by:
Hello, I am trying to edit a CSS rule with Javascript, which is for printing. Thus @media print { #footer { display: none; } } I would like to be able to access the display attribute of...
4
by: zz | last post by:
Sorry for posting this here but unfortunatly I couldn't find any appropriate newsgroup for this and since I've been active here with .net question I figured you guys might be able to help. ...
3
by: rajkumarpb | last post by:
Hi friends, I am new to this forum...But not for programming...I want a Print CSS File to be added in my page..OK.... Here is the page and i want you friends to help me create the CSS File...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.