SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict djh's Avatar
    Join Date
    Apr 2000
    Location
    Long Beach, CA
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Load contents of DIV layer into new page

    Hey folks...

    Is it possible to load everything within a certain DIV layer to a new page, when a certain link is clicked?

    I'm trying to create a print functionality, and if I could do this it will be very very sweet.

    All my content that I'm trying to print is contained in a "content" div layer...so if I can get javascript to load everything within that layer from a "Print" link, then I can set a different style sheet on the print page, etc.

    Any help would be greatly appreciated!!

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you grab the content of the DIV from the DOM and then output it to a new page using document.write/writeln?
    From the English nation to a US location.

  3. #3
    SitePoint Addict djh's Avatar
    Join Date
    Apr 2000
    Location
    Long Beach, CA
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey awestmoreland,

    sounds entirely possible but I'm a bit of a javascript newbie. Don't know quite where to begin... any ideas?

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a very simple example of what I meant, but I'm sure that someone will tell us that it would be far easier using CSS and I'd be interested to learn more about that myself

    You'll notice that the terminating tags have an extra slash in them.
    This is to escape the character following it so that Javascript doesn't attempt to interpret it. The content of my div is simple text except for the <br> tags. If your content has backslashes etc. in it, then you may need to use the escape()/unescape() functionality of Javascript which I'd have to read up on.
    Code:
    <html>
      <head>
        <title>The Display Page</title>
        <script language="JavaScript">
        <!--
          function rewrite(divname){
            // Sets value of div_content to content of DIV passed to function
            var div_content=document.getElementById(divname).innerHTML;
            // Creates new page & writes several lines to it including value of div_content
            document.writeln('<html><head><title>My Printing Page<\/title><\/head><body>');
            document.writeln('<table align="center"><tr><td align="center">')
            document.writeln('<u>This is my div text from previous page<\/u>');
            document.writeln('<\/td><\/tr>');
            document.writeln('<tr><td><b>' + div_content + '<\/b><\/td><\/tr><\/table>');
            document.writeln('<\/body><\/html>');
          }
        //-->
        </script>
      </head>
      <body>
        <div id="mydiv">
          This text is within "mydiv"<br>
          Clicking the button below<br>
          Will read the content of the div<br>
          and rewrite it into a new window.
        </div>
        <form>
          <input type="button" value="Submit" onClick="rewrite('mydiv')">
        </form>
      </body>
    </html>
    Is that any use?

    Andy
    From the English nation to a US location.

  5. #5
    SitePoint Addict djh's Avatar
    Join Date
    Apr 2000
    Location
    Long Beach, CA
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Andy,

    That's sweet bro... It worked! I modified a little bit so that the div gets written in a new window...

    Code:
    <script>
          function rewrite(divname){
          var div_content=window.opener.document.getElementById(divname).innerHTML;
    
            // Creates new page & writes several lines to it including value of div_content
            document.writeln('<html><head><title>My Printing Page<\/title><\/head><body>');
            document.writeln('<table align="left"><tr><td align="left">')
            document.writeln('<u>This is my div text from previous page<\/u>');
            document.writeln('<\/td><\/tr>');
            document.writeln('<tr><td><b>' + div_content + '<\/b><\/td><\/tr><\/table>');
            document.writeln('<\/body><\/html>');
          }
    
    </script>
    So I now have 2 pages... First page opens a new window, the second page w/ the above javascript (THANKS!) and a function call in the body...

    Thanks again!

  6. #6
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by djh
    That's sweet bro... It worked! I modified a little bit so that the div gets written in a new window...
    Well I'm glad that you got it working, but I can't make your script work for me

    I would have thought however that - as well as the contents of the DIV - you'd want to assign anything else that you want in the new window to div_content too i.e. the <html> tags etc. unless you just want pure text.

    Andy
    From the English nation to a US location.

  7. #7
    SitePoint Addict djh's Avatar
    Join Date
    Apr 2000
    Location
    Long Beach, CA
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Andy,

    I have two pages... Here's the first:

    Code:
    <html>
      <head>
        <title>The Display Page</title>
        <script language="JavaScript">
        <!--
    	function openwin(url) {
    	window.open(url)
    	}
        //-->
        </script>
      </head>
      <body>
        <div id="content">
          This text is within "mydiv"<br>
          Clicking the button below<br>
          Will read the content of the div<br>
          and rewrite it into a new window.
        </div>
        <a href="#" onClick="openwin(printdiv.htm')">Print This Page</a>
      </body>
    </html>
    And here's the second page "printdiv.htm"

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script>
          function rewrite(divname){
          var div_content=window.opener.document.getElementById(divname).innerHTML;
    
            // Creates new page & writes several lines to it including value of div_content
            document.writeln('<html><head><title>My Printing Page<\/title><\/head><body>');
            document.writeln('<table align="left"><tr><td align="left">')
            document.writeln('<u>This is my div text from previous page<\/u>');
            document.writeln('<\/td><\/tr>');
            document.writeln('<tr><td><b>' + div_content + '<\/b><\/td><\/tr><\/table>');
            document.writeln('<\/body><\/html>');
          }
    
    </script>
    </head>
    
    <body>
    <script>
    rewrite('content');
    </script>
    </body>
    </html>
    Haven't checked on anything other than IE6...

    -Dave

  8. #8
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, thanks for that Dave.

    It's so obvious now that I've seen it in action and I can see what window.opener is referring to. Looks like we helped each other out on this one

    By the way, you've an opening single quote missing on the following line
    Code:
    <a href="#" onClick="openwin('printdiv.htm')">Print This Page</a>
    Cheers,

    Andy
    From the English nation to a US location.


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
  •