JavaScript & jQuery

JavaScript & jQuery Tutorials

Triggering CSS3 Transitions With JavaScript

Triggering CSS3 Transitions With JavaScriptAt the beginning of this month I wrote a post accompanied by five demo pages that showed that CSS3 transitions could be triggered with a number of different events/states in CSS.

That alone should help you see how these types of simple animations work. But let’s take this a bit further.

CSS pseudo-classes and media queries (which I used in that other post to trigger the transitions) represent certain states for certain elements. These states occur after specific events on the page. So naturally, CSS3 transitions can also be fired using any JavaScript event. Let’s try a simple click event that toggles a class name.

A Bookmarklet to Fix Wikipedia’s Layout in a Wide Browser Window

A Bookmarklet to Fix Wikipedia's Layout on a Wide Browser WindowI have a wide monitor and I like my windows to be maximised (I’m on Windows 7). I also like when Chrome is maximised, because I usually have about 7,623 tabs open at any given time, so the bigger the window, the better.

Thus, when I visit a page on Wikipedia, it’s unreadable — because Wikipedia’s layout is fluid and it fills the whole monitor. It normally looks like this:

How is the DOM Affected by Improperly Nested HTML Elements?

on | 8 Comments

How is the DOM Affected by Improperly Nested HTML Elements?Here’s something interesting I came across while reading Introducing HTML5 by Bruce Lawson and Remy Sharp, which I recently purchased.

In one of the early chapters, Bruce mentions that when tags are not nested properly, the resulting generated DOM will be seen differently in different browsers. Of course, when you “view source”, the code will be the same in all browsers. It’s when you inspect the page (or view the “generated source”) using developer tools that the results can differ.

After some testing, this is indeed the case. Here’s the code that I tested:

What’s the Best Way to Write a JavaScript For Loop?

What's the Best Way to Write a JavaScript For Loop?When coding JavaScript, I find myself using the for loop fairly often. Recently, when I coded, then re-coded these drop-down menus, during the re-code I ran my JavaScript/jQuery through JSLint using the option called “The Good Parts”.

I don’t know a whole lot about JSLint, but I figured that would be a pretty good way to ensure the code was efficient, relatively future-proof, and easy to maintain (i.e. it uses best practices).

The info JSLint provided, as well as other stuff I’ve read in the past, got me thinking about the simple JavaScript for loop and how it’s customarily written.

Slide-Down Mega Drop-Down Menus with Ajax and jQuery

Slide-Down Mega Drop-Down Menus with AjaxWhile reading an article on CBC’s website, I noticed they have added what seem to be newly-designed mega drop-down menus that work in an interesting kind of way.

These looked like a cool and simple thing to reproduce, so I gave it a shot and came up with something that I think works pretty nicely.

It wasn’t as simple as I thought, and I don’t think my code is the greatest, so I’m open to suggestions. I think this could form the basis for a jQuery plugin but I’ve never created a jQuery plugin so holding I’m off on that for now.

jQuery Tutorial for Beginners Downloadable PDF

jQuery Tutorial for Beginners Downloadable PDFA little over a month ago, I published a fast-paced jQuery tutorial that went through a bunch of the syntax basics, to help those new to jQuery get up and running with it as quickly as possible.

In the comments, someone named Kelly said they saved the page as a PDF. I thought that was a great idea, so I thought I would reformat the entire tutorial as a PDF for easy downloading and printing.

Using JavaScript’s Try-Catch Statement

Using JavaScript's try-catch StatementI don’t consider myself an application developer. I think I have some knowledge of application design principles, but it’s something I’d like to improve on, especially in the area of JavaScript and Ajax-driven applications.

One technique that I believe is quite helpful when developing high-powered JavaScript apps is the JavaScript try-catch statement (also referred to as try-catch-finally). I became familiar with try-catch sometime last year, and although I haven’t used it much, I found it could prove useful in a number of circumstances.

In this article, I’m going to describe what try-catch is, how it can be used, and how it can help make web applications less annoying to users.

How to Dynamically Highlight Content Like Wikipedia Using CSS3

Dynamically Highlighting FootnotesIf you’ve ever clicked on a footnote link in a Wikipedia article, you’ve probably noticed that two things happen: (1) the link brings you to the footnote section at the bottom of the page; and (2) the selected footnote is highlighted with a different color. In a list of footnotes, this feature makes it easy for the reader to visually access the appropriate footnote.

This is a neat little technique that is accomplished easily using the CSS3 :target pseudo-class selector. Unfortunately, this is another CSS3 feature that has no support in Internet Explorer, and so has been largely overlooked up to this point.

In this brief tutorial, I’ll show you how it’s used, and also provide a quick little JavaScript solution that can be added to an IE-only external script to get it to work cross-browser. IE (all three versions) is the only browser that fails to offer support for this very practical CSS3 feature.

jQuery Tutorial for Beginners: Nothing But the Goods

jQuery Tutorial for BeginnersNot too long ago I wrote an article for Six Revisions called Getting Started with jQuery that covered some important things (concept-wise) that beginning jQuery developers should know. This article is the complete opposite; there’s no concepts, no principles, and very little lecturing — just some straight example code with brief descriptions demonstrating what you can do with jQuery.

This fast-paced tutorial should be able to get beginners up and running with jQuery very quickly, while also providing a good overview of what jQuery is capable of (although jQuery’s capabilities go far beyond this beginning tutorial).

Keep in mind that this tutorial is just a bunch of straightforward, superficial code examples and very brief explanations for beginners who want to avoid all the jargon and complexities. But I still highly recommend that all beginners get past this stuff by means of a good book, some more in-depth tutorials online, or by using the jQuery documentation.

Inject Custom Ad Blocks Between Paragraphs in WordPress

How to Inject Custom Ad Blocks Between Paragraphs in Older WordPress PostsIt’s common nowadays for bloggers to monetize their blogs through the use of strategically-placed ad blocks. BuySellAds ad blocks are the most popular in the web design community. You’ll sometimes also see AdSense ads placed at the top of articles or in other spots.

It becomes a bit of a challenge, however, to include ads in older posts. Nobody wants to go through and edit each post, adding customized code manually, which could be quite time consuming.

The best way to do this is to put the ad code in your single.php page, outside of the function that displays the post. Unfortunately, with this method, the ads are limited in location to either the top or bottom of the article. In this tutorial, I’m going to describe some JavaScript that I wrote that will dynamically embed a custom ad block between paragraphs in all your WordPress posts.