javascript to make a print page

Hi rhyno99!

Wow, long time no hear!  How have you been?

It sure looks like you are getting really ambitious on your hobby.  However, if I understand you right, this sounds to me to be more of a CSS question than a javascript question.  You can easily print your page using the javascript window.print() function from any button or link.

You can control what elements from the page you want printed by setting up a separate CSS file for printing.  There is a little tutorial on this at http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml

Hey Omni,
Good to hear from you! Wow, I see you're a wizard now; and ranked #22 on the hall of fame!  I'm still just about the opposite. :)

I would like it to be mostly the title and text on white background; no ads, a picture if available on the page, and some kind of site identifier. Something simple that I could print if I wanted to share the article in class.

I'll check out the link.

Thanks for your help again,
rhyno99

So looking at the article, seems that I need to link one of these two lines:

<link rel="stylesheet" type="text/css" media="print" href="print.css">
or
<?xml-stylesheet type="text/css" media="print" href="print.css" ?>
(the second one says it is for xml, is that xhtml as well?)

Do I just link one of these to a pic, button, or text, then create a print.css file with the styles? Is that all there is to it? Please advise about which one seems right for xhtml.
Thanks,
rhyno99

Hi Rhyno!

Hey thanks.  I had some free time a few weeks back so I decided to do some volunteer work here at EE.  I was shocked to see how quickly you can get up there in the ranks if you just answer a bunch of questions.  I started out at practically zero and within a few weeks I was at wizard.

Unfortunately my time got busy again, so my points are slowing down to a trickle, but I'm hoping things will slow down again so that I can spend more time helping people.

Let me know if you have any questions as to how to set up your CSS.

You'll need to use the first one:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

There, inside the CSS file, you will need to set to "display: none;" or "visibility: hidden;" all the elements you DON'T want to print.

Hey Omni,
I was trying to apply this as if it were a hyperlink. I guess I was thinking more in that direction.
Thinking about how it works, it seems that the css only comes through when I actually print. Can I apply the print.css to the page with the click of a button or link? This would be kind of a print preview without actually using print preview.
Thanks,
rhyno

Hi Rhyno,

I'm sorry, but I'm not sure if I follow.  Are you saying you want someone to click on the link and the page will rearrange itself into a printer-friendly format?

Yeah, I guess. Could a page reload with a new CSS? Maybe that is why I was thinking javascript?  Clicking the button or link might enact a code that says something like refresh but with a new css? Is this possible? What do you think?

HA!  Wow, you are asking for something really significant here.  I am afraid that to do what you are asking you would need to do a complete redesign and rethinking of how you have your site laid out.  (Which is an excellent example of why you should plan out your site design beforehand)  There are many ways you could do this, but if you don't use some sort of scripting language (besides javascript) like PHP, ASP, Ruby on Rails, etc. to create your pages (specifically with the ability to do conditional branching on your HTML layout), the only possible solution I could see is to change your page content to dynamic content (which would require you duplicating all your content and containing one copy inside a visible div and the other (say print friendly?) copy in an invisible div.  Clicking on the link would make the invisible div visible and hide the former visible div).  But honestly, if you attempt this without a javascript library like jquery, that will make the job all the more harder.

:) Planning???
I'm learning as I go. I try to plan, but I can only work with what I understand and build from there. I don't understand the positives and negatives of using php etc. over html. Is dynamic scripting the natural progression of web design? Is this what I should be thinking about eventually to move the site forward? Do you have a suggestion based on what you see from the site?
Thanks for your help.    

Yeah...

Rhyno, I hate to be the bearer of bad news, and believe me I sympathize, but the problem with computer programming is that the computer is very, very unforgiving.  There is no, "Oh, you made a mistake.  That's ok..."

Remember in an earlier question I brought up the same issue of not using an HTML forming scripting language like PHP.  To begin with, HTML is extremely unflexible and is difficult to manage WITHOUT a scripting language to set it up.

