Harvesthq/chosen. Harvesthq/chosen. jQuery: binding objects to events. Each jQuery event has a data object attached to it.
This object can store any kind of data, including simple object properties or even object methods. You can define a separate object and then associate it with your event through data. This object is the second parameter of the bind() method used to attach an event to a page element. Once you associate your custom object with data, you can later reference your object methods and properties using data. An example: This is a simple object that we're going to associate with data. Element.bind(eventType, data, handler) So we need to use our object name as the second parameter of bind(): $('#test').bind('click', Class, function(event) { ... }); Doing this, we've associated Class with data. $('#test').bind('click', Class, function(event) { event.data.get(); }); jQuery hashchange event. Slide Elements in Different Directions.
Although jQuery has a nice set of slide methods — .slideDown(), .slideUp(), and .slideToggle() — sometimes we may want to slide an element in a different direction.
Fortunately, it's pretty easy to do. Reverse the Slide Direction With the built-in slide methods, elements are shown by sliding them down and into view. But what if we want to slide something from the bottom up and into view? The trick here is to use some judicious CSS. <div id="slidebottom" class="slide"> <button>slide it</button> <div class="inner">Slide from bottom</div></div> To get the inner div to slide up, we'll anchor its bottom edge to the bottom of the bottom of the nearest positioned ancestor (in this case, the #slidebottom div): Other properties such as width, padding, margin, and background-color have been set for these elements, but only the essential properties for modifying the slide behavior are shown above.
Now, we can write the jQuery the same way we would with a traditional slide effect: JavaScript: Try it out: Lazy Load Plugin for jQuery. Lazy Load is delays loading of images in long web pages.
Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load. Plugin is inspired by YUI ImageLoader Utility by Matt Mlinac. For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images, load images using timeout and load images using AJAX(H). When checking the demos clear browser cache between each request.
How to Use? Tidy Table - Generate a sortable HTML table from JSON. Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback.
Features Extensible HTML/CSS interface. Compatible with Firefox 3.6+, Chrome, Safari 5+, Opera, and Internet Explorer 7+ web browsers. Compatible with iOS and Android mobile web browsers. Easy to set-up and customize. Check out the demo provided with this package. Installation Download the latest sources to your computer using a web browser. Set-up It's as simple as defining the target element #container using the jQuery selector and passing tabular data as JSON.
$(selector).TidyTable(options, data [columnTitles, columnValues, menuOptions, postProcess]); Source Code Add the following Javascript between the <head></head> tags of your HTML document. Use Example 1 - Options defined Use Example 2 - Quick and dirty Plug-in Settings The following options can be passed to the plug-in main function as JSON Select Menu Events When a callback function is defined a response is returned.
Releases Maintainer. Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more. Demo Processing...
To get started, simply install jquery.dynatable.js (along with jQuery), and add the following in the document.ready or after the table: $('#my-table').dynatable(); How it works Dynatable does three things: Read / Normalize The HTML table is scanned and normalized into an array of JSON objects (or collection) where each JSON object (or record) corresponds to a row in the table. This 3-step approach has several advantages: Efficient reading/operating/writing Since the logic and operations occur on the JSON collection, the DOM operations (reading and writing/drawing) are grouped together, making interactions quick and efficient.
Normalization The first module normalizes an HTML table into a JSON collection. The following table: