Using jQuery to Attach Events to Future Elements

I’m sure most jQuery users are familiar with the various methods used to attach event handlers (such as “onclick”, “onchange”, etc.) to elements that already exist on the page, but many probably aren’t aware that you can have jQuery automatically add those event handlers to any future elements, too.

Traversing the DOM Tree with jQuery

Although jQuery can be extremely simple to use once you get the hang of it, there are so many functions and methods that it can be overwhelming and confusing at times.

One issue I had over the last week or so was figuring out how to simply traverse the DOM tree. Using jQuery selectors, it’s a breeze to do so; but what do you do when you’re working on a specific jQuery object and you want to go up or down the DOM tree?

Let Your Users Know an AJAX Event has Occurred

With AJAX becoming more and more prevalent, we, as developers, sometimes forget that the average user might not realize parts of the page have changed after an AJAX event has fired. This becomes especially problematic when the changes are occurring outside of the current viewport (which is highly likely if you have a large percentage of visitors using an 800×600 or even a 1024×768 screen resolution).

By adding a few simple lines of javascript to your AJAX event handler, you can make your visitors aware each time the AJAX event changes the content of the page.

Hiding and Showing Elements with Javascript

This is a quick tutorial to explain how you can easily show and hide page elements with javascript.

To begin with, each item that you want to hide/show should have a unique HTML ID. Let’s begin with a very simple HTML page.

<h1>This is my title</h1>
<div id="content">
	<h2>Div1 Follows</h2>
	<div id="div1">
		This is where my first div will be.
	</div>
	<h2>Div2 Follows</h2>
	<div id="div2">
		This is where my second div will be.
	</div>
</div>

We will then write a function that will hide all of the appropriate divs (in this case, div1 and div2).

Do People Still Use the Noscript Tag?

I am curious: Are people still using the “noscript” tag in their Web pages? If so, why? What are you doing with that tag? Are you using it simply to tell your visitors with javascript disabled that they might be missing something?

I honestly do not see the need for the noscript tag anymore. With the ability to fully manipulate the DOM using javascript, isn’t it easier to create the page the way your non-script visitors should see it, then use javascript to move things around? For instance, if you want to tell non-script users that a textarea includes a javascript-powered WYSIWYG editor, isn’t it easier to hardcode a div in your page just above or below the textarea that says something like “The textarea utilizes javascript to offer more functionality and features.”, then use javascript to remove that div from the DOM when the page loads?

Manipulating the DOM with javascript – part 4 of 4

This is the final installment of my four-part tutorial on manipulating the DOM with javascript. So far, we have explored the createElement, appendChild, insertBefore, replaceChild and removeChild functions. In this final post, we will explore the createTextNode function, and will then put it all together into a real world example.

Pages: