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
jTable.org - A JQuery plugin to create AJAX based CRUD tables - Home Page nanoScroller.js nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .nano-content. The other scrollbar div elements .pane > .nano-slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets. Downloads To start using, you need three basic things: 1. The following type of markup structure is needed to make the plugin work: <div id="about" class="nano"><div class="nano-content"> ... content here ... Copy the HTML markup. Link to the nanoscroller.css file inside your page's <head> section (...or copy the contents from it to your page's main stylesheet file). You should specify a width and a height to your container, and apply some custom styling for your scrollbar. 3. Running this script will apply the nanoScroller plugin to all DOM elements with a .nano className. Advanced methods
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?
jQuery Fundamentals SlidesJS 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,
16 Best HTML5 Frameworks for Rapid Development HTML5 is popular language amongst web designers because it is being supported by the most of the modern browsers like Firefox 6, Google Chrome, IE9 etc.. HTML5 provides numerous new features and capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. In this article I have generated a list of best HTML5 frameworks that will simplify your development process and speed up your coding. Following HTML5 frameworks are best in my concern, If you are aware of any other useful HTML5 framework, please do let us know by posting comments. If you like the article you might be interested in other article on 10 Best HTML5 Tools and Best HTML5 Editors. 1. iio Engine is an open source framework for creating HTML5 applications with JavaScript and canvas. Source 2. Source 3. Source 4. Source 5. Source
Transit - CSS What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (! Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering.
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
List.js 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. 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: <div class="zoomTarget" data-targetsize="0.45" data-duration="600">This element zooms when clicked on. Target 1 Target 2 Target 3 Target 4
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.