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
SimpleModal Demos / Eric Martin / ericmmartin.com 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)
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!
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