All video lessons jQuery for Designer.com
MOV
English
800x600
mono AAC 22050Hz
761 MB
Genre: Eleaning
All the video lessons with jQuery for Designer.com. They reveal various secrets of working with the javascript library jQuery. In the lessons explained in detail how to create a gallery using jQuery to accomplish the download images using Ajax and much more. While all the lessons in English, the author explains everything quite clear.
Manufacturer: jQuery for Designer.com
Year: 2008 - 2010.
Language: English
Description lessons
* 1 Adding Keyboard Navigation
length: 13:34
Mathieu White got in touch with me to ask how to add the keyboard support to his site. He wasn't using my own slider code, he was using Niall Doherty's version. Since changing the slider code was out of the question, and moving to my own carousel code to trigger the goto events would also be way too much work for a simple effect, I wanted to find a simple and easy to add solution. So to keep things as simple as possible, I worked out I should be able to layer on the functionality after the slider code was finished.
* 2 Ajax Spy
Duration: 16:24
My key priority for me, when I'm writing code that will make Ajax hits, is that where possible, I'm throttling the number of hits. By this I mean, I'm only performing Ajax requests when I absolutely have to.
To achieve this, I'll show you in the code where I have created a hidden store of the Ajax response that I use to populate the spy at the preset interval. This gives the impression of real-time data. It's almost real-time, and since we're not working with finance systems or data that absolutely has to be real-time, it's acceptable.
* 3 Automatic Infinite Carousel
Duration: 5:25
To make the carousel automatically loop round by itself is pretty easy. In addition to automatic scrolling, I wanted to add the ability to make the scrolling pause when the mouse was over the carousel. To do this we need:
1. An event we can trigger to go to the next panel
2. A timer to keep firing the new custom event
3 Mouseover and mouseout events to pause the timer
* 4 BBC Radio 1 Zoom Tabs
Duration: 29:54
The first thing I noticed about the effect is that it's done in Flash. I'ma big believer in knowing where Flash has it's place: the high end of the effects within browsers (amongst other places).
* 5 Coda Popup Bubbles
Duration: 16:19
To create the puff popup bubble effect, we need the following:
1. Markup that assumes that javascript is disabled. It would be fair to say that the popup would be hidden from the CSS.
2. The hidden popup, correctly styled for when we make it appear.
3. jQuery to animate the puff effect on mouseover and mouseout.
Number 6 Coda Slider Effect
Duration: 32:54
Recreating this effect is simple to do if you know what plugins to use. There are plugins out in the wild already, but we want our jQuery to satisfy the following requirements:
1. Degrades perfectly without javascript enabled
2. Sliding panels effect without hogging browser CPU
3. Next and previous buttons added using javascript because they hold no use without javascript
4. Hitting the page with a specific hash (ie page.html # preview) shows the right tab, and highlights the right navigation
5. Any link on the page that refers back to a panel should trigger the effect and highlight the right navigation - this should happen without any extra work
* 7 Fixed Floating Elements
Duration: 14:02
When I scrolled down the Apple store when I had something in my basket I found that the summary and what I had selected would follow me down the page. I've seen this effect before, but often it would be a little jumpy and the element would have to catch up with the scrolling.
* 8 Fun with Overflows
Duration: 20:19
The first is a scrollable timeline. A couple of readers requested a demo of how Plurk's browse timeline works. In addition, in the last month, Google released a 10 year timeline - so I wanted to show how this works.
The second was a request from Trevor Morris who's involved with / runs Geek in the Park. He asked whether the techniques I used in a jQuery marquee plugin I wrote recently could be used to smooth out CPU spikes that were occurring on his site when the header pattern flowed (see example below)
* 9 Image Cross Fade Transition
Duration: 19:26
In particular, Nathan Wrigley of pictureandword.com, needed a method one image into another mouse rolls over, and the slowly fade back once the mouse has left.
* 10 Image Fade Revisited
Duration: 15:09
The first thing I look for when understanding how a web effect has been achieved, is to look at what they've done when javascript is disabled. Where possible, I always want to produce a solution that works cleanly without javascript enabled.
* 11 Image Loading
length: 07:11
In our basic version, we will have a single div containing a loading spinner and once our large image is loaded (in the background) we will remove the spinner and insert our image.
* 12 iPhone-like Sliding Headers
Duration: 25:07
I can't show you an example in the wild so the screenshot below will have to do for now. As the user swipes through a list, the header for that section of content remains visible at the top of the window. This gives the user context in what they're looking at.
* 13 jQuery Infinite Carousel
Duration: 39:47
As with any complicated effect, I always start by looking at the DOM in Firebug and interact with the effect, watching for what changes take effect in the DOM.
* 14jQuery look: Tim Van Damme
Duration: 33:00
The first thing we need to do is look at the site in a WebKit browser (Safari's my poison) and in a non-WebKit (Firefox will do), then view the page with javascript turned off, then look at the URLs and see the effect of landing on the page with the hash in the URL.
* 15 jQuery Tabs
length: 07:31
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 (ie supporting back, forward and bookmark buttons) and saving tab states.
* 16 Simple jQuery Spy Effect
Duration: 31:27
Ehe great thing about Realmac's QuickSnapper site is that if javascript is turned off, the list of snaps is visible by default. So we'll follow suit.
It's also worth noting that their version only keep pulling in new items until it hits the end. I'll show you how you can keep the list looping, and in a follow up tutorial I'll show you how to hook this in to an Ajax hit that doesn't hammer your server and keeps the effect nice and smooth.
* 17 SlideDown Animation Jump Revisited
Duration: 8:35
Similarly to before the animation would jump when it gets towards the end. However, this time the problem can't be fixed by moving the padding around.
The problem is actually due to an incorrect height being determined, which is triggered by a number of factors. The element being animated ...
* 18 Slider Gallery
Duration: 12:17
This 'product slider' is similar to a straight forward gallery, except that there is a slider to navigate the items, ie the bit the user controls to view the items. Simple stuff.
jQuery already has the plugins to create these effects so we don't have to go about creating them ourselves from scratch.
[Collapse]
Format: MOV
Video: 800x600,
Audio: mono, AAC, 22050Hz
Screenshot
Download:
Mirror:
Mirror:
Mirror:
No comments :
Post a Comment