background preloader

jQuery Tutorials for Designers

jQuery Tutorials for Designers

Developing a jQuery Plugin Sometimes we get it in our heads that a task is too complex that we just ignore doing it. That's been my mindset when thinking about developing a plugin for jQuery. I've always thought that some of the code I developed would make more sense as a plugin but I just didn't have time to figure it out. After finally pushing myself into learning about jQuery plugins, I was left saying, "That's it?!" It turns out it's ridiculously easy and I have no idea why I haven't been doing this from day one. Why a plugin? First of all, you might ask yourself why you'd want to develop a plugin. $('.className').addClass('enabled').append('<a href="#">Click here</a>').click( func ); This would take every element with a class name of 'className', add a new class name to it, append some HTML, and set a click event handler. Another reason to develop a jQuery plugin is simply to be consistent with the jQuery ethos. Now, let's take a look at how to create a plugin, of which there are two possible approaches. Jump in

How to Create a 3D Tag Cloud in jQuery With browsers rendering JavaScript faster than ever before, it’s a great opportunity to get creative with jQuery. This tutorial will show how to create a scrolling 3D tag cloud…it’s not as difficult as you might think. 3D Tag Clouds..Oh My What exactly will we be building? We’re also going to have our tag cloud interact with the users mouse. Simple HTML As the sub title suggests the HTML is painfully simple. Styling the List For the most part the CSS is just to make the links pretty. Here is the CSS: The Fun Part (jQuery) Now comes the trigonometry….see…your high school teacher was right, you will use this stuff in the real world. Here is the jQuery: Just to step through what we did. After that we step through each element in our list and give each one a spot on our 3D circle. After we placed each element on our 3D circle it’s time to animate it. The Finish Line That’s all there is to it.

The BEST Free Website Templates ColorBox - customizable lightbox plugin for jQuery 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,

SimpleModal Demos / Eric Martin / Basic Modal Dialog A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel. Demo Download Basic Modal Dialog For this demo, SimpleModal is using this "hidden" data for its content. Examples: $('#basicModalContent').modal(); // jQuery object; this demo$.modal(document.getElementById('basicModalContent')); // DOM$.modal('<p><b>HTML</b> elements</p>'); // HTML More details... OSX Style Dialog A modal dialog configured to behave like an OSX dialog. Inspired by ModalBox, an OSX style dialog built with prototype. Demo Download OSX Style Modal Dialog Hello! SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development. As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. (or press ESC or click the overlay)

A Plugin Development Pattern I've been developing jQuery plugins for quite a while now, and I've become rather comfortable with a particular style of plugin development for my scripts. This article is meant to share the pattern that I've found especially useful for plugin authoring. It assumes you already have an understanding of plugin development for jQuery; if you're a novice plugin author, please review the jQuery Authoring Guidelines first. There are a few requirements that I feel this pattern handles nicely: Claim only a single name in the jQuery namespace Accept an options argument to control plugin behavior Provide public access to default plugin settings Provide public access to secondary functions (as applicable) Keep private functions private Support the Metadata Plugin I'll cover these requirements one by one, and as we work through them we'll build a simple plugin which highlights text. Claim only a single name in the jQuery namespace This implies a single-plugin script. JavaScript: Putting it All Together

Create Flipping Content Tabs Using jQuery Content Tabs have become more popular lately with more and more websites and blogs using them to show more content in lesser space. Today I am going to show you how to create content tabs with nice flipping effect. For this, you will need the QuickFlip jQuery Plugin by Jon Raasch and of course, the latest version of the incredible jQuery library. The HTML Structure Here’s the HTML structure you’ll need to use: <div id="flip-tabs" > <ul id="flip-navigation" > <li class="selected"><a href="#" id="tab-0" >Recent</a></li> <li><a href="#" id="tab-1" >Popular</a></li> <li><a href="#" id="tab-2" >Comments</a></li> </ul> <div id="flip-container" > <div> </div> <div> </div> <div> </div> </div> </div> <div id="flip-tabs" ><ul id="flip-navigation" ><li class="selected"><a href="#" id="tab-0" >Recent</a></li><li><a href="#" id="tab-1" >Popular</a></li><li><a href="#" id="tab-2" >Comments</a></li></ul><div id="flip-container" ><div><! The CSS Styles The JavaScript Code

Airtight News I recently started playing with shaders in three.js and I wanted to share some of what I’ve discovered so far. Shaders are the ‘secret sauce’ of modern graphics programming and understanding them gives you a lot of extra graphical fire-power. For me the big obstacle to learning shaders was the lack of documentation or simple examples, so hopefully this post will be useful to others starting out. This post will focus on using pixel shaders to add post-processing effects to Three.js scenes. What is a Shader? A Shader is a piece of code that runs directly on the GPU. The big conceptual shift when considering shaders is that they run in parallel. There are 2 main types of shaders – vertex shaders and pixel shaders. Vertex Shaders generate or modify 3D geometry by manipulating its vertices. There are 2 different kinds of pixel shaders - Shaders that draw an image or texture directly. Pixel Shaders in Three.js Preview some of the three.js built-in shaders with this demo. GLSL Syntax More Shaders!

10 Best jQuery Plugins - March 2009 | AjaxLine qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips Boxy is a jQuery plugin that is used to create flexible, facebook style dialog boxes and overlay boxes. It is very easy to implement in any page by using only few lines of code. This plugin allows you to change any element with an ID on your page into a single or multiple file upload tool. The plugin uses a mix of JQuery, Flash, and a backend upload script of your choice to send files from your local computer to your website server. One more plugin for creating interactive tables on your site. The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. DataTables is a plug-in for the jQuery Javascript library. This small plugin disables form buttons when the user submits the form.

Interface elements for jQuery - About Interface 30 Pro jQuery Tips, Tricks and Strategies Whether you’re a developer or a designer, a strong jQuery skillset is something you can’t afford to be without. Today, I’m going to show you 30 handy jQuery coding tricks that will help you make your scripts more robust, elegant and professional. Getting Started These tips and tricks all have one thing in common- they are all smashingly useful. We’ll start with some basic tricks, and move to some more advanced stuff like actually extending jQuery’s methods and filters. #1 – Delay with Animate() This is a very quick, easy way to cause delayed actions in jQuery without using setTimeout. For instance, let’s say that you wanted to open a dialog and then fade it away after 5 seconds. Don’t you just love jQuery chaining? UPDATE: jQuery 1.4 has eliminated the need for this hack with a method called delay(). #2 – Loop through Elements Backwards One of my personal favorites is being able to loop backwards through a set of elements. #3 – Is There Anything in the jQuery Object? Voila! Wrapping Up

Related:  jquery 1jqueryjqueryjQueryJavascript