Javascript

Lenticular Photos

30 Jan 2024

Growing up, I always loved those lenticular cards—ones that had two photos that transitioned as you rotated from side to side. Maybe it was a hockey player taking a shot or a superhero transforming from mild mannered day job to caped crusader. Since Apple released Live Photos, I’ve always felt like they could be used to create a similar effect and yet, no photo app that I’ve seen has imp...

Read it all »

Why Did I Have Difficulty Learning React?

01 Jul 2019

Just over six months into a job doing React development, I’ve been trying to figure out why it has taken me so long to feel comfortable with it. (Comfortable feels a bit too ambitious of a word. Maybe competent? Unexceptional? Whichever.) For me, I think it has come down to four different things: All the Technologies Writing JS differently Deep Hierarchies Evolving Approaches All...

Read it all »

Normalize Bootstrap Carousel Item Heights

02 Aug 2018

In working on a Bootstrap-based client project, they needed the heights of all the items to be the same height, even though the content was of different heights. Bootstrap uses position:absolute to move the items. As such, techniques like flex and grid aren’t of much help here. The top result on Google as of this writing works but only on one carousel. In an attempt to rewrite the script...

Read it all »

You got your CSS in my JavaScript

21 Feb 2016

Separation of concerns. You have your HTML over there, your CSS over there, and your JavaScript over there. Each should be as separated and independent as possible. Or so we’re told. While CSS Zen Garden gave us a glimpse of a possible world where CSS could change and HTML never would, the reality—at least, in my experience—has been much different. Design changes often require both HTML ...

Read it all »

Simplest JavaScript Slideshow

04 Jan 2016

Years ago, I put together a tiny jQuery script for doing a simple slideshow. Due to chaining, it was only a handful of lines. It still needed jQuery, though, which was a 93KB dependency (33KB gzipped). In the six years since then, browsers have improved their DOM APIs. What would it look like if I tried to write this script now without jQuery and used the DOM APIs along with some handy CSS? ...

Read it all »

More Simple jQuery Slideshows

19 Feb 2014

Over 4 years ago, I wrote a really simple slideshow script using jQuery. It just took a bunch of images of the same dimensions and cycled through them. The code is only a few lines long (jQuery notwithstanding). Since that time, however, people have often asked for variations. I've updated the demo page with most requested variations. Linking the Slides Sure the images rotated but you kn...

Read it all »

Going Simple with JavaScript

05 Mar 2012

I was making a change to a page that needed to pull from a remote API and make changes to various parts of the page. Sounds like the time to pull out jQuery and Ajax, doesn't it? Instead, I just used old fashioned JavaScript. Actually, I used new fashioned JavaScript. Browsers haven't stood still in the advent of libraries and frameworks. As a result, we can take advantage of those feature...

Read it all »

Handling CSS Transitions with prepareTransition

12 Jan 2012

Using CSS transitions can be quite fun. But what's not fun is when you want to transition something that needs to use display:none or visibility:hidden (or really, any non-transitionable property). For example, let's say you have a dialog. When the user clicks on the close button, you want the dialog to fade out — a simple transition from opacity:1 to opacity:0. The problem is that t...

Read it all »

Handling Active State for jQuery Animated Backgrounds

27 May 2010

Awhile back, I wrote an article on how to animate background images with jQuery to create some nifty effects. One of the most common questions I receive on that article is, "How do I handle active states?" It is time to answer that question. There are two ways in which you can handle the active state: Create a different animation for active elements; or Change the background ima...

Read it all »

Simplest jQuery Slideshow

11 Dec 2009

A friend was looking at doing a simple slideshow. The requirements were very straightforward: No animation controls. eg: play, stop. Images should cross-fade. Her instinct was to find an existing jQuery plug-in and revise it to work to her needs. That would seem simple enough but if you do a search for jQuery slideshows, you'll find that there are plenty of them and they are fille...

Read it all »

Creative Use of Bitwise Operators

12 Nov 2009