My recommendation to you if you plan to continue this "hobby" is that you continue your education.  Learn a scripting language like PHP (one of the top experts at PHP here at EE is Ray_Paseur, and he is constantly recommending a book from Sitepoint http://www.sitepoint.com/books/phpmysql4/.  You might want to get it and start playing with the examples.)

Also, try picking up the jQuery library from http://jquery.com.  Believe me, in spite of the learning curve, it will make your life a lot easier.

Now getting back to your original question, I'm afraid that you cannot expect too much more from what you've got.  The site was not planned to have the features you are contemplating having.

Dynamic scripting is NOT the natural progression of web design.  In fact, one tries in his designs to AVOID dynamics if at all possible.  However, as web sites become more and more complex, requiring newer and more complex features, then in many cases, dynamic scripting is the only solution.

You have put way to much work into this site to say to you, "Scrap it and start over", but you might want to consider the possibility of starting a new "replacement" site based on a server based scripting language, using the new knowledge you will get from Ray's book.

You could even make your life easier as you progress along by starting with CMS platform like WordPress.  WordPress can get a site up instantly, it would only be a question of designing your own custom theme, or tweeking the ones that come with, or are available for, it.

Look over my comments in this and the previous answer carefully, and let me know your decision as to the path you wish to walk.

BTW, just to give you a taste of the future, see how easy it is to swap out stylesheets in PHP:

<?php
if ($_GET('print-friendly') == 'true') { ?>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<?php } else { ?>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<?php } ?>

Select allOpen in new window

This code would be placed in between the <head></head> tags of your page.

Now I've seen basically a whole page in HTML between two php tags. Can php scripts work then? I'm not sure that the site needs to be dynamic, but I would like to learn more. I'm guessing jquery and php are similar? Because the site is boiled down to about 3 or 4 templates, the hardest work of the site is the content. Can pages in these languages be templates too? I'm guesing yes. Can editable areas be transferred to a page in a new language? I am trying to assess what such a change might entail.
Thanks for your help with this.

Once you learn a server scripting language, a whole new world of web design opens up to you.  There is no limit to the things you can accomplish using intelligent web design.  What you described would be possible, but not necessarily desirable as you discover how PHP can place and remove HTML elements in any manner depending on the conditions you set.

If you use a CMS like WordPress, there are (literally) hundreds of different templates you can use, or (my preference) simply design your own.  It is not that difficult.

jQuery is nothing like PHP.  jQuery is based on javascript, and is simply a library of functions that allow you to do things in one statement things that would take several statements to do in javascript.

Good news is, if you go with a scripting language like PHP, your code will be very similar to what you find in javascript.  Not so if you go to ASP.NET or ColdFusion.

If you use a CMS like WordPress, placing content is easy.  WordPress has an administrative backend that allows you to set and design your pages at will.

To transfer your site will require setting up your theme which may require some programming.  Depending on how much you want to customize your theme will depend on the amount of coding you will have to do.

Wow. I do appreciate this. Where do I start? Should I learn about wordpress? I've read how much easier php is to learn. Is this true? It sounds like there is a whole other world to learn about that opens new possibilities. Where would be the best place to start with my project in mind for the end result?
 Thanks for explaining this to me.
rhyno

Well, the first step I would recommend is that you get the book Ray recommends.  Next, I would check with your host and see if they support PHP and WordPress, and if they have a script so you can download WordPress to your site.  Let me know when you have done this, and I will upload a default theme you can play with (I wouldn't recommend playing with the themes supplied with WordPress until you become more comfortable with PHP).

I have messed with php a tiny bit. My host supports it. Seems like I had to do something, to enabe it or something but that is already done. I have a headfirst book on php /mysql. I only started it. Should I continue with this or this other one? I don't want to waste money, but I don't want to waste time if this book is much better. I really appreciate this coaching.
Thanks,
 rhyno

I'll start my book again and see how it goes. I may end up getting this other book too. Thanks for your help and I will let you know when I have downloaded wordpress and will post a new question at that point. Thanks, rhyno

No problem.  Just remember, "When in doubt, ask."

Thanks again

Hi Omni,
I was hoping you could answer a couple basic php questions. I'll title the question php transition. Hope to hear from you.
Thanks