Posts Tagged ‘CSS’

QuickFlip jQuery Plugin

October 20th, 2008

Quickflip Plugin for jQuery

QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it's not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over (more…)

Tags: , , , , , , , ,
Posted in front-end | 37 Comments

Handy CSS Cleanup Tool

August 27th, 2008

Dust-Me Selectors

Inevitably, when finishing development of a front-end, I find myself going through the painstaking process of cleaning up extraneous CSS styles. This style was for debugging, this block was for a page that got nixed, this piece I used when conceptualizing the site another way: I don’t think it’s possible to develop a website without removing some styles at the end. Dreading another round of CSS cleanup, I considered programming a tool to spider a site and tell me which parts of the stylesheets were used. It seemed a daunting task so I checked online, and sure enough, someone had already developed it, and far better than I could have. The tool I found, Dust-Me Selectors, is a Firefox extension that makes cleaning up CSS a snap. It can spider an entire site or a group of pages to determine which CSS blocks are unused … Read more…

Tags: , , ,
Posted in front-end

jQuery Video Game Remake: T&C Surf

August 18th, 2008

T&C Surf Designs

When I was seven, my all-time favorite video game was T&C Surf Designs for the 8-bit Nintendo® (NES). Feeling nostalgic this weekend, I developed a version of this old school game using jQuery and Javascript.

Up and Down to move, Left and Right to skate faster or slower, Spacebar to jump

After playing Javascript Mario Kart, I’ve been wanting to develop a classic video game with jQuery. T&C seemed like a good fit because its motion and overall simplicity are ideal for jQuery’s animation library (and it’s really fun).

I’m fairly pleased with the performance, which is vastly improved through the use of cell-based collision detection. Instead of having to check for collision every pixel, it can be checked every 32, with huge processing savings. Additionally, the use of CSS sprites greatly reduces the number of HTTP requests and the need to use … Read more…

Tags: , , , , , , ,
Posted in webdev | 23 Comments

A Simple jQuery Slideshow

July 29th, 2008

Simple jQuery Slideshow Tutorial

In the interest of following jQuery’s motto of “writing less and doing more,” let’s write a simple slideshow using jQuery, JavaScript and a bit of CSS.

For starters, our main goal should be keeping the markup as clean as possible: <div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div> Now let’s use CSS to position the images on top of each other and bring the active image to the images on top of each other and bring the active image to the top level with z-index:

Tags: , , , , ,
Posted in webdev | 227 Comments

Why WYSIWYGs Suck

January 1st, 2008

It’s a new year, and what better way to start off than with a lengthy rant. Strap yourself in.

People often ask me why I am so concerned with writing standards compliant HTML, and they have good points, mainly that it takes longer to develop something that is compliant, and the only people who really know if it is are other developers. I’ve always been in favor of standards compliant code, but to be honest, for a long time I didn’t even know why I did it, it was really just nerd lore to me, the big nerds wanted it, and I agreed blindly. You might think that a production environment with constantly encroaching deadlines would make me throw my compliance to the wind, well to a certain extent it does (although I write standards compliant XHTML out of habit, I do not have time to fix other people’s … Read more…

Tags: , ,
Posted in webdev | 4 Comments

Dating Software Customization

October 19th, 2007

I’m customizing this dating software for three different sites. Basically each site will have a different stylesheet and limited differences in functionality. It’s somewhat difficult to develop since a lot of the core functions are hashed, so we’ve had to make some compromises on what we can and cannot modify. Overall I’m actually happy that we went down the software modification route, since developing this from the ground up would take much longer, especially the streaming flash video chat.

Tags: ,
Posted in webdev

Newer Entries »