Posts Tagged ‘CSS’

QuickFlip jQuery Plugin

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…)


Handy CSS Cleanup Tool

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…


jQuery Video Game Remake: T&C Surf

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…


A Simple jQuery Slideshow

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:


Why WYSIWYGs Suck

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…


Dating Software Customization

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.