Print and style

Discussion in 'Javascript' started by Michele Locati, Dec 13, 2004.

  1. 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
     
    Michele Locati, Dec 13, 2004
    #1
    1. Advertising

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

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Dec 13, 2004
    #2
    1. Advertising

  3. 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
     
    Michele Locati, Dec 14, 2004
    #3
  4. 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/
     
    Martin Honnen, Dec 14, 2004
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bryan Shaw

    Lock Print Screen and File Print

    Bryan Shaw, Apr 19, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    3,954
    Kevin Spencer
    Apr 20, 2005
  2. Bernard Segonnes

    Print and print overview and current page

    Bernard Segonnes, Nov 4, 2004, in forum: Java
    Replies:
    0
    Views:
    455
    Bernard Segonnes
    Nov 4, 2004
  3. keto
    Replies:
    0
    Views:
    964
  4. David Cournapeau

    print a vs print '%s' % a vs print '%f' a

    David Cournapeau, Dec 30, 2008, in forum: Python
    Replies:
    0
    Views:
    363
    David Cournapeau
    Dec 30, 2008
  5. Ken Varn
    Replies:
    0
    Views:
    473
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page