JavaScript & jQuery

JavaScript & jQuery Tutorials

Animating from “display: block” to “display: none”

Animating display: block to display: noneAs you might already know, CSS3 transitions and animations allow you to animate a specific set of CSS properties. One of the properties that cannot be animated is the display property.

It would be great if we could do it, but it’s not currently possible and I’m guessing it never will be (e.g. how would you animate to “display: table”?). But there are ways to work around it, and I’ll present one way here.

HTML5 History API: A Syntax Primer

History WheelAs most of us probably are aware, a significant part of the HTML5 spec is the expansion of the History API.

This post will not be a super extensive discussion of this subject, especially since it’s something that I’m only now just getting into understanding better. But I thought I would put down the main components of the API, for my own quick reference, and I hope it will prove useful to my readers and those searching via Google.

thatsNotYoChild.js — Fixing Parent-Child Opacity

on | 9 Comments

Parent/Child signOne of the posts on this website that consistently gets a significant amount of traffic (5000+ page views this month alone) is a ridiculous article I wrote that discusses how to make a child element not inherit the opacity setting of its parent.

As we all know, opacity property can be annoying in this area.

Basically, if a parent element has an opacity value set at, say, 0.5, all of its children will inherit that opacity setting, and there’s no way to reverse that opacity on the child elements.

JavaScript ‘this’ in Different Contexts

JavaScript thisJavaScript has a reserved keyword called this that references something different depending on where you are in a JavaScript program.

In this post I’m going to summarize, by example, some different contexts and discuss what “this” would represent in each case. Note that all of these examples assume you’re developing client-side JavaScript in a browser.

My Current JavaScript Design Pattern

My Current JavaScript Design PatternWith every major JavaScript project, I’ve tried something new, improving on what I’ve written before. Currently, whenever I build something from scratch, I use a variation of what Addy Osmani and others commony refer to as the module pattern.

Here is my version below, which assumes jQuery, and then I’ll provide some explanation of what’s going on here and how I use it:

JavaScript Array Methods Reference

JavaScript Array Methods ReferenceBack in July I wrote a post called JavaScript String Methods Reference, outlining many of the ways strings can be manipulated in JavaScript.

Another area where JavaScript has a number of different methods available for use is Array manipulation, which I’ll cover in this post. As usual, I’ll do my best to keep it simple and accurate, but if I’ve erred or if you think I’ve omitted anything important, please comment.

Loading a Different jQuery Version for IE6-8

Loading a Different jQuery Version for IE6-8If you haven’t heard yet, last week the jQuery team announced on their blog that jQuery 2.0, which is scheduled for an early 2013 release “removes support for IE 6/7/8 oddities such as borked event model, IE7 ‘attroperties’, HTML5 shims, etc.”

In this post, I’m just briefly showing everyone a simple solution for serving a different version of jQuery (or really, any script) to Internet Explorer versions 6-8.

JavaScript String Methods Reference

JavaScript String Methods ReferenceWhen writing JavaScript, I often find myself Googling for info, or using Mozilla’s reference to find the exact syntax and argument definitions for methods associated with string manipulation.

A lot of references I come across have far too much info, so this post will give examples and brief descriptions of some of the most common and useful string-related methods. I tried to put the most common ones near the top, for quick reference.

Some Random JavaScript Coding Tidbits

Some Random JavaScript Coding TidbitsAlthough my knowledge of HTML and CSS seems somewhat rounded and complete, I don’t feel the same way about JavaScript. I always seem to be learning something new, or else reminding myself of stuff I might have learned years ago but have forgotten.

So here are a few things I’ve recently learned or read about that might be useful to you.