jQuery plugin: Tablesorter 2.0 - Namoroka. Author: Christian Bach Version: 2.0.5 (changelog) Licence: Dual licensed (just pick!) Under MIT or GPL licenses. Please with sugar on top! Don't hotlink the tablesorter.js files. Download it and host it on your servers. Update! New version! Helping out! Comments and love letters can be sent to: christian@tablesorter.comchristian at tablesorter dot com. tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. Multi-column sorting Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time.
TIP! To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document: tablesorter works on standard HTML tables. Start by telling tablesorter to sort your table when the document is loaded: NOTE! JsPlumb demo - Namoroka. Enabling the Back Button | jQuery for Designers - Tutorials and. Watch Watch Enabling the Back Button screencast (Alternative flash version) QuickTime version is approximately 50Mb, flash version is streaming. View the demo used in the screencast The Problem Using our original jQuery tabs solution, we have a tabbing system that you can click the tabs and different content loads.
We want to fix this, so that I can navigate the tabs using the browsers native back and forward buttons. “Cowboy” Ben Alman’s BBQ Ben wrote a jQuery plugin called BBQ. Now, in retrospect, I think that I only need Ben’s hashchange plugin as that’s all I ended up using in the screencast, but none the less, they’re both worth checking out. Now armed with Ben’s plugin, we’re going to refactor the tab code so that the back button works. Solution The way the existing tabs work is as follows: #1. This process was our original code, and most of it needs to stay in place.
So we listen for the hashchange event, just like we might listen for a click event: $('a[hash=#first]') jQuery. Build a Simple Image Slideshow with jQuery Cycle - Namoroka. Image slideshows are a popular method of displaying numerous sequential photographs in web design. By making use of the handy Cycle plugin for jQuery, we can easily create a slideshow of our own, complete with previous and next navigation controls.
Not a master of Javascript? Don’t worry, the Cycle plugin makes it a breeze to add slideshow functionality to your site, with only a few lines of code required to get things up and running. It’s my goal to one day own a Harley Davidson Sportster, but until that dream day comes, I’ll have to settle with drooling over a bunch of photos. View the demo Create a new Photoshop document and fill the background with a rough and grungey texture. Use a series of tape brushes to create a rough border to house the photography. Draw a rectangle and fill with a temporary colour. Switch over to Adobe Illustrator to quickly draw a navigation arrow.
Draw a black circle back in Photoshop, then paste the arrow from Illustrator. <! Get all that? ColorBox - customizable lightbox plugin for jQuery 1.3 & 1.4 - N. A lightweight customizable lightbox plugin for jQuery View Demos Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content.Lightweight: 10KB of JavaScript (less than 5KBs gzipped).Appearance is controlled through CSS so it can be restyled.Can be extended with callbacks & event-hooks without altering the source files.Completely unobtrusive, options are set in the JS and require no changes to existing HTML.Preloads upcoming images in a photo group.Currently in use on a million-plus websites.
Instructions & Help The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. Usage Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element. Settings Public Methods Event Hooks Hey, Update: jQuery UI 1.7 Slider from a Select Element | Filament Gr. What's This All About? Our selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user).
This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable. The plugin enhances the jQuery UI slider in many ways, adding text labels and ticks on the slider axis, and tooltips that appear while a slider is being used. In this most recent update, we've also added ARIA support and a tabindex to the slider, allowing it to be accessible to users on assistive technologies, such as a screen reader. Working Demo: Demo Page $('select').selectToUISlider(); jQuery Circulate. Prereqs Requires the jQuery Library as well as the Easing plugin. Usage / Options / Defaults Stopping a loop $("#anything").circulate("Stop"); Download VERY BETA: Full package (what you are looking at)
Zoomooz.js. Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly. Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work. Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on.
You can also add some additional attributes for tuning the animation as data fields of the element: Here is a demo, click on the elements: Demos. jQTouch — jQuery plugin for mobile web development - Namoroka. Tutorials – Tutorialzine - Namoroka. Realtime Chat with Node.js By Nick Anastasov | In this tutorial, we are going to build a realtime chat system with Node.js, Express and the socket.io library.
Visitors will be able to create private rooms in which they can chat with a friend. Read more My New Favorite Technique ForHiding Overflowing Text By Martin Angelov | In this short tutorial, I will show you my new favorite technique which fades overflowing text gracefully into the background – a perfect addition to your new design. AviaSlider - a unique jQuery Image slideshow plugin. Features of the Avia Image Slider 8 unique transition effects Lots of easy to set options to create your own effects Included Image preloader Autoplay that stops on user interaction Valid HTML5 and CSS 3 Markup Packed version only weights 8kb Supports linked images already prepared to work with prettyPhoto Lightbox works with jQuery 1.32 and higher Browser Support Internet Explorer 6 and higher Safari 3 and higher Firefox 2 and higher Opera 10 and higher Google Chrome 3 and higher Checks for last 3 Browsers performed on Mac & Win Download & Docs.
Lightbox_me - Stupidly Simple Lightboxing. What is it? Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you. Lightbox_me is an essential tool for the jQuery developer's toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss. Features Lightbox_me handles all of those annoying edge cases that other lightbox solutions do not: Handles overlay resize when the window is resized Handles overlay size in cases where the document is smaller than the window Handles position: fixed in all browsers Position: fixed automatically swaps to position: absolute when the window size is smaller than the modal, so the user can scroll to see the contents In addition it's got these other nice features: Usage Include jQuery and lightbox_me in your web page, then invoke lightbox_me on a jQuery object: $(domobj).lightbox_me(); or $("#id").lightbox_me(); This will lightbox the DOM element immediately.
Signs of a poorly written jQuery plugin. So far with every single workshop I’ve given, both for advanced JavaScript and jQuery for Designers, this question (or some variation thereof) has come up: How do you know if the plugin is good to use? It’s always dependant on the problem they’re trying to solve, but in lieu of a better jQuery plugin ranking system, here’s a couple of tips that should raise a red flag. Consider the following: $.fn.myplugin = function () { var me = $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); }); return me;}; Although the code may be perfect once some event has run, most times you don’t have time to read through all the code carefully and you need to make a decision so you can move on to the actual problem you’re trying to solve.
In the code above, there’s a number of red flags that have gone up for me, and I tend to look in this area of code first. The inline return $.fn.myplugin = function () { var me = $(this).each(fn); return me;}; Should be written as: How to Debug Your jQuery Code. In the past 10 years, more and more Web development has moved off the server and migrated to the browser, making a user's experience more responsive. Unfortunately, this transition hasn't been very pleasant for developers, given that any attempt to debug client-side code eventually means resorting to the classic JavaScript alert methods, which we are all accustomed to seeing in code such as the following: <script type="text/javascript"> alert('Alerts are so NOT the Bee\'s knees. \n\n' + 'To the contrary, they are the 3 Ds... \n' + '• Difficult to format\n' + '• Disrupt the timing of JavaScript events\n' + '• Disagreeable to the Nth degree!
\n\n' + 'In summary, stay away from the alert statement as a debugging tool.'); </script> (You can view, run, and edit the source code for this example at jsbin.com/opayo/edit. In this article, I’ll describe some techniques to assist you in the debugging process when you are using jQuery in client-side Web development. Getting Started FireFinder 1. CompareDocumentPosition plugin for jQuery - Jupiter JavaScript C. Being able to quickly compare two elements’ positions in the browser is extremely useful for a variety of tasks. The DOM Level 3 specification describes the compareDocumentPosition method. It returns a bitmask with a whole bunch of useful information. But not all browsers support it :( For a really solid walkthrough of compareDocumentPosition, check out John Resig’s Comparing Document Position article.
In this article, he gets close to providing a fast compareDocumentPosition for all browsers. JavaScriptMVC’s standalone jquery.compare plugin steals his ideas and DOES provide a fast compareDocumentPosition in all the browsers jQuery supports. Download jquery.compare.js (minified 0.8kb) [works with all versions of jQuery] Demo Compare Element Positions Documentation JavaScriptMVC’s jquery/dom/compare docs. Use To use the compare plugin, just call compare on your jQuery wrapped elements with another element or jQuery element: $('#foo').compare( $("#bar") ) Bits Number Meaning Elements are identical.
YouTube Chromeless Video Player – jQuery Plugin | Viget Inspire. While building the PUMA Running site, I had the opportunity to work with the YouTube JavaScript Player API to build a custom video player. This was something that we had to reuse in various places, so I made a jQuery plugin out of it (with a little help from Doug Avery to be able to add multiple videos per page). The functionality is pretty simple: you get a play/pause button, a status bar, and a mute/unmute button; but this plugin gives you control over how those things look. Requirements Getting Started What you need to get going with the plugin is simply a link to the video: <a href=" It is important that the URL to your video is formatted like the example above because the plugin grabs the video ID out of the URL, and then replaces the link with a video player.
Options Here are all of the options with their defaults: Example Pretty easy, just call the function on the links that you want to replace with videos (and pass in whatever options you want to change): jQuery.validity Guide & Documentation. Table of Contents: Introduction: jQuery.validity is a plugin designed to aid in the configuration of clientside form-validation. Validity was concieved with three goals: Easy Setup: Validity employs the principle of Convention Over Configuration to aid in keeping code manageable and semantic.
Very little work is required to enable Validity for a page. Unobtrusive JavaScript: Using Validity will have little to no effect on the semantics of your markup. In style, validity makes use of jQuery's selector engine and follows its pattern of method chaining. Setup: In order to use Validity on a page, you will need to import the jQuery JavaScript library as well as jQuery.validity itself. As a simple example suppose we start with the following HTML document with a simple form: As you can see, there is no validation logic attached to the form. <script type="text/javascript"> // Select all of the forms on the page (in this case the only one) // and call 'validity' on the result. The Validity Method.