We Keep Coding

Page break issue in browsers print

This is how my Html page looks in print view.
I need to put it on new page when it breaks in 2 and for that need to insert below div before these elements (something which I am doing for other predefined new pages).
<div style='page-break-before: always'>
But I am not able to do so as these contents are dynamic and I have no idea exactly which HTML element will fall at this place.
If I somehow manage to track HTML element at page break point, I will simply put page-break code just above it. This need to be done on html page with jQuery as print view doesn't support js.
I tried to do it like this but failed here as well. Looks like print view doesn't support position: absolute.
$(document).ready(function(){
$("body").append("<div style='position: absolute;top: 760px;page-break-before: always'>");
});

Try this article
Make Sure You use
#media print {
.page-break { display: block; page-break-before: always; }
}

As page-break-* doesn't work on google chrome, here is the solution which worked for me. I set display: inline-block for all the HTML Element which I don't want to get separated between two pages.
.msgbx,.svnotice, .imgdescbx img {
display: inline-block;
}

Hide class before document

I have about 20 tabs which are placed underneath the content (not on-top as usual) with large content (forms,inputs) on each tabs.
Problem is that when the users visit the site, they see all the content before the tabs hide. Is there a way to prevent this? I am using jQuery tabs as simple as:
$(window).load(function() {
$(".tab_content").hide();$(".tab_content:first").show();
});
I was thinking if there is a way to hide .tab_content without jQuery? So I can load jquery at the end asynchronously. I would imagine, loading jquery and then hiding tabs takes time. But yet again I was thinking that, in order to hide .tab_content you need the content so, maybe there is no way around it?
Thanks alot

the hide comes into play after the DOM is ready or the element you are applying hide is inside the DOM so a better way is to add a class that hides the element
.tab_content
{
display: none
}
and
$(function(){
$(".tab_content:first").show();
});

If you simply want to hide then you can use pure CSS:
.tab_content{
display:none;
/* or */
visibility:hidden;
}
Once your page has loaded and jQuery is ready you can then show it as required.

Use CSS to hide the tabs by default:
.tab_content { display: none; }
Show them when ready.

You can prevent showing them by default using css.
.tab_content { display: none; }

the best way is to do it in css, that way it will never show up when the page loads
.tab_content { display: none }

Print sections that were hidden on the screen with javascript

I have run into a small problem I have not encountered before: I use javascript (jQuery) to show different sections of information in tabs on a web-page. So what I´m doing, is hiding the tabs that are not being viewed and only showing the tab that is being viewed.
This works very well, but now I am adding a print-specific style-sheet and I want to print the information of all tabs and not just the one being viewed.
How can I undo the javascript hiding of these sections for the print style-sheet?
Edit: Some additional information:
I am using jQuery to hide all div.tabs sections and in my print style-sheet I have set:
.wrapper div.tabs sections {
display: block;
}
assuming that the higher value of .wrapper div.tabs sections compared to div.tabs sections would make the sections visible. But it doesn´t...

The best approach would be to change the JavaScript so that it modified the classes that applied to the elements and didn't modify .style.display. Then you could target elements with those classes differently with the screen and print media stylesheets.
The quick and dirty approach would be to use !important in your print media stylesheet.

All you really need is CSS. Just define some things that show when printed.
Heres and example:
#media print {
div.print_show{ dispay: block; }
span.print_show{ display: inline; }
.print_hide{ display: none; }
}

You can add an extra class to add display:block to your print.css..

Hide html only when Javascript is available

