Blogstuff: Adding Printable versions to blogs
I had been thinking how, at times, I want to print out things on my blog, but there is a great deal of extra junk on there I could do without, such as color, graphics and the profile. Blogger, without the CSS, is actually pretty organized.
First off, this won't work in all browsers. I have yet to see how Opera, IE 5 win/mac, AOL's abominations, Lynx, Safari, Netscape, Camino, Mozilla, Galleon and Konqueror handle it. Most browsers handle CSS and JavaScript differently. I have added some stuff that will cover FireFox and IE 6 to some extent. It seems to work and doesn't throw errors anywhere on my javascript console. Also this will most likely break your CSS and XHTML validation. I will work on these to make it valid, but for now, we'll go with what works.
We are actually doing two things here.
Next we create a CSS entry for hiding text when specified.
figure 1.a
Next we add the code to detect if we want this page to displayed normally or without CSS.
Once again, this is within a <itempage> tag so blogger knows to not even bother with it unless we are on a Itempage. Now we parse the URL bar for a ? and if it finds one, match the "printstyle" variable and put the word(s) after it into the array, in this case true or false. If it's null or not true, we put false into it. We use this array to determine if we allow the CSS to be written out or hide it as seen in the following IF statements.
Figure 1.b
Now we skip down to the area right after our blogger CSS template and add code that will either finish the Style tag or finish the hide text tag. We are now closing whatever we opened up near the top with our previous javascript. Depending if our array is true or not.
figure 2
Now we skip down to the area right before the side bar and add DIV tag or Hide text tag depending on the browser. IE has some serious issues with CSS so we add more code to allow IE to work. When I used just a DIV tag to hide the HTML, IE couldn't deal with it for some reason. Add the conditional statement, we can force IE to hide it.
figure 3
Now towards the bottom we add code that closes off the hidden part depending on what the array value was. This is basically as we did before.
figure 4
So in summary, we are taking two large sections of the code, and depending on what value is passed to the URL string, we determine if we want to format with or without CSS and with or without a #sidebar.
Test it out! Click the print button below and see what happens!
TODO:
First off, this won't work in all browsers. I have yet to see how Opera, IE 5 win/mac, AOL's abominations, Lynx, Safari, Netscape, Camino, Mozilla, Galleon and Konqueror handle it. Most browsers handle CSS and JavaScript differently. I have added some stuff that will cover FireFox and IE 6 to some extent. It seems to work and doesn't throw errors anywhere on my javascript console. Also this will most likely break your CSS and XHTML validation. I will work on these to make it valid, but for now, we'll go with what works.
We are actually doing two things here.
- Adding a function for determining if we want printed pages
- Hiding text when we have the correct flag.
Next we create a CSS entry for hiding text when specified.
figure 1.a
<Itempage>
<noembed><body></noembed>
</Itempage>
<MainOrArchivePage><body>
<Style type="text/css"></MainOrArchivePage>
<ItemPage>
<style type="text/css">
.hidden2
{
display: none;
visability: hidden;
}
</style>
Next we add the code to detect if we want this page to displayed normally or without CSS.
Once again, this is within a <itempage> tag so blogger knows to not even bother with it unless we are on a Itempage. Now we parse the URL bar for a ? and if it finds one, match the "printstyle" variable and put the word(s) after it into the array, in this case true or false. If it's null or not true, we put false into it. We use this array to determine if we allow the CSS to be written out or hide it as seen in the following IF statements.
Figure 1.b
<script language="JavaScript" type="text/javascript">
var URL = unescape(window.document.location);
if (URL.indexOf("?") > -1) {
var styleArray = new Array();
styleArray = URL.split("=");
}
else{
var styleArray = new Array();
styleArray[1] = "false";
}
if(styleArray[1]=="false"){
document.write("<style type='text/css'>");
}
else{
document.write("<"+"!--");
}
</script>
</ItemPage>
Now we skip down to the area right after our blogger CSS template and add code that will either finish the Style tag or finish the hide text tag. We are now closing whatever we opened up near the top with our previous javascript. Depending if our array is true or not.
figure 2
<MainorArchivePage>
</style>
</MainOrArchivePage>
<ItemPage>
</style>
<script language="javascript">
if(styleArray[1]=="true"){
if (navigator.userAgent.indexOf("MSIE")!=-1){
document.write("--"+">");
}
}
</script>
</ItemPage>
Now we skip down to the area right before the side bar and add DIV tag or Hide text tag depending on the browser. IE has some serious issues with CSS so we add more code to allow IE to work. When I used just a DIV tag to hide the HTML, IE couldn't deal with it for some reason. Add the conditional statement, we can force IE to hide it.
figure 3
<ItemPage>
<script language="JavaScript">
if(styleArray[1]=="true"){
document.write("<div class=hidden2>");
if (navigator.userAgent.indexOf("MSIE")!=-1){
document.write("<!--");
}
}
else{
document.write("");
}
</script>
</ItemPage>
Now towards the bottom we add code that closes off the hidden part depending on what the array value was. This is basically as we did before.
figure 4
<ItemPage>
<script language="JavaScript">
if(styleArray[1]=="true"){
document.write("</div>");
if (navigator.userAgent.indexOf("MSIE")!=-1){
document.write("-->");
}
}
else{
document.write("");
}
</script>
</ItemPage>
So in summary, we are taking two large sections of the code, and depending on what value is passed to the URL string, we determine if we want to format with or without CSS and with or without a #sidebar.
Test it out! Click the print button below and see what happens!
TODO:
- Create Valid Strict XHTML code
- Create Valid CSS
- Fix for Opera, Mac IE 5, etc.
- Add conditional for Itempage navbar removal
- http://www.webaim.org/techniques/articles/hiddentext
- http://www.devx.com/tips/Tip/13638
- http://forums.devshed.com/t10719/s.html
- http://www.pageresource.com/jscript/jstring2.htm
- http://www.w3.org/TR/CSS21/
- http://hem.fyristorg.com/g-force/test/hidecss.htm
- http://www.accessifyforum.com/viewtopic.php?p=352
- http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html