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
11 Best jQuery Plugins December 2011 In this post, we have compiled 11 best jquery plugin for december 2011 that are used to let you stand out unique in the latest web trend. Enjoy !. An amazing plugin for jQuery 1.6+ & HTML5 fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize. With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. PicStrips adds a little style to your images to help them stand out from the crowd. The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript. Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Craftyslide is a tiny (just 2kb) slideshow built on jQuery.
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
jqPagination, a jQuery pagination plugin (obviously) Introduction jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive 'Page 1 of 5' input that, when selected, allows the user to enter their desired page number. Download Fork on GitHub Here are a few key points: Design agnostic Customisable Degrades beautifully Super simple to integrate with your app / site Uses jQuery... who doesn't love jQuery?! Demo It's oversized too, so you can try it when you're drunk! Show / hide event log: Installation Installation is super easy, for a basic setup you'll need the following HTML: And now we'll need to initialise the plugin against our HTML: Customisation jqPagination is built to be basic, but it does have a couple options and callbacks for customisation. Options current_page - option, default: 1 Sets the current page, can also be set using the current-page data attribute on the input element.
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.