Home - Pencil Project
HTML5 video and audio tags in all major browsers
tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect
download Download here or go to github. Released under GPL how to use Call the plugin on any collection of images you want by adding the following jQuery: jQuery(document).ready(function() { $('.tiltshift').tiltShift(); }); Parameters on each image must be set using the HTML5 data attributes, like this: The attributes will control various variables that influence the tiltshift effect. -position (0-100), defines the point of focus. 66 would be two thirds of the way in. notes As previously stated, currently only supported by Chrome & Safari 6. authors tiltShift.js is brought to you by Noel Tock, a WordPress, front-end and startup dude. Additional code by Adam Yanalunas, a dude who is passionate about stuff and things … especially front-end development stuff and JavaScript things. photo credits If you're interested in licensing any of the images, please contact the photographers by following the links below: Airplane / Stadium / Ocean / Skyscraper
MockFlow: Online Wireframe Tool
HTML 5 Video 'Full-Screen' | Danny van Kooten
A few days ago I was playing around with HTML 5 and it’s new (popular) video tag! The result in short: I love(d) it! Getting it to work in all the major browsers wasn’t that hard at all. I didn’t even use nasty JavaScript hacks for that, just some basic mark-up fallbacks. But.. That’s why I decided to write a quick and dirty jQuery hack that somewhat gives a full-screen feeling. The basic mark-up for the video tag, works cross-browser Let me start with how I set up my video tag to work in all the major browsers. The only major drawback of this method is that I had to use 3 different file types, wmv, mp4 and ogg. I added a simple inline style rule to make it more obvious for the visitor that they can click on the video, we’ll add some more evidence later on in the script. Adding a double click event. With most video players it’s obvious that in order to get the video to play in full screen you have to double click it. Increasing the video size. Notice the check for the class ‘fs’.
examples
The Basics When initializing a typeahead using the typeahead.js jQuery plugin, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query. Bloodhound (Suggestion Engine) For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of Bloodhound, the typeahead.js suggestion engine. Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data. Prefetch Prefetched data is fetched and processed on initialization. Remote Remote data is only used when the data provided by local and prefetch is insufficient. Custom Templates Custom templates give you full control over how suggestions get rendered making it easy to customize the look and feel of your typeahead. Default Suggestions
Video for Everybody!
Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many browsers and platforms. Thanks to the rapid adoption of HTML5 video happening right now, Video for Everybody isn’t the only solution around. How It Works If your browser supports it, HTML5 video is used. If HTML5 video is not supported, Adobe Flash is used. Finally, if all else fails, a placeholder image is shown and the user can download the video using the links provided. VfE different than any other Flash video embedding method. This is all done without JavaScript and requires two video encodes, one Ogg file, and one MP4 file. It’s compatible with HTML 4, HTML5 (valid markup), XHTML 1 and additionally also works when served as application/xhtml+xml. The Code IMPORTANT Notes Using
jQuery plugin for Avgrund concept popin
Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). Tested with jQuery 1.4+, file size is under 2Kb, MIT Licensed. You can simply init Avgrund with one line and linking 'avgrund.css' file: $('element').avgrund(); Avgrund has several options for you to customize it easily: Avgrund plugin was inspired by Hakim's Avgrund.js demo.