I guess this is more about SEO than wanting to support browsers with Javascript disabled. I have Javascript/jQuery code that reads in some html and basically displays it much nicer. The html is actually removed (with jQuery's .remove() function) during the process.
So I hide the html so there aren't any visual artifacts as the page loads. But now I want to only hide it if Javascript is enabled. I guess the easiest thing is to have some Javascript in <head> that adds the display: none css rule to the appropriate elements.
Is there a better way for dealing with this situation?

I think using noscript html tag will do the job. The tag displays the content inside if the script is disabled in users browser.

Any JavaScript will only work if JavaScript is enabled so no matter how you do it using JavaScript it will always work only if JavaScript is enabled so you never have to test for that.
That having been said, you can see how it is done in the HTML5 Boilerplate:
<html class="no-js" lang="en">
... the rest of the page
</html>
using a no-js class applied to the <html> tag. The class is later removed using JavaScript and a js class is added, both of which you can use in your CSS and HTML:
<p class="js">This is displayed if JavaScript is enabled</p>
<p class="no-js">This is displayed if JavaScript is disabled</p>
Or in CSS:
.no-js #someWidget { display: none; }
.js #someFallback { display: none; }
If you're using Modernizr then it will already change those classes for you, but even if you don't then all you have to do is something like:
document.documentElement.className =
document.documentElement.className.replace(/\bno-js\b/,'js');
It's a simple and elegant solution and all you have to worry about is CSS classes in your styles and markup.

I'd probably use a single bit of script that sets a class on body you can then reference in your CSS, but basically, you're on the right track.
E.g.:
<body>
<script>document.body.className = "jsenabled";</script>
Then your CSS rule:
body.jsenabled selector_for_your_initially_hidden_content {
display: none;
}
The rule will only kick in if the body has the class.
Complete example:
HTML (and inline script):
<body>
<script>document.body.className = "jsenabled";</script>
<div class='foo'>I'm foo, I'm hidden on load</div>
<div>I'm not foo, I'm not hidden on load</div>
<div class='foo'>Another foo</div>
<div>Another bit not hidden on load.</div>
</body>
CSS:
body.jsenabled div.foo {
display: none;
}
Live copy I've only used the "foo" class for an example. It could just as easily be a structural selector.

Add the class hiddenblock to each div (or block) you want to hide, and add this JS code in the header:
$(document).ready(function() {
$(body).addClass('jsenable');
$('.hiddenblock').hide();
}
You can also use the class jsenable to mask or modify some other block, like this:
.jsenable #myblock { position: absolute; right: 10000px; }

Printing only a textarea

I would like to print only the contents of a textarea element from a website page. In particular, I would like to ensure that nothing gets clipped by the boundary of the textarea as the contents will be quite large.
What is the best strategy for tackling this?

Make a print stylesheet where all of the elements except the textarea are set in CSS to display: none;, and for the textarea, overflow: visible.
Link it to the page with the link tag in the header set to media="print".
You're done.

Make a different CSS with media set to print
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
http://webdesign.about.com/cs/css/a/aa042103a.htm

If the user clicks "Print," you could open a new window with just the contents of the textarea on a blank page and initiate printing from there, then close that window.
Update: I think the CSS solutions being suggested are probably better strategies, but if anybody likes this suggestion, they can still upvote it.

I'd go for a combo of the other suggestions.
Don't kill the print button for the whole page with a stylesheet override, but instead provide a button by the textarea, that lets the user print only those contents.
That button would open a new window, with menus/chrome etc. and clone the textarea content only (and or provide a print css file)

I made a print media CSS to hide a number of the fields. The problem was complicated by the fact that I was using nicEdit which dynamically creates an IFRAME. So I had to add an event that took onblur events and copied them over to a hidden (except for printing) Div. "divtext" is the hiddent Div, and "storyText" is the TextArea.
textarea {
display: none;
}
*/ #divtext {
display: block;
}
div, DIV {
border-style: none !important;
float: none !important;
overflow: visible !important;
display: inline !important;
}
/* disable nearly all styles -- especially the nicedit ones! */
#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame {
display: none !important;
}
/*hide Nicedit buttons */
.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt {
display: none !important;
}
The javascript code for nicEdit:
<script type="text/javascript" src="/media/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
var nic = new nicEditor({
fullPanel: true
}).panelInstance('storyText');
document.getElementById("storyText").nic = nic;
nic.addEvent('blur', function () {
document.getElementById("storyText").value =
nic.instanceById('storyText').getContent();
document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent();
});
});
</script>

Did the overflow: visible; on textarea actually work for any of you? FF3 seems to ignore that rule on textarea in print sheets. Not that it's a bug or anything.