How to print individual jQuery tabs?

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.
DanielAttardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

designatedinitializerCommented:
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
DanielAttardAuthor Commented:
hmmm, i like it.  let me play with that and see how i make out . . . .
0
DanielAttardAuthor Commented:
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

designatedinitializerCommented:
what do you mean by "different times"?...
0
DanielAttardAuthor Commented:
I am trying to figure out where to use the second part of the code you posted.  Where would it go?
0
Lalit ChandraCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DanielAttardAuthor Commented:
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
DanielAttardAuthor Commented:
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
Lalit ChandraCommented:
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
DanielAttardAuthor Commented:
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
Lalit ChandraCommented:
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
Lalit ChandraCommented:
check the above and see.
can you post your whole page??
0
DanielAttardAuthor Commented:
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
DanielAttardAuthor Commented:
The alert comes back and says "undefined"  ???
0
Lalit ChandraCommented:
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
DanielAttardAuthor Commented:
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
Lalit ChandraCommented:
yes do it.
0
DanielAttardAuthor Commented:
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
Lalit ChandraCommented:
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
DanielAttardAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.