Advanced Search

Results 1 to 8 of 8

Thread: 'JavaScript:window.print()';

  1. #1
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default 'JavaScript:window.print()';

    I am trying to use the print option in the Fancybox. I am using the following code to get the print option and its printing the page on the light box but it also prints the page at the background.

    <div class="thumbfirst">
    <img src="collection/chairs/repros/1t.jpg" alt="" border="0"/></a>
    <div class="product_title">Campaign Chair</div>
    <div class="pdf"><a href="collection/chairs/repros/1.jpg"
    rel="example_group"title="<a href='JavaScript:window.print()';>Print this page</a>" >view pdf</a></div>
    </div>


    I cam accross with http://www.thatagency.com/design-stu...jquery-plugin/ but have no idea whats going on there and how would I integrate into my site at :
    www.rajumaharjan.com/etos1

  2. #2
    Join Date
    Apr 2007
    Posts
    149
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Check this link out. it has a simple piece of code that would allow you to specify what you want to be printed in a document and a link to it on the headers.... Check it out and let me kknow if its what you are looking for.

    http://www.dynamicdrive.com/dynamici...printstyle.htm

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by remp View Post
    Check this link out. it has a simple piece of code that would allow you to specify what you want to be printed in a document and a link to it on the headers.... Check it out and let me kknow if its what you are looking for.

    http://www.dynamicdrive.com/dynamici...printstyle.htm
    Do not do that. Do not. It's outdated, never was cross browser, and should no longer be in the DD scripts library.

    Also, the jQuery script you (squizeers) reference in your post isn't much better. And even as far as it does work (which is not cross browser), would have complications because you are importing and then initializing fancybox content, rather than in the manner the jQuery print script has in mind.

    What you need are alternate print styles, not an alternate print document, nor the jQuery javascript whose demo page isn't even cross browser.

    Working out the alternate print styles may be a little tricky because of the AJAX involved in importing and initializing the fancybox content.

    I will try to work that out soon, at least a first draft for testing. In the meantime, Do not try the jQuery or the alternate doc approaches. You will just be wasting your time.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    squizeers (11-04-2010)

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    OK, this may need some refinement. Put this at the beginning of the rajumaharjan.com/etos1/fancybox/jquery.fancybox-1.3.1.css file:

    Code:
    @media print {
    	body * {
    		display: none!important;
    		background: none!important;
    	}
    	body {
    		background: none!important;
    	}
    	#fancybox-wrap, #fancybox-wrap * {
    		display: block!important;
    		top: 0!important;
    		left: 0!important;
    	}
    	#fancybox-title, #fancybox-close {
    		display: none!important;
    	}
    }
    That's it, everything else should remain the same. The refinements I'm thinking of are adding would be for IE and only if necessary, but there could be others for other browsers as well.

    So test it out in Firefox or some other non-IE browser first, then see how it looks in IE. Let me know, or better yet let me see the page once you've made the change to the rajumaharjan.com/etos1/fancybox/jquery.fancybox-1.3.1.css file.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    squizeers (11-04-2010)

  7. #5
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the quick response.

    I did update : rajumaharjan.com/etos/fancybox/jquery.fancybox-1.3.1.css with the css you provided but still printing the background page.

    I tried printing in Firefox.

    LINK: rajumaharjan.com/etos

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    You're right. That's very strange. I worked it out in the Firefox Developer Tools' edit css. In fact, if I load your now updated styles into that utility, they work without needing to be edited. So we just need to find a way to get them recognized.

    Here's what I would suggest - revert to the styles as used before. Add an on page stylesheet to rajumaharjan.com/etos here as shown (highlighted):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Et&oacute;s New York City</title>
    
    <link rel="stylesheet" type="text/css"href="css/global.css" />
    <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />
    
    <style type="text/css" media="print">
    @media print {
    	body * {
    		display: none!important;
    		background: none!important;
    	}
    	body {
    		background: none!important;
    	}
    	#fancybox-wrap, #fancybox-wrap * {
    		display: block!important;
    		top: 0!important;
    		left: 0!important;
    	}
    	#fancybox-title, #fancybox-close {
    		display: none!important;
    	}
    }
    </style>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="fancybox/jq . . .
    But as I indicated before, due to the AJAX import and reinitializing of fancybox, it's virtually impossible for me to test this all out here locally. That really shouldn't matter for styles though, which ordinarily will apply to any imported and/or created content that arrives later.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    squizeers (11-15-2010)

  10. #7
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    thanks for the response.
    I am out of the city for couple weeks so I will try it out later and let you know the result.

  11. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    If it does work out, we can make that an external stylesheet.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •