jQuery for Designers - screencasts and tutorials
Learn how easy it is to apply web interaction using jQuery. Tabbing has been common place on the Internet for some time now. Today web sites will make use of tabbing without the page having to reload with the addition of JavaScript. For this tutorial ...
Learn how easy it is to apply web interaction using jQuery. Tabbing has been common place on the Internet for some time now. Today web sites will make use of tabbing without the page having to reload with the addition of JavaScript. For this tutorial I have created two screencasts demonstrating how to quickly apply a dash of jQuery to different layouts of markup, which, if the markup is well designed, it will automatically degrade nicely without JavaScript enabled. In a future article we will cover default browser functionality (i.e. supporting back, forward and bookmark buttons) and saving tab states.
Show all Visit Show Website http://jqueryfordesigners.comRecently Aired
-
HD
jQuery Infinite Carousel
With jQuery for Designer’s redesign I decided to add a ...
With jQuery for Designer’s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk through the fundamentals of the effect and how to recreate it.
-
HD
SlideDown Animation Jump Revisited
When using slideDown depending on the layout of your page, ...
When using slideDown depending on the layout of your page, you could still see the jumping effect, regardless of whether you fix the padding around the element.
-
HD
BBC Radio 1 Zoom Tabs
Gareth Rogers asked how to achieve the effect on the ...
Gareth Rogers asked how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.
-
HD
API: map & grep
map and grep are two utilities that are extremely useful ...
map and grep are two utilities that are extremely useful if you know how to use them, but more often that not, I see more convoluted code written to achieve the effect of these functions. Historically, I believe that John Resig was inspired by the Perl functions of the same name - which are basic building blocks of the Perl programming language. Let’s look at how you can use these functions.
-
HD
jQuery look: Tim Van Damme
Jonathan Diba writes to ask how the effects are achieve ...
Jonathan Diba writes to ask how the effects are achieve on Tim Van Damme's portfolio site, referring to Tim's site as one of the most compelling site design he's seen. The two key effects Tim is using are a simplified accordion and a hover effect. It's worth noting that the hover effect only works in WebKit (Safari & Chrome), but I'll show you how to create the effect using jQuery too.
-
HD
How to test if an Element Exists
A common question for beginners coming to jQuery: "Is there ...
A common question for beginners coming to jQuery: "Is there a function to return true or false if an element exists?" Not really, but there is a (very simple) way to find out.
-
HD
Ajax Spy
Last month I showed you how to create a spy ...
Last month I showed you how to create a spy effect as seen on the first version of QuickSnapper (though they've since changed their site design with to release the release of Little Snapper). However I did promise I would demonstrate how to ajaxify the spy.
-
HD
Play School: Easy Ajax - load
Ajax is made incredibly simple with jQuery. There's a number ...
Ajax is made incredibly simple with jQuery. There's a number of helper functions to get in to the nitty gritty of Ajax, but if you want something that's quick and simple to get going with the .load function is the best place to start.
-
HD
API: Filter and Find
As the first in the series of API screencasts, but ...
As the first in the series of API screencasts, but also as a good beginners tutorial, this short episode shows the difference between filter and find.
-
HD
Simple jQuery Spy Effect
A few years ago Digg released a very cool little ...
A few years ago Digg released a very cool little visualisation tool they dubbed the Digg Spy (it's since been upgraded to the Big Spy). Recently Realmac Software released the site QuickSnapper to accompany LittleSnapper. It's the QuickSnapper site (the left hand side) that makes use of the similar spy technique that I'll explain how to produce.
