Free HTML Tutorials   •   CSS   •   Popups tutorial   •   Frames Tutorials   •   Forms Tutorials   •   Beginners HTML Tutorials   • Advanced HTML Tutorials   • JavaScripts   • Free Web Page Tutorials   •   Free Downloads
OzWebLogo Advanced Section

JAVASCRIPT 4 		 

Here are more handy little scripts - one to print a web page, and one to close a page & return to a previous page. They can be combined, so your visitor can print the page then close it to return to the first page.

You must be very careful when copying the code - note that sometimes quotes are single  '  and sometimes double  " . This is NOT a mistake and they must be exact.

PRINTING FROM A WEB PAGE

Add a Javascript button so viewers can print the page they are viewing.

This script is not available as a zipped download. You can simply copy the parts you want, by highlighting them, then using CTRL+C to copy, CTRL+V to paste in an appropriate text file.

This part goes in the <HEAD> section of your page:

    <SCRIPT LANGUAGE="JavaScript">
    function myprint()
    {
    window.print();
    }
    </SCRIPT>

This part goes in the place where you want the Print Button:
    <INPUT type=button value="Print Page" onClick="myprint()">

This is what the PRINT button looks like:    

This button is "live" and will print this page if you click it, on or off line. You can change the wording of the   "button value="   to whatever you prefer. If you want it coloured, revise Forms 3 for the code.


OPENING A NEW BROWSER WINDOW THEN CLOSING IT

If you want to send your viewers to another page without closing the first page this is the way to do it. The part in red is the web page URL. If it is on the same site just use the html reference as given; if it is on a different site you will need the full URL (eg. http://www.anothersite.com).

On the original page use this link to the secondary page.

    <A HREF="newpage.html" target="_blank">

This opens the page in a new browser window without closing the first one. In IE the page will open minimised. (A fix for this is given later.)

In the secondary page, add the following in the <HEAD> section of your page:

    <SCRIPT LANGUAGE="JavaScript">
    <SCRIPT TYPE="text/javascript">
    <!--
    window.focus();
    //-->
    </SCRIPT>

Then put this where you want the close button to go:
    <INPUT onclick="self.close()" type="button" value="Close">
Go to HERE to see the CLOSE button in action.

Again, you can change the wording of the   "button value="   to whatever words you prefer.


OPENING A FULL BROWSER WINDOW

As mentioned, the previous script opens a minimised window in IE, but a full page in Firefox and some other browsers. To open a full window, try the following script.

This part goes in the <HEAD> section:

    <SCRIPT>
    <!--
    function fullwin(targeturl){
    window.open(targeturl,"","fullscreen,scrollbars")
    }
    //-->
    </SCRIPT>

This part goes where you want the link:
    <FORM>
    <INPUT TYPE="button" ONCLICK="fullwin('newpage.html')" VALUE="Open window">
    </FORM>


And now an example of a page which uses the above PRINT script and combines it with a CLOSE button.

Just click HERE to see the page.

If for some reason the scripts don't work for you, try a search for free JavaScripts. There's a million of them on the web.

And now let's review what we've learned in this tutorial.




Next:   Summary & Practice

Advanced Index

Help


Copyright ©1998-2008 OzWebWeaver