SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Print from a <div>

    I am a designer new to javascript. I would like to open a specifiv div (with a specific id) in a new window. On this window I would like to attach a specific print stylesheet (css) and have a print button on the screen to print the screen. As I am new, I need detailed instructions and examples. I appreciate ay assistance.

    Thanks

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Well, read this... since you have to give a source for the window, code it how you see fit.
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thais sounds good. How do i grab the html inside a <div> and place it in the new screen?

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This works, just change the build page in the new window to suit your needs.

    <html>

    <head>
    <script type="text/Javascript">
    <!--
    var newWindow=null; // global
    // open window and insert content
    function buildPage()
    { // check to see if it already exists
    if(!newWindow || newWindow.closed)
    { newWindow=window.open("","xx","status=1,height=300,width=300");
    // delay writing to allow window to be created
    setTimeout("write2Window()",100);
    }
    else
    { newWindow.focus();
    }
    }
    // ---------------
    function write2Window()
    { var build='<html>\n<head>\n<title>My Window</title>\n';
    build+='<style type="text/css">\n#win1 {position:absolute; top:100px; left:100px; text-align:left; }\n<\/style>\n<\/head>\n';
    build+='<body>\n<div id="win1">\n<p>This is your content<\/p><\/div>\n<\/body>\n<\/html>\n';
    newWindow.document.write(build);
    newWindow.document.close();
    }

    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-famil:arial; font-size:13px; font-weight:bold; color:#000; }
    #firstPage { position:absolute; top:100px; left:100px; text-align:left; cursor: pointer; }
    -->
    </style>
    </head>

    <body>

    <div id="firstPage" onclick="buildPage()">
    <p class="a">Open new window</div>

    </body>

    </html>

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alamokid View Post
    Thais sounds good. How do i grab the html inside a <div> and place it in the new screen?
    huh?
    here's an example:
    page1.html
    .....
    <p>some text... Want to <a href="javascript:window.open('/page2.html', 'Detail', 'width=300,height=150,status=yes,location=no');">read more</a>?

    pag2.html
    <html>...
    <div>
    that div yuo want
    </div
    Ryan B | My Blog | Twitter


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •