print a page with scrolling <div>

Discussion in 'HTML' started by Martin Nadoll, Nov 12, 2005.

  1. Hello,

    i have a page with a div-Tag, positioned absolute, overflow:auto that shows
    a scrollbar, because content is to big.

    Now i have a button on that page called "print page".
    That is only a <a href"javascript:window.print()"> command.

    My problem:
    It prints only the on screen shown part of my content, not the whole
    content, which is, what i want to print.

    Is there any workaround for that problem?
    Maybe something with css-media?

    Thanks for any help,
    Martin Nadoll
     
    Martin Nadoll, Nov 12, 2005
    #1
    1. Advertising

  2. Martin Nadoll

    Spartanicus Guest

    "Martin Nadoll" <> wrote:

    >i have a page with a div-Tag, positioned absolute, overflow:auto that shows
    >a scrollbar, because content is to big.


    Get rid of it, "scrolling divs" are a usability nightmare. Scrolling
    with the wheel of a mouse is poorly supported, keyboard users cannot
    scroll it at all.

    Place a small bit of the content on the page followed by a "... More"
    link that links to the full text.

    >Now i have a button on that page called "print page".
    >That is only a <a href"javascript:window.print()"> command.


    Replicating a function found on all browsers serves no purpose, using
    javascript is even more silly since a significant number of clients will
    have javascript disabled.

    --
    Spartanicus
     
    Spartanicus, Nov 12, 2005
    #2
    1. Advertising

  3. Martin Nadoll wrote:
    > Hello,
    >
    > i have a page with a div-Tag, positioned absolute, overflow:auto that shows
    > a scrollbar, because content is to big.
    >
    >
    > My problem:
    > It prints only the on screen shown part of my content, not the whole
    > content, which is, what i want to print.
    >
    > Is there any workaround for that problem?
    > Maybe something with css-media?
    >


    Something like:

    <link rel="stylesheet" href="print.css" type="text/css" media="print">

    in your html, and:

    #whatever_id_your_div_is
    {overflow:none;}

    in the print.css

    should solve that.

    --

    Davémon
    http://www.nightsoil.co.uk
     
    =?ISO-8859-1?Q?Dav=E9mon?=, Nov 12, 2005
    #3
  4. Martin Nadoll

    Neredbojias Guest

    With neither quill nor qualm, =?ISO-8859-1?Q?Dav=E9mon?= quothed:

    > Martin Nadoll wrote:
    > > Hello,
    > >
    > > i have a page with a div-Tag, positioned absolute, overflow:auto that shows
    > > a scrollbar, because content is to big.
    > >
    > >
    > > My problem:
    > > It prints only the on screen shown part of my content, not the whole
    > > content, which is, what i want to print.
    > >
    > > Is there any workaround for that problem?
    > > Maybe something with css-media?
    > >

    >
    > Something like:
    >
    > <link rel="stylesheet" href="print.css" type="text/css" media="print">
    >
    > in your html, and:
    >
    > #whatever_id_your_div_is
    > {overflow:none;}
    >
    > in the print.css
    >
    > should solve that.


    Perhaps "overflow:visible;" would be better.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Nov 12, 2005
    #4
  5. Neredbojias wrote:
    > With neither quill nor qualm, =?ISO-8859-1?Q?Dav=E9mon?= quothed:
    >
    >
    >>Martin Nadoll wrote:
    >>
    >>>Hello,
    >>>
    >>>i have a page with a div-Tag, positioned absolute, overflow:auto that shows
    >>>a scrollbar, because content is to big.
    >>>
    >>>
    >>>My problem:
    >>>It prints only the on screen shown part of my content, not the whole
    >>>content, which is, what i want to print.
    >>>
    >>>Is there any workaround for that problem?
    >>>Maybe something with css-media?
    >>>

    >>
    >>Something like:
    >>
    >><link rel="stylesheet" href="print.css" type="text/css" media="print">
    >>
    >>in your html, and:
    >>
    >>#whatever_id_your_div_is
    >> {overflow:none;}
    >>
    >>in the print.css
    >>
    >>should solve that.

    >
    >
    > Perhaps "overflow:visible;" would be better.
    >


    My apologies. Yes "overflow:visible;" is correct.

    Also set "height:auto;" if you're not declaring the screen css
    explicitly as such (i.e. the #whatever_id_your_div_is is inheriting a
    height value from another definition), otherwise it will overlap any
    content below, instead of forcing it down.




    --

    Davémon
    http://www.nightsoil.co.uk
     
    =?ISO-8859-1?Q?Dav=E9mon?=, Nov 13, 2005
    #5
    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. stan
    Replies:
    0
    Views:
    468
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    809
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    236
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    359
    Martin Honnen
    Jun 26, 2005
  5. Austin Pickett

    Animated page scrolling ... in a Div?

    Austin Pickett, Mar 8, 2008, in forum: Javascript
    Replies:
    1
    Views:
    139
    Thomas 'PointedEars' Lahn
    Mar 9, 2008
Loading...

Share This Page