Solved

How to print individual jQuery tabs?

Posted on 2012-03-25
20
404 Views
Last Modified: 2012-03-25
I have some jquery tabs, but I would like to be able to print specific tabs.  Can someone explain a solution where I would be able to print each specific tab separately?  Here is the current code:

<div class="tab">
    <ul>
        <li><a href="#tabs-1">My Content 1</a></li>
        <li><a href="#tabs-2">My Content 2</a></li>
        <li><a href="#tabs-3">My Content 3</a></li>
    </ul>

    <div id="tabs-1">
	    <?php include "content1.php" ?>
     </div>
     <div id="tabs-2">
	    <?php include "content2.php" ?>
    </div>
    <div id="tabs-3">
	    <?php include "content3.php" ?>
    </div>

</div>

Open in new window

           
What would you suggest?  Thanks.  I would like something capable of printing individual tabs.
0
Comment
Question by:DanielAttard
  • 11
  • 7
  • 2
20 Comments
 
LVL 7

Expert Comment

by:designatedinitializer
Comment Utility
I suggest you make css style for print media which does not print at all, like this:

@media print {
  body, .tab {
    display:none;
  }
}

Open in new window

and then style only the specific tab which is selected.
Like this:

$('.tab').bind('tabsselect', function(event, ui) {
    ui.panel.css("@media print {display:block;}");
});

Open in new window

0
 

Author Comment

by:DanielAttard
Comment Utility
hmmm, i like it.  let me play with that and see how i make out . . . .
0
 

Author Comment

by:DanielAttard
Comment Utility
Hey designatedinitializer, what about if I want to be able to print different tabs at different times?  Should each tab be styled in the same way?
0
 
LVL 7

Expert Comment

by:designatedinitializer
Comment Utility
what do you mean by "different times"?...
0
 

Author Comment

by:DanielAttard
Comment Utility
I am trying to figure out where to use the second part of the code you posted.  Where would it go?
0
 
LVL 7

Accepted Solution

by:
Lalit Chandra earned 500 total points
Comment Utility
you can try this

1. Create the method which takes care of your printing.

function printPartOfPage(elementId) {
    var printHeader = document.getElementById('header');
    var printContent = document.getElementById(elementId);
    var windowUrl = 'NewWindow';
    var uniqueName = new Date();
    var windowName = 'Print' + uniqueName.getTime();
    var printWindow = window.open(windowUrl, windowName, 'left=200,top=200');

    printWindow.document.write('<html xmlns="http://www.w3.org/1999/xhtml"><head>');
    printWindow.document.write('<link rel="stylesheet" href="../../app_themes/stylesheet.css" type="text/css"></head><body>');
    printWindow.document.write(printContent.innerHTML);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.setTimeout("window.close()", 1000);
}

2. ON Each tab,Insert a link which initiate the print function, like

<div id="tabs">
<div id="printDiv">
<li><a title="tab1" href="#tabs-1">tab1</a></li>
<li><a title="tab2" href="#tabs-2">tab2</a></li>
<div id="tabs-1">
  <a href="#" class="divPrint">PRINT </a>
   Content for tabs-1
</div>
<div id="tabs-2">
  <a href="#" class="divPrint">PRINT </a>
   Content for tabs-2
</div>
</div>
</div>

3.Now add the following script to your script section
 
$(function() {
  $(".divPrint").click(function() {
        printPartOfPage($(this).attr("id"));
  });
});
   
 The above will allow you to print specific Tab only.

Hope this will guide you to achieve your objective.
0
 

Author Comment

by:DanielAttard
Comment Utility
Hi Lalit-Chandra - I have implemented the various parts of your solution, but when I hit the print link, nothing happens.  It does not trigger the function.  Do i need to customize it?
0
 

Author Comment

by:DanielAttard
Comment Utility
Hi Lalit-Chandra - Now what is happening is that the new window opens up to print, but it hangs and continues to say "Transferring data from www. . ."  There is an error in firebug that says:

printContent is null
[Break On This Error]       

printWindow.document.write(printContent.innerHTML);

What could I be doing wrong?
0
 
LVL 7

Expert Comment

by:Lalit Chandra
Comment Utility
simply replace this line with

printWindow.document.write($("#ElementID").html());

Here, ElementID should be the Tab id like "tab-1" or  "tab-2".

Make sure the element id passed to the function is valid in firebug.
0
 

Author Comment

by:DanielAttard
Comment Utility
Hi Lalit-Chandra, sorry to say but the line you have quotes is not within your original code.  Do you mean to replace this line:

printWindow.document.write(printContent.innerHTML);

with:

printWindow.document.write($("#tab-1").html());

??
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 7

Expert Comment

by:Lalit Chandra
Comment Utility
there is a method in my previous post

printPartOfPage(elementId) {

....
}

just put a alert in the body

printPartOfPage(elementId) {
       alert(elementId);
....
}

Now run the page. Then go to your tab and click the link..is any alert comes or not, if it does then is the element id matches with your tabid or not ???
0
 
LVL 7

Expert Comment

by:Lalit Chandra
Comment Utility
check the above and see.
can you post your whole page??
0
 

Author Comment

by:DanielAttard
Comment Utility
i think i understand you now.  thanks.  i just need to work with it for a bit.  will post back once i have it figured out.  many thanks.
0
 

Author Comment

by:DanielAttard
Comment Utility
The alert comes back and says "undefined"  ???
0
 
LVL 7

Expert Comment

by:Lalit Chandra
Comment Utility
ok thats the problem..

replace the script
 $(".divPrint").click(function() {
        printPartOfPage($(this).attr("id"));
  });

with the following lines

 $(".divPrint").click(function() {
        printPartOfPage($(this).parent().attr("id"));
  });

Now tell me ,wht does the alert shows ??
0
 

Author Comment

by:DanielAttard
Comment Utility
Perfect (almost).  That was the problem.  Now the alert correctly gives the tab name.  Everything seems to be working fine, except that I've lost all that good CSS from my screen.  Probably what I will need to do is replace this line:

printWindow.document.write('<link rel="stylesheet" href="../../app_themes/stylesheet.css" type="text/css"></head><body>');

with a reference to the correct CSS?  Does this make sense to you?
0
 
LVL 7

Expert Comment

by:Lalit Chandra
Comment Utility
yes do it.
0
 

Author Comment

by:DanielAttard
Comment Utility
Should something like this work?  :

printWindow.document.write('<?php include "header.php" ?></head><body>');

I have a lot of stuff in my header.php file.
0
 
LVL 7

Expert Comment

by:Lalit Chandra
Comment Utility
DanielAttard,
i think your this post's question

How to print individual jQuery tabs?

has been solved.So please close this question,and post another question in another post.

Thanks
0
 

Author Comment

by:DanielAttard
Comment Utility
Thanks for your help Lalit-Chandra.  I managed to get it working by simply substituting my own CSS.  Working great now thanks to you!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now