SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    print just one area of page... not working

    Hi,

    Whilst scouting around looking for a "print isolation" solution that works with my WordPress install, I found what, with my limited javascript knowledge, seems like a very elegant solution for just printing a certain area of a page without printing the full page. It creates an iframe and then prints what you want into the iframe without printing everything else on the page. However, elegant as it seems, it doesn't work . Is there anything you can spot wrong with the following code? IE throws an object expected code 0 error and FF just doesn't do anything.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function printUrl(url) {
    	$('#printFrame').attr('src', url);
    	$('#printFrame').load(function() {
    		var frame = document.getElementById('printFrame');
    		if (!frame) {
    			alert("Error: Can't find printing frame.");
    			return;
    		}
    		frame = frame.contentWindow;
    		frame.focus();
    		frame.print();
    	});
    }
    </script>
    </head>
    
    <body>
    
    <input type="button" value="print" onClick="printUrl('http://www.printurl.com')"/>
    <iframe width="1" height="1" id="printFrame" />
    
    </body>
    Thanks a lot.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by waterprism View Post
    Hi,

    Whilst scouting around looking for a "print isolation" solution that works with my WordPress install, I found what, with my limited javascript knowledge, seems like a very elegant solution for just printing a certain area of a page without printing the full page. It creates an iframe and then prints what you want into the iframe without printing everything else on the page. However, elegant as it seems, it doesn't work . Is there anything you can spot wrong with the following code? IE throws an object expected code 0 error and FF just doesn't do anything.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function printUrl(url) {
    	$('#printFrame').attr('src', url);
    	$('#printFrame').load(function() {
    		var frame = document.getElementById('printFrame');
    		if (!frame) {
    			alert("Error: Can't find printing frame.");
    			return;
    		}
    		frame = frame.contentWindow;
    		frame.focus();
    		frame.print();
    	});
    }
    </script>
    </head>
    
    <body>
    
    <input type="button" value="print" onClick="printUrl('http://www.printurl.com')"/>
    <iframe width="1" height="1" id="printFrame" />
    
    </body>
    Thanks a lot.
    Do you have Jquery linked on the page?
    If not, put this above the first script:
    Code JavaScript:
    <script type="text/javascript"
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    This loads the library from Google's public hosted copy.

    Code:
    <html>
    <head>
    <script type="text/javascript"
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    function printUrl(url) {
    	$('#printFrame').attr('src', url);
    	$('#printFrame').load(function() {
    		var frame = document.getElementById('printFrame');
    		if (!frame) {
    			alert("Error: Can't find printing frame.");
    			return;
    		}
    		frame = frame.contentWindow;
    		frame.focus();
    		frame.print();
    	});
    }
    </script>
    </head>
    
    <body>
    
    <input type="button" value="print" onClick="printUrl('http://www.printurl.com')"/>
    <iframe width="1" height="1" id="printFrame" />
    
    </body>
    Then try this site for more information.
    jQuery: The Write Less, Do More, JavaScript Library

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Travis. Thanks a lot. Unfortunately, that doesn't seem to work. I also tried it on a local file to make sure it wasn't a WordPress thing but I get an 'access is denied error' in IE. When putting it into my WordPress install, I get 'object doesn't support this property or method'. My theme seems to add that jquery file in any case, so I don't think it's that. Thanks though. Seemed like it might help.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by waterprism View Post
    Hi, Travis. Thanks a lot. Unfortunately, that doesn't seem to work. I also tried it on a local file to make sure it wasn't a WordPress thing but I get an 'access is denied error' in IE. When putting it into my WordPress install, I get 'object doesn't support this property or method'. My theme seems to add that jquery file in any case, so I don't think it's that. Thanks though. Seemed like it might help.
    This could help you.
    Printing part of an html page CSS forum at WebmasterWorld
    CSS instead of Javascript and it looks clean.
    Just give the elements you don't want to print a .dontprintMe class.
    Then add your print button.
    Print a Web Page Using JavaScript
    Code HTML4Strict:
    <a href="javascript:window.print()">Print</a>

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi. Thanks for that, Travis. I had tried that before, @media print and a print-only css file, but it's difficult with WordPress because isolating elements when you're setting what you want to isolate in those elements is obviously difficult. When I'd used visibility:hidden for non-print elements, I could get the area I wanted to print to print but then the printer would print off two other blank pages because it's a long page. Using display:none hides what I want to print because it's a div within containing and wrapping WordPress divs. That's why I've been trying to go the iframe and/or javascript route.

    I've actually come across another javascript solution which is a winner in IE but, go figure, doesn't work in FF (there's one for the books).

    Code:
    <script>
    function printURL(sHref) {
    if(document.getElementById && document.all && sHref){
    if(!self.oPrintElm){
    var aHeads = document.getElementsByTagName('HEAD');
    if(!aHeads || !aHeads.length)
    return false;
    if(!self.oPrintElm)
    self.oPrintElm = document.createElement('LINK');
    self.oPrintElm.rel = 'alternate';
    self.oPrintElm.media = 'print';
    aHeads[0].appendChild(self.oPrintElm);
    }
    self.oPrintElm.href = sHref;
    self.focus();
    self.print();
    return true;
    }
    else return false;
    }
    </script>
    And called with

    Code:
    <a onclick="printURL(this.href); return false;" href="http://printstuff.com" target="_blank">print</a>
    But FF doesn't want to know for some reason.


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
  •