While at the Fronteers conference watching Thomas Fuchs go through his slides, a keen member of the audience noticed his use of bitwise negation and asked what it was for. Understandable, as there is so rarely a time where bitwise operators seem necessary. It did, however, remind me of a project that I worked on where I ended up using bitwise operators quite heavily in one particular chunk of c...

Read it all »

Multi-line JavaScript

05 May 2009

In a case of, "I didn't know you could do that," I discovered via some random blog post I've now lost track of, that you can do multi-line JavaScript by escaping the line breaks. var a = 'You can start here \ and continue here \ and then finish it up here.'; The backslash on each line allows you to keep going. It's a little bit cleaner than opening and closing quotes and a concatena...

Read it all »

Why I don't love JavaScript's Module Pattern

29 Apr 2009

The Module Pattern is the use of closures to create, in essence, private functions that are only accessible by other functions created within that closure. Functions can be attached to an object and returned outside of that function call. This establishes a public API and only the functions defined within that public API will have access to those hidden functions. The YUI blog documents this we...

Read it all »

Streamliner

21 Apr 2009

Now that I have a little more free time, I've begun the process of bringing Snitter back to life. The crowd of desktop applications has not deterred my resolve to (re)build a Twitter application of my own. I have a vision — a vision that I've had since before SXSW of last year — that I still have an opportunity to bring to fruition. However, along the way, ...

Read it all »

Using Yahoo Pipes to turn XML feeds into JSON APIs

08 Mar 2009

While I've known of Yahoo Pipes for awhile, I never really thought to use it until now. Pipes is a neat tool that Yahoo has put together to allow you to mashup feeds, filter feeds and create a completely new feed. Commonly, I've seen people take feeds from a number of different sources on a particular subject and combine them into a master feed. For example, they want a master CakePHP feed but ...

Read it all »

Screencast: Firebug Breakpoints

28 Feb 2009

That's right folks. It's time for another screencast! This time, I thought it'd be nice to cover a little bit of Firebug. I've actually been meaning to put together a few screencasts on Firebug. If you like this one, definitely let me know and I'll be sure to put some more together. In this screencast, I take a quick look at how to use breakpoints in Firebug to help in your debugging endeavours. ...

Read it all »

Embedding Twitter Status

18 Feb 2009

In building this iteration of the blog, I decided to follow that trendiest of trends and embed my latest Twitter status on my sidebar. Despite having been on Twitter for awhile and having my site linked from my Twitter account, I didn't really have anything pushing people from my site back to Twitter. Problem solved: add status to sidebar. But what's the best way to keep it up to date? I could p...

Read it all »

The Ol' Switcheroo

05 Nov 2008

You have an element and within that element you want an item to be clicked on and set as active. Then you want to click on another item and have it to be set as active. Maybe it's navigation, maybe it's tabs. This is a common pattern. So much so, that I've rewritten this code a few times but keep losing track of it. This is a jQuery plugin that does the ol' switcheroo and is very simple. When yo...

Read it all »

Using jQuery for Background Image Animations

22 Sep 2008

After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm...

Read it all »

Frustrating Typos with JavaScript

15 Apr 2008

Sometimes it's the small things that can frustrate you. A missing semi-colon, an extra comma. This afternoon, I ran into the invalid script type: <script type="text/javscript" src="example.js"></script> If you're more observant than I you'll notice that the second A is missing in javascript. Without a proper MIME type, browsers don't process the script leaving y...

Read it all »

Using setTimeout to Solve DOMContentLoaded

14 Feb 2008

Stuart Colville pondered the potential for using setTimeout to solve the DOMContentLoaded problem in browsers that don't support it, namely anything but Opera and Mozilla. His code is deceivingly simple: function DOMReady(f){ if (/(?!.*?compatible|.*?webkit)^mozilla|opera/i.test(navigator.userAgent)){ // Feeling dirty yet? document.addEventListener("DOMContentLoaded", f, false); }else...

Read it all »

Developing a jQuery Plugin

24 Jan 2008

Sometimes we get it in our heads that a task is too complex that we just ignore doing it. That's been my mindset when thinking about developing a plugin for jQuery. I've always thought that some of the code I developed would make more sense as a plugin but I just didn't have time to figure it out. After finally pushing myself into learning about jQuery plugins, I was left saying, "That's it...

Read it all »

Microsoft's XMLHttpRequest ActiveX Objects

21 Jan 2008

This is an excerpt from my book, Accelerated DOM Scripting available at Amazon and other fine retailers. Although it's only a small section of the book, it's one of my favourite pieces because it had always been a mystery to me. If you’ve scoured through any number of Ajax solutions, you might have noticed different XMLHttpRequest objects being referred to. Microsoft’s XML implemen...

Read it all »

CSS Animations in Safari

31 Oct 2007

Safari is building in CSS animations. That's right. With a little bit of CSS, you'll be able to animate obects on the page. The transitions are built using a number of CSS declarations for declaring what properties should change, for how long, and even being able to transform the object like rotations. Sound cool? I don't think so. Not only does it make CSS more complicated, it makes JavaScript m...

Read it all »

Questions and Winners of Accelerated DOM Scripting

01 Oct 2007

Wow. Over 230 people left a comment to win a copy of Accelerated DOM Scripting. Either people really want to get their hands on it or people just really like free stuff! A few people also had questions about the book and I figured now would be as good a time as any to reply to those. Questions Answered I'm thinking of writing a book, too. What software do you use? Most publishers have a Micro...

Read it all »

Accelerated DOM Scripting

26 Sep 2007

Yippeee! My largest writing effort to date has finally come to fruition: Accelerated DOM Scripting with Ajax, APIs, and Libraries published by the fine folks over at Apress. The book was something that I started last summer after having met the senior editor at the time, Chris Mills, at SXSW. (Chris has since moved on to Opera...the browser, not the musical style!) The writing was slow going and...

Read it all »

Determining Offsets with Scrolling Overflow

19 Sep 2007

In drag and drop situations, there's often a time where an area of the page is within an element with the overflow set to scroll. This is common to display a list of items that would be longer than the rest of the elements on the page. If you're dragging from Section A to Section B, you don't want the user to have to scroll down the page to access the drop point. JPG Magazine is a prime example o...

Read it all »

Private JavaScript

16 Jun 2007

With JavaScript, you can create private methods and properties using what Yahoo describes as the module pattern. Here's the basic construct, including a private method: MyObject = function(){ var privateMethod = function(){ /* do stuff */ }; var obj = { publicProperty:5, publicMethod:function(){ /* do stuff */ }; }; return obj; }(); // run it right away If you're...

Read it all »

IE Fires Onresize When Body Resizes

15 Jun 2007

When a user resizes the browser window, I wanted to resize some elements on the page. So, I attached an onresize event handler to the window. I noticed it rather peculiar when Internet Explorer 6 kept locking up on me. Turns out, IE6 fires the event even when the document body changes in size. Here's a quick example to demonstrate: <script type="text/javascript"> var currheight...

Read it all »

Toggler v0.1

03 Jun 2007

I decided to put together a little proof of concept. The idea is to mimic the functionality found in desktop applications like Adobe Photoshop where a user can click on a checkbox and while continuing to hold the mouse down, can move over other checkboxes and have them toggle as well. I've put together a demo page for Toggler that you can check out and play around with. Because this is a proof o...

Read it all »

Firebug 1.05 Profiling Bug

31 May 2007

I just reported this little nugget to the Firebug bug report. Basically, the problem I ran into was in trying to do some profiling using Firebug to see where my code bottlenecks were occuring. Little did I realize that I was being led astray. If you're not familiar with using the profile feature, you should be. It's a handy way to see how much time is getting spent in each function. (Maybe I'll d...

Read it all »

Managing Style and State

03 May 2007

Even on the simplest of web pages, we have to handle different states that parts of our document may be in at any time. Probably the most common of which is the simple rollover. Move your mouse over an element and the image changes. This was traditionally done with images and JavaScript until CSS came along and gave us the :hover pseudo class. What happens when a state needs a little more perman...

Read it all »

Shorter XHR Abstraction

18 Apr 2007

Ajaxian posted about Nicolas Faugout's approach to abstract the XMLHttpRequest object. if (!XMLHttpRequest) { function XMLHttpRequest() { return new ActiveXObject('Microsoft.XMLHTTP'); } } The problem, as pointed out in the comments of that article is that Internet Explorer declares the function before it runs the code. In Firefox (and possibly others), it doesn't. Therefore, it s...

Read it all »

Be Library Agnostic

27 Feb 2007

One of the slides in my presentation at Webvisions last year was titled "Avoid Library Calls". The idea behind this was to try and build your code in a way that it didn't need to be tied so deeply to one particular library. Here's the example I used: function makeBlack(elementname){ $(elementname).style.color = '#000'; } function makeBlack(element){ element.style.color = '#0...

Read it all »

Close your tags

26 Feb 2007

This has bitten me a couple times now and I feel like an idiot every time it happens. If you don't close your tags properly and you need to access elements via the DOM, expect trouble in Internet Explorer. I do most of my testing in Firefox which has been very forgiving and as a result, I'll get to the point where when I switch to test in IE, the browser throws an error and worse, won't even ren...

Read it all »

Handling Onscroll

23 Feb 2007

Way back when I first implemented the fixed comments, I used JavaScript to duplicate the effect in Internet Explorer 6. It was really choppy but it worked. This type of script has been around since the Age of DHTML but I still get the occasional person asking how this was done. So here's the original code I had: function window_onscroll() { var el = document.getElementById('postcomment'); ...

Read it all »

Clean Up Debugging

30 Jan 2007

I've come to depend on Firebug so much that I left behind a couple console.log messages while testing a project. Problem was, with Firebug disabled (or not installed as was the case with a client), the application was failing. Looking at the code, nothing seemed out of place. I tried disabling Firebug and true enough, it stopped working. Took me a couple minutes to realize the debug code was getti...

Read it all »

The JavaScript Environmentalist

22 Jan 2007

As a JavaScript developer, you are in many ways an environmentalist. JavaScript is a language unlike most other languages. For when it comes to JavaScript development, we must consider the mantra of the environmentalist: Reduce, reuse, recycle. Reduce When developing server-side, we have flexibility. For the most part, whatever code isn't executed, is simply hard drive filler. It doesn't affect ...

Read it all »

Mootools r.83 Cheat Sheet

11 Jan 2007

In the same vein as the Prototype Cheat Sheet, I decided to go through and detail the Mootools library, as well. In comparison to Prototype, Mootools is definitely smaller and it's obvious they've put more focus on interactivity and decent DOM traversing. I've colour-coded this one to match the four main categories that are in the download section of the web site and within the documentation. Th...

Read it all »

Prototype 1.5.0 Cheat Sheet

10 Jan 2007

I've gone through and detailed the methods and properties of each of the modules within the Prototype JavaScript library. I decided to revisit the cheat sheet. A couple people had been asking about it and with the final release of 1.5.0 just around the corner, now seemed as a good a time as any. I've done things a little differently this time. The first time around, I really just wanted to see ...

Read it all »

Is this overrated?

18 Dec 2006

In many of the JavaScript tutorials, there's plenty of concern over this. The this keyword is used to reference the current function/object context. The problem is, a function can easily be 'detached' from the object it was originally defined as a method of. As a result, the this keyword no longer references what you thought it should and errors occur. var obj = { myProperty: 5, myMethod:...

Read it all »

Determining the Droppable

08 Dec 2006

After covering the basics of a drag and drop, it's time to look at detecting things we're dragging over. When it comes to a drag and drop, you normally want to have something to drop onto. Otherwise, just dragging an item around the screen can get boring. You want to interact with the page somehow. You might want to drag items into a shopping cart, or sort a list of items, or dock some widget on...

Read it all »

Anatomy of a Drag and Drop

17 Nov 2006

The mechanics of a drag and drop are pretty interesting and most library implementations do similar things, albeit to various extents. As I explain the inner workings, I'll touch on Yahoo's, Mootools', and Script.aculo.us' implementations, what to expect, and how they differ. A drag and drop essentially consists of a few events (and by events, I mean, moments in time, not DOM events). There's th...

Read it all »

Singletons with Functions

20 Sep 2006

Previously, I had asked Which is Better, using var o = new function(){...} or var o = function(){..}();. At the time, it really just seemed to fall on personal preference. Both seemed to create singletons. It's just that some people like to do it one way while others perfer to do it the other way. A commenter on my recent article at Digital Web, Objectifying JavaScript, however, pointed out tha...

Read it all »

iTunes Search API Around the Corner?

13 Sep 2006

Could the Apple iTunes Store soon have a fully public API? On Apple's iTunes page, they have a search widget featured in the sidebar. What's interesting is that this AJAX-powered widget is returning a JSON object. How very API friendly! The script located at http://www.apple.com/itunes/scripts/itmsSearch.php currently accepts two parameters, searchTerm and searchType where the type is one of al...

Read it all »

Mootools Drag and Drop Example

11 Sep 2006

This example is outdated and will not work with Mootools 1.0. So, without an actual demo to play around with, I thought I'd put one together, both to see how easy it'd be to work with and to help demonstrate to others what to expect. What a better example than the drag and drop (especially since I'm finishing up a project that just happened to use drag and drop). Check out the example and check...

Read it all »

Mootools JavaScript Library Released

10 Sep 2006

The folks behind the popular moo.fx have gone and released their own JavaScript library called mootools, attempting to take the best of JQuery and the best of Prototype. The mad4milk team have the announcement on their blog. Probably one of the nicest features so far is the download page. Select the components that you need and dependencies will automatically be calculated for you. You also have ...

Read it all »

Testing for a Value in JavaScript Array

08 Sep 2006

Ever have an IF statement that has a whole bunch of OR (||) statements that keep testing a variable against a bunch of values? if(name == 'bobby' || name == 'sue' || name == 'smith') { ... } In JavaScript, there's an in operator that tests whether a property is in an object. We can actually use this to mimic the PHP function in_array. if(name in {'bobby':'', 'sue':'','smith':''}) { ... } ...

Read it all »

Element.extend an Element in Prototype

06 Sep 2006

Here's a quick way to add all the Element methods to a DOM element using Prototype 1.5 (I believe the RC is right around the corner if not already here). var div = document.createElement('div'); Element.extend(div); That's it. Then you can do things like div.show() or div.hide(). Well, you still need to append the DIV to the document but you get the idea. ...

Read it all »

Which is Better?

29 Aug 2006

Just thought I'd throw this question out to the crowd. var obj = new function(){ ... }; // OR var obj = function(){...}(); I prefer the former to the latter because I can assign properties to the object without explicitly having to return an object but I noticed Dustin Diaz did the latter in his latest screencast. Hands up if this kind of JavaScript minutia just put you to sleep. ...

Read it all »

Minimize Lookups to Speed up JavaScript

28 Aug 2006

A new post on the IEBlog has some decent tips on optimizing the performance of your scripts. Although written specifically addressing performance issues as they relate to Internet Explorer, I suspect most of the suggestions would appy to other browsers as well. The summary of the article, the first of a three part series, is to: Declare var for variables that are meant to have local scope Cache...

Read it all »

Cross Domain Ajax: a Quick Summary

18 Aug 2006

Here are a few of the most popular ways to do cross domain calls via JavaScript: proxies, JSON, and Flash. Cross domain proxy This is one of the most common approaches. Your script calls your server, your server makes the call to the remote server and then returns the result back to the client. There are some definite advantages to this approach: you have more control over the entire lifecycle. Yo...

Read it all »

JSON is a subset of the Object Literal

27 Jul 2006

WIth a lot of talk about JSON these days, it's important to understand the syntax and how it differs from the object literal — or rather how it's a subset of it. The object literal is encapsulated by curly brackets with zero or more property and value pairs separated by commas. Each property and value is separated by a colon. Property names can be an identifier, a string, or a number. Synt...

Read it all »

S5key: Slideshow Launcher

10 Jul 2006

Some of you may be aware of S5: the Simple Standards-based Slide Show System from Eric Meyer. It's a simple combination of HTML, CSS and JavaScript for creating slideshows. No Powerpoint required. S5key, is a Keynote-inspired addition that offers up some additional functionality. Now, I say "inspired" because to be honest, I've never used Keynote. The screenshots, however, looked neat and felt ...

Read it all »

JavaScript Namespaces

18 Jun 2006

The idea of creating JavaScript namespaces are coming up more and more. With the expanded use of OPC (Other People's Code &mdash "you down with OPC?"), the idea of using or taking advantage of JavaScript namespaces is coming up more and more. What is a JavaScript namespace? More importantly, "what is a namespace?" A namespace is a container and allows you to bundle up all your functionality ...

Read it all »

AJAX vs Ajax and Ajax Effects

25 May 2006

It's happened. I suppose it probably happened the instant the acronym itself was coined but AJAX isn't just AJAX any more. It's Ajax. (No, not the place outside of Toronto. Um, no, not the cleaning stuff, either.) Notice the uppercase A with the all the other lowercase letters. (Through second-hand knowledge, I'm attributing this distinction to Jeremy Keith — He can prove me wrong.) That's ...

Read it all »

Reboot: The JavaScript

02 May 2006

In the redesign, I thought long and hard about how to approach a number of issues. My solution was to implement microwidgets. Yes, I'm even giving them a name. For example, I knew going dark would annoy some people so I did the contrast microwidget (which incidentally has changed slightly from launch to be a little more obvious). The microwidgets are a combination of JavaScript and CSS and were fa...

Read it all »

What's wrong with innerHTML?

13 Apr 2006

I know Jeremy Keith's position on this but I still don't understand why him and others are so against innerHTML. Sure it's not part of a standard (yet) but neither is the XMLHttpRequest object (yet). When you have something that is faster and easier, why wouldn't you use it? Some have argued that it creates the potential for generating invalid markup but no more or less than creating invalid mar...

Read it all »

Triggering window.onerror

12 Apr 2006

Ajaxian covers a post on logging client-side errors on the server-side using AJAX. A commenter made mention of inconsistent behaviour when using the onerror event as detailed on PPK. In determining the issue, I noticed what appeared to be the issue and left the following comment on Ajaxian: For example, trying to run myfunction() where myfunction doesn't exist will trigger onerror. But running m...

Read it all »

Element Object in Prototype Revised

07 Mar 2006

One of my biggest peeves of Prototype was the singleton nature of the Element object. Doing Element.hide('myelement') just didn't feel right. Justin of Encytemedia has highlighted the recent updates which now allow for the much more elegant $('myelement').hide(). You'll need to download the latest version of Prototype (currently/still 1.5.0_pre0). Justin also demonstrates the ability to extend th...

Read it all »

Prototype Dissected

20 Feb 2006

I have since updated these cheat sheets. In getting to know Prototype a little better, I decided to go through the latest version of the Prototype library (1.5.0_pre0) and detail every method and property that was available. In doing so, I got a much better understanding of how the code works. Here are the files in a 1280x960 and a widescreen 1440x900 version. 1280x960 1440x900 1280x960...

Read it all »

Prototype-powered Popups

18 Feb 2006

Okay, I admit this is a little silly but after seeing Peter Cooper make a Prototype-inspired popup object, I decided to make a Prototype-powered popup object. This requires Prototype's Object.extend() feature to map parameters over default values. var Popup = { open: function(options) { this.options = { url: '#', width: 300, height: 300 } Object.extend(this.optio...

Read it all »

JavaScript: Passing by Value or by Reference

18 Jan 2006

In JavaScript, we have functions and we have arguments that we pass into those functions. But how JavaScript handles what you’re passing in is not always clear. When you start getting into object-oriented development, you may find yourself perplexed over why you have access to values sometimes but not other times. When passing in a primitive type variable like a string or a number, the valu...

Read it all »

Dealing with JavaScript Scope

12 Jan 2006

Over at Ajaxian, they've offered up a useful tip for dealing with code that exists in the global namespace and is conflicting with other scripts: move it into its own function. Example: (function() { // do you stuff here! })(); What's the global namespace? That's the window object. Any time you instantiate a global variable, it is automatically part of the window object. var myvar = 5; alert(...

Read it all »

Move over AJAX, welcome AHAH

24 Nov 2005

I jest. I just think it's interesting that people have taken the time to create an acronym and development process for something that everybody has been calling AJAX anyways. AHAH is Asychronous HTML and HTTP. HTML gets pregenerated on the server and then spit into the DOM via innerHTML. This is how I've always approached it. It just seemed so much easier and faster on the client side. As the team...

Read it all »

JavaScript Effect Libraries

28 Oct 2005

They're becoming all the rage: easy-to-use libraries that can make your application look sexy. Here's a short list to help you out: moo.fx Moo.fx is the newest one on the block and boasts a small 3KB footprint. Ignore for a minute that you need the 27KB footprint of Prototype to go along with that. All snarkiness aside, Prototype actually has a number of classes built into it that aren't required...

Read it all »

What is AJAX?

22 Jun 2005

After seeing a couple of my recent experiments mislabeled as AJAX-enabled, I think some explanation is in order. What is AJAX? AJAX is a new term coined just four short months ago by the folks over at Adaptive Path. I suggest you give it a read if you haven’t already. As they explain, AJAX stands for Asynchronous JavaScript And XML. At the core of all this is XMLHttpRequest. It allows a c...

Read it all »

Bookmark: Fix back button and enable bookmarking in AJAX applications

15 Jun 2005

Based on a technique used to fix a similar issue in Flash, Mike Stenhouse over at Content with Style put together a solution for Fixing the Back Button and Enabling Bookmarking for AJAX Apps. ...

Read it all »

Month Validator

12 Jun 2005

Niggle’s recent entry on good design, bad design touches on the usability of drop down date selection. Now, as any web developer who has had to put together a form with date selection will know, it is one of the most difficult things to achieve. Some (and I do this, too) simply have three inputs — one for year, one for day, and one for month. They might be text boxes or they might be ...

Read it all »

Your Favourite getElementsByClassName

27 May 2005

There's a variety of scripts out there for getElementsByClassName. Oddly though, the first 20 or so results from Google are confusing or completely inaccurate. So, what's your favourite getElementsByClassName script? Here's something I threw together based on an unusable script I just saw on Digital Media Minute. function getElementsByClassName(node, classname) { var a = []; var re = new...

Read it all »

Potable Quotables

27 May 2005

One of the recurring requests out of the fixed commenting system was the ability to point to a comment and quote from that post. While I haven't had the time to get that functionality together for my own blog, I had been asked by Jacob G. (of recent CSSVault fame) to put together a new design for a series of blogs that he had or wanted to put together [See Fun Money Blog, CPVault, and Filmsy]. O...

Read it all »

Stepping it up: Live Preview

16 May 2005

As many of you have seen with the redesign and the fixed comments, I've really tried to increase the usability of the comments. Why so much focus on the comments? Because your interaction is a critical part of why I run this site. Your insights and assistance are an asset to me and to anybody else who happens to come across these pages. In my next step in building a better experience and upon th...

Read it all »

Bookmark: Browser Filtering by DOM

12 May 2005

A decent breakdown of which DOM features are available in which browsers. More reliable than user agent string matching. ...

Read it all »

Global Variables in JavaScript

06 May 2005

Every tutorial that I've seen describes that to create a global variable you have to declare it outside the function. var myvar = 5; function myFunction() alert(myvar); // 5 } And this is the way I've been doing it for years. The problem is, I've never been particularly happy about this. It never felt self contained. Then I thought, "Hey, why not just attach it to the window object?" I almost...

Read it all »

Bookmark: domFunction

28 Apr 2005

brothercake puts together a great script for detecting the availability of objects while the page loads. This way, you don't have to wait until the window.onload event to access elements on the page. ...

Read it all »

Onscroll isn't always onscroll

26 Apr 2005

In continuation of my experimentation with position:fixed from yesterday, I decided to try and enhance the form slightly by having it check to see how close the comment form was to the top of the page. If it got too high, I'd change from position:absolute to position:fixed like I did yesterday. This should certainly resolve the issue for those at a resolution of 1024 by 768 that weren't able to f...

Read it all »

Using Images as Labels in Internet Explorer

11 Mar 2005

Internet Explorer has a bug where wrapping a label around an image doesn't work the same as if you wrap it around text. Example: <input type="checkbox" id="a"><label for="a"><img src="..."></label> What the label does is create an association between its contents and a control on the page. In most browsers, clicking on text or an image within the label will give focu...

Read it all »

Optimized True/False Assignments in JavaScript

11 Mar 2005

Ever write some javascript and find typing =true or =false just way too time consuming? Why not rely on some boolean assignment operators to do the trick? To make something true, use |=1. To make something false, use &=0. How and why does this work? Let's take a look at each one seperately. In the true example, we have |=1. What this basically means is take the value on the left of operator and p...

Read it all »

Variables declared even if unused

12 Feb 2005

Javascript "uses" the variable, even if it's declared in an if statement. Most people probably won't run into this. I only did by accident in trying to get some cross-browser stuff working. Here's an example: var i=5; function test(){ var a; if(a==0){var i=5;} alert(i); } Would you expect it to alert 5? In fact, it alerts as undefined. Even though the code within the if statement never get...

Read it all »

Peculiar Cross-Browser Regular Expression performance

27 Jan 2005

I just tried a quick test to see which of two regular expression techniques would perform better. I was quite surprised to find that different browsers gave me different results for different techniques. Now, this is in no way a truly scientific result and I'd be interested to see how it plays out on multiple systems and on multiple browsers. I put together the following code to test my two metho...

Read it all »

Clear Links to Current Page with Unobtrusive JavaScript Version Two

18 Nov 2004

To recap, I wanted some unobtrusive JavaScript that would automatically strip any link that was pointing to the current page. The problem with the first version was that initially, I didn't take anchors into account. A link to a page with an anchor was considered a different URL than one with an anchor. Then next step was to strip the links of all URLs that pointed to the current page regardless o...

Read it all »

Clear Links to Current Page with Unobtrusive JavaScript

18 Nov 2004

After reading through how to turn off current page links using CSS on The Man in Blue, I decided to put together a way to accomplish the same using JavaScript. The technique would be straightforward: loop through all the links on the page and remove the tag if it's the same as the current page. The problem is that the W3C DOM doesn't seem to have a way of removing the current node while retaining...

Read it all »

Storing Values in Bits

14 Sep 2004

When programming in scripting languages such as JavaScript or ActionScript, we store values directly in a variable or often in an array. While bitwise operations are often relegated for use in higher-level programming languages such as C++, there are advantages to using them in scripting languages as well. The premise behind storing values at the bit level is quite straightfoward. We simply store...

Read it all »

Gecko DOM Reference

23 Jul 2004

Another quick bookmark: The Gecko DOM reference ...

Read it all »

window.location on a Mac

09 Jun 2004

Sometimes in JavaScript, you may want to redirect a user to another URL. This is often done setting the window.location properly like so: window.location = "https://snook.ca/'; However, Safari and IE 5.2 for Mac (at least on OSX) behave a little differently than browsers on the PC. I put together this basic test page in order to see which scenarios work and which don't. <script type="text/ja...

Read it all »