Tuesday, September 17, 2013

Print area defined using css and javascript in webpage

if you want to print particular area in webpage . These problem Solve using css and js in HTML Web page. Please below Example  save as html file and run any browser (IE, Firfox and  Crome Etc).

Ex-

<html>
    <head>
        <style type="text/css">
        @media print {
            body * {
                visibility:hidden;
            }
            #printable, #printable * {
                visibility:visible;
            }
            #printable { /* aligning the printable area */
                position:absolute;
                left:40;
                top:40;
            }
        }
        </style>
    </head>
    <body>
      <A HREF="javascript:window.print()">Click to Print This Page</A>
        <div id="printable">
            printable area
            <br>
            printable area
            <br>
            printable area
        </div>
        <div>
            Curabitur tempus hendrerit semper. Nulla vel felis est. Cras nec mattis mauris.
            Vestibulum volutpat urna viverra mi viverra non ultrices leo semper.
            Maecenas scelerisque, augue quis scelerisque aliquam, magna velit scelerisque urna,
            in aliquet lectus dolor vitae urna. Nullam faucibus mattis hendrerit.
            Nam tortor elit, vulputate quis viverra vitae, dapibus id magna.
            Ut ultricies rhoncus erat, id pharetra dui tincidunt at.
            In lorem lorem, suscipit nec elementum vitae, venenatis id ligula.
            Suspendisse et erat id neque facilisis ultricies ac in neque.
            Vestibulum suscipit risus sed erat varius molestie.
        </div>
    </body>
</html>


 

No comments:

Post a Comment