Hiding elements from printing

The question comes up all the time: Can I prevent people from printing my web page or an image on the page?  The short answer is unfortunately "No".  You can make it difficult for them, but a determined visitor will still find ways.  So far nothing I'm aware of can prevent them altogether.  Basically, if you put it on the page, they can see it and find a way to print it.

Another way of looking at the same problem is removing elements of your page that don't need to be printed.  For instance, if somebody is reading an article on your site and wants to print it, they probably don't need the navigation, advertisements or a print button on the printed page.  They want to read the article, not look at the framework around it.

Doctypes: What are they and why should you care?

Imagine walking into a room where everyone speaks english, but they all come from different countries, and different sections of each country.  It's all the same language, but the words they use can mean different things to each person.  For instance, somebody from England might ask you to "fetch a torch from the boot".  To an American, that wouldn't make much sense unless you knew to expect the British version of English.  Then you'd know that he was asking you to get a flashlight from the trunk of his car.

A doctype can be thought of as a definition of what variation of language your page is written in.  If you don't specify a doctype, each browser will try to interpret things their own way and the results can either be subtly different or completely off, so a doctype should be considered mandatory.  Unfortunately, they are very often forgotten about until after you've spent hours or even days trying to figure out why your page isn't working as it should.

jsFiddle - A site for debugging

Sometimes you just need an environment where you can put together your HTML, CSS and javascript without having to build a server, install different javascript libraries, build your page and all that... you just want to see how this fragment of code would work.  Or you need to show another developer how a certain bit of jQuery or CSS works and you don't have a site they can access.  Maybe you can't get it working, and want to ask your favorite support forum for help?  There are many sites out there which can help, including one that I use for many of my posts here on jUntangled as well as when I'm helping other members of Experts-Exchange with questions they have.  I heard good things about jsFiddle for this purpose, and signed up for a free account there.  Here's what I found...

Internal Anchors

Anyone doing even the most basic HTML coding has used the <A> tag to create a link to another page or document.  Many of us have also used it to link to another <A> tag further down the page, or back to the top (typically in a table of contents)  The <A> tag has many other uses and options that you may not be aware of.

Tabbed Interface

Tabs... they're everywhere now. People know and love them, but creating them yourself can be a pain. Thankfully, jQuery UI has a simple and easy to use function to create them from an unordered list and a set of DIV's. The implementation is very quick and provides a sleek-looking interface by default, which can be styled by CSS to pretty much any look you want.

Cycling through multiple functions

Sometimes you may want to click an item and cycle between 2 (or more) different functions - for instance first show, then hide another item.  This may be for building a custom navigation, displaying additional options, or any other scenario where you want to have an on/off type of functionality.

jQuery 101: Basic examples

Okay - so you know what jQuery is, and have it installed on your site.  Now what do you do with it?

The possibilities are really limitless, but we have to start somewhere... The first thing you'll need to know is how to address what it is you're trying to act on.  Everything in jQuery is based on that.  You'll target something, then either act on it immediately or set up a function to be run later when a given event happens.  The most common of these are the click event or the hover event, but there are many more.

General coding practices

While not necessarily specific to coding jQuery, I've compiled a few tips and helpful practices that may keep you a little bit saner while you're coding javascript.  None of this is required in order to make things work, but may prevent or help you debug mistakes.

Comment more than you think you need to

Whether you're in HTML or javascript, you're bound to have multiple levels of nesting going on.  As most people do, I try to keep everything indented to show the levels of nesting.  Some editors even highlight the matching close if you click on an open (I use Notepad++ for most coding) but even still it can be tricky following your end-braces, close-DIVs and such when it gets complicated.  My professors in college drilled it into our heads, most of us ignored it at the time, but they were right.  Add more comments while you're coding than you think you will need.  Coming back to it later (even a few hours later) you may not remember what a piece of code was supposed to be doing, or why you did it that way.

Installing jQuery

You've read about jQuery and you want to install it on your site.  Now what?

Installing the library is as easy as linking in a single .js file (for the core functions) and optionally the jQuery UI library if you want to use some of the extra features.  For now we'll focus on the core library, since the technique for jQuery UI is the same.  Once the library is included on your page, you call the functions almost the same as you would with plain javascript, with the <SCRIPT> </SCRIPT> tags.  You'll want to wait for the DOM to be ready before calling your code...  In plain old javascript that was normally done like this:

<script>
   function init() {
      // Call your startup code here
   }
   window.onload = init;
</script>

What is jQuery, anyway?

According to jQuery's website:

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

Their motto is "Write less, do more" and they definitely achieve that.  What it does is allow you to use jQuery's functions, events and properties merged with (or instead of) the standard javascript code to offer more powerful features which handle issues such as error-checking, cross-browser bugs and such for you.  Because of this, your code is easier and faster to write, more thoroughly tested, and more extensible, without the need to write your own library of tools.  jQuery sits on top of javascript, extending the features without replacing them.  You can use a mixture of standard javascript and jQuery in the same page seamlessly.