background preloader

jQuery plugin: Tablesorter 2.0 - Namoroka

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. Update! 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: $(document).ready(function() { $("#myTable").tablesorter(); } ); NOTE!

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

JUSH - JavaScript Syntax Highlighter Simpletip - A simple jQuery tooltip plugin Simple tooltips Here's some examples of simple tooltips using some of the default options provided by the simpletip library. Hover over me to see a bog standard tooltip using all default options. $(). simpletip Hover over me to see a fixed position tooltip. $(). Click to see a persistent tooltip that only closes when clicked! Here's a tooltip with some custom content. Positioning When using static tooltips (e.g. fixed: true; configuration) there are several options available to position the tooltip. Hover over me to see a tooltip positioned to the left of the parent element. $(). Hover over me to see a tooltip positioned to the right of the parent element. $(). Hover over me to see a tooltip positioned to the top of the parent element. $(). Hover over me to see a tooltip positioned to the bottom of the parent element. $(). This tooltip is absolutely positioned at coordinates [100, 730]. $(). This tooltip is relatively positioned to its parent element at coordinates ["0", "-100"]. $(). Effects css eq

Ajax Bestiary » AJAX Development, News, Techniques & More Flexigrid 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. To make my dreaming easier, let’s build a simple slideshow that automatically fades through a small collection of Sportster shots. 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. <! $(document).ready(function() { }); Get all that?

Smashing Labs - gMap, Google Maps jQuery plugin What is gMap? gMap is a jQuery plugin embedding Google Maps into your website. It allows you to: set center, zoom level and type of map add multiple markers with custom icons, popups and titles position marker by latitude/longitude as well as by its address set your customized map controls retrieve map object and use it for even most complex tasks Purpose of gMap is to help you keep your code clean and to create Google Map in very easy way, without learning its API. Latest stable release: 3.3.0 Donate gMap is free and will stay that way as long as I'm in charge. Social Like Smashinglabs on Facebook to get gMap updates and other JS news. Example This tiny line of code is being used to embed the map below. What has happened to V2 version? It's still available here.

Simple Tooltip with jQuery It's always a joy to understand how things work. Well, at least I do. Alright, this time, I want to share with you all, how to create a simple jQuery tooltip. By the way, if you are having problems looking for a good iPage Web Host, you can use this website to guide you: Web Hosting Review Getting the mouse X and Y axis First of all, I did a search with google, and I found this little script from this blog, very useful information. Detect the Anchor element I wrote a simple selector to select only Anchor tag with REL set to tooltip, I'm using the same approach in the Navigation List menu + jQuery Animate Effect tutorial. $('a[rel=tooltip]').mouseover(function() { ...... }); As a result, anchor tags that support this simple jQuery tooltip should look like this <a rel="tooltip" title="Testing of tooltip">sentences</a> Trick to hide the TITLE Attribute's Tooltip in browser Okay, there is one major issue we need to sort it out - The native tooltip in Mozilla browsers. Finally, the CSS.

Get down! How to keep footers at the bottom of the page by Matthew James Taylor on 10 November 2007 When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done. When I first ditched tables for pure CSS layouts I tried to make the footer stay at the bottom but I just couldn't do it. See it in action: View my demo with the footer at the bottom The main features Works in all modern, standards compliant browsersCompatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8Fails gracefully on older browsersOlder non-standards compliant browsers position the footer under the content as per normal. There is only one limitation You must set the height of the footer div to something other than auto. So how does it work? The HTML div structure The CSS

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,

codeforest As they promised, jQuery Team released a new version of jQuery today. It has come a long way from its initial version and has become one of the most used JavaScript frameworks in the world. I will try to tell you the exciting news in the new version. As the new version is released, the jQuery Team updated their jQuery 1.5 API Documentation which is very useful and handy. The biggest news is jQuery.sub() which allows a developer to override native jQuery methods without actually affecting the methods that other users would interact with – or even create encapsulated APIs for your plugins that avoid namespace collision. New jQuery AJAX The jQuery Team rewrote the whole jQuery AJAX module. Perhaps the largest change is that a call to jQuery.ajax (or jQuery.get,, etc.) now returns a jXHR object that provides consistency to the XMLHttpRequest object across platforms (and allows you to perform previously-impossible tasks like aborting JSONP requests). Prefilters Converters Transports

Simple Static Tooltip Widget using jQuery.UI I've seen different type of tooltips around. And actually jQuery tooltip plugin was one of the best I ever seen. And then I thought to build some tooltip similar to those tooltips available on learning items . Just simple one to be displayed on left or right of the tooltiped item (element). And I decide to build that using jQuery.ui widgets . Very simple and straight forward, all I needed is the following: A tooltip fully UI customizable to be displayed to the right or left of the desired element. I built a sample which you can download to demonstrate how this tooltip should work and you can view the demo here. Before go through the code, I recommend first to read the following posts: So, I'll start with init function, where I register for hover/out events or focus/blur events. As you noticed, there are 2 handler functions hoverHanlder and outHandler . It worth to mention that those function are of the widget context. This tooltip has 7 options. Yes that is it!

ASP.NET en Español 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. 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. Working Demo: Demo Page The demo above was generated from 2 HTML select elements with the following jQuery call: $('select').selectToUISlider(); Now Updated for ARIA Support! So what is ARIA Anyway? How we applied ARIA to the jQuery UI Slider What we discovered along the way A workaround for "aria-labelledby" Avoiding duplicate controls for screenreader users Using this plugin JavaScript

Related:  jQueryAnimations