All Topics:
apps
css
dashboard
games
javascript
php
tehcl
textmate
tools
video

Topic: javascript

Fun with CSS Transforms in Firefox 3.1 and Webkit

published:
2009.02.17
topics:
css
javascript

WebKit based browsers like Safari have had CSS Transforms for quite awhile now, allowing developers to skew, translate, rotate, and scale HTML elements or the entire page with CSS alone. The Firefox 3.1 betas also now have CSS transformations. These CSS properties can also be animated with JavaScript, although finding documentation for how to do it in Firefox 3.1 was a bit of a hassle. Let me show you how it is done.


Tracking Browser Window Size with Google Analytics

updated:
2009.02.20
published:
2009.02.02
topics:
javascript
tools

When it comes to picking a width for my web designs, what I really want to know are the common browser window dimensions for a visitor. Google Analytics tracks screen resolution, but this is increasingly meaningless with the rising popularity of super high resolution wide screen monitors. Most websites these days are 1024 pixels wide or less, thus my browser window is generally about 1000 pixels wide. Every so often I visit a website that is setup for a 1280 pixel wide screen, and even though my widescreen monitor is much higher resolution than this, it really annoys me to resize my browser window. I don't want to hassle my visitors by being the only website they visit that forces them to resize. I will show you how to track the browser window dimensions (actually, the inner window viewport dimensions) for your visitors in Google Analytics. Update: Thanks to Paul for giving me a kick in the rear to fix a bug with listening to resize events.


My Error 404: Making a Black Hole with the Canvas

published:
2009.01.27
topics:
javascript

I felt like I should do something fun with the zachstronaut Error 404 page. Doing something witty with your error pages (specifically 404) is a fine, long running tradition on the internets. I was reading Wikipedia pages about celestial objects and sifting through the NASA site for inspiration when I got bored and decided to play some Super Mario Bros. It was after beating World 1-4 that I had that "eureka!" moment.


Updated: jQuery Animating Same-Page #Links Bugs

updated:
2009.01.24
published:
2009.01.18
topics:
javascript

Hey, read this first: There has been I'm sure many further enhancements since my patches. I'd check up on the smooth scroll github project hosted by Karl Swedberg. He is the original author of the code that I patched and has been maintaining everything.

Update: I have developed a potential fix for the Opera bug Karl Swedberg discussed in his comment on this post. Update #2: I've made further changes after Karl's second comment.

When designing this site I decided I wanted to animate smoothly scrolling to same-page #links, such as my link to the moon. I decided to use the "improved" version of the animated scrolling code originally written by Karl Swedberg. I've since found two fixed three bugs with this code. Read the rest of this post for the details and fixes.