jQuery posts

The introduction of the HTML5 spec introduced new tags for presenting media on a webpage; the <audio> and <video> tags, rendering the <object> tag no longer fit for video and audio streaming.

These new tags have made it considerably easier to add rich media content to your design, and in today’s video tutorial, I’ll be talking through the following features which make HTML5′s media tags so flexible:

Using HTML5 audio tags to play an audio track on load; wrangling HTML5′s more complex parameters, such as...

Hot on the heels of jQuery Mobile 1.3 comes jQuery 2.0, a brand new, full release version of the popular JavaScript library.

The big news — that we’ve known for a while — is that jQuery 2.0 has dropped the library’s support for Internet Explorer 6, 7 and 8. These so-called legacy browsers are slowly creeping towards extinction and it’s certainly true that very few people still use IE6. However, there are still...

jQuery Mobile 1.3 is now available as a stable release.

This new version spearheads the jQuery team’s efforts to fully incorporate responsive web design principles into its robust library. Among the new features are several widgets optimized for touch interfaces, including...

Lately some websites, like This is the Brigade and All You, have started featuring a dynamic and animated menu that resizes on scroll down. Minimizing the main navigation to allow more space for the content. In this tutorial, I’ll explain how you can create this menu yourself with HTML5, CSS3 and just a bit of jQuery. 

This kind of menu is great if you want to give special focus on your content throughout the whole website, and it also enables you to create a bigger and more impactful navigation on a user’s first visit to a website. You can better show your website brand or logo, great for the above the fold view; and after engaging the user in a visit, a smaller and minimized version hides away subtly to let the user focus mainly on your content.

There are several ways of doing this. In this tutorial, I’ll explain how to create a full width fixed menu bar, that resizes in height...

We launched our new StartupGiraffe website a few months ago, and we’ve been meaning to write a post about how we did a piece of the frontend for anyone interested.

Our goal was to create a fun and responsive site that showed off our brand. Once our friends at Barrel NY agreed to do the graphic design for the site, we knew we’d also be able to pull of some neat tricks. We’d told them we wanted a really tall giraffe, but we didn’t really see all of the possibilities until we got the designs back: there were polygons of different colors, angles and shapes in the background; in the foreground, there were all sorts of elements that could work well in a parallax website…and there was that...

Thumbnails are one of the purest pieces of usability the digital age has created. In essence a thumbnail is a preview, a promise of what you’ll see if you click the link. A small glimpse with less data, faster to load and less greedy for screen real estate than the full-sized asset. They’re ideal for images, but what about video?

Well,...

If there’s one thing that drives me insane online, it’s when input forms allow me to enter incorrect data, only to point out the mistake after I try and submit it. It seems like half the forms I submit have to be refilled and submitted over again because I didn’t include an uppercase letter in my password, or I did, or the password can only be numerical, or some other requirement nobody thought to mention.

The way the brain works, we look for solutions based on the tools in front of us. You don’t enter uppercase letters at the ATM do you? No, because the ATM keypad only has numbers. You might hit the wrong number by mistake, but you’ve never tried to enter your email address, or your mother’s...

I’m not sure whether it’s Instagram, Hipstamatic, or some other smartphone photography app that should be thanked (blamed?) for the advent of applying vintage or other effects to every photo taken, but regardless of who started it, it doesn’t appear to be a trend that’s going away any time soon.

Whether you love vintage-looking photos or not, chances are, you may need to use them in one project or another, either because a client or the project demands it.

Rather than spending...

Optimizing how space is used on a screen is a key component of good web design, and especially of responsive design.

There are a number of ways to approach this kind of challenge, and one of the most popular is auto-arrangement of elements within a parent container. It’s efficient, and when well-executed, creates a layout that’s both visually appealing and functionally optimal.

If you’re designing a responsive site, you’ll almost certainly find the need to rearrange...

It’s hard to identify universally accepted rules in web design, but if there is one that the whole community agrees upon, it’s that you should always separate your content from its style.

On almost every webpage, data is output as HTML and style rules are applied using CSS. Nobody mixes data and style in the same file anymore…

…Except you. And me. In fact we all do it, everyday. Almost every image you see online has been cropped, twisted, styled, toned and resized to the point that it’s impossible to separate the original data from the subsequent...

jQuery is the largest open source, cross-browser, CSS3 compliant, JavaScript library around and it has made client-side scripting a breeze.

The syntax is simple and jQuery can produce beautiful almost Flash-like animations. Unlike Flash, jQuery is viewable on iOS and it produces dynamic web pages easily.

jQuery is rapidly growing in popularity and with the recent jQuery conference held in San Francisco...