DanielAttard
asked on
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:
What would you suggest? Thanks. I would like something capable of printing individual tabs.
<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>
What would you suggest? Thanks. I would like something capable of printing individual tabs.
ASKER
hmmm, i like it. let me play with that and see how i make out . . . .
ASKER
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?
what do you mean by "different times"?...
ASKER
I am trying to figure out where to use the second part of the code you posted. Where would it go?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
ASKER
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 (printCont ent.innerH TML);
What could I be doing wrong?
printContent is null
[Break On This Error]
printWindow.document.write
What could I be doing wrong?
simply replace this line with
printWindow.document.write ($("#Eleme ntID").htm l());
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.
printWindow.document.write
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.
ASKER
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 (printCont ent.innerH TML);
with:
printWindow.document.write ($("#tab-1 ").html()) ;
??
printWindow.document.write
with:
printWindow.document.write
??
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 ???
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 ???
check the above and see.
can you post your whole page??
can you post your whole page??
ASKER
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.
ASKER
The alert comes back and says "undefined" ???
ok thats the problem..
replace the script
$(".divPrint").click(funct ion() {
printPartOfPage($(this).at tr("id"));
});
with the following lines
$(".divPrint").click(funct ion() {
printPartOfPage($(this).pa rent().att r("id"));
});
Now tell me ,wht does the alert shows ??
replace the script
$(".divPrint").click(funct
printPartOfPage($(this).at
});
with the following lines
$(".divPrint").click(funct
printPartOfPage($(this).pa
});
Now tell me ,wht does the alert shows ??
ASKER
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/sty lesheet.cs s" type="text/css"></head><bo dy>');
with a reference to the correct CSS? Does this make sense to you?
printWindow.document.write
with a reference to the correct CSS? Does this make sense to you?
yes do it.
ASKER
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.
printWindow.document.write
I have a lot of stuff in my header.php file.
DanielAttard,
i think your this post's question
Thanks
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
ASKER
Thanks for your help Lalit-Chandra. I managed to get it working by simply substituting my own CSS. Working great now thanks to you!
Open in new window
and then style only the specific tab which is selected.Like this:
Open in new window