webdev.stephband.info Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
Home Main Page Script Junkie | How to Create Your Own jQuery Plugin If you have never created a jQuery plugin, it takes just a few simple steps to get started. By following a handful of guidelines, you can develop a plugin that behaves and feels like a native jQuery method. Before I begin describing these guidelines, I want to acknowledge some sources that were instrumental when I first started learning how to write a jQuery plugin. Some of them have been around a long time, and their content is always top notch. Why Create a jQuery Plugin? Here is a brief list of reasons you might want to create a jQuery plugin: Reuse, reuse, reuseEncapsulationEasy to writeMaintain chainabilityPublic distributionPrevent namespace clashing Among these, I think that one of the best reasons to create a plugin is to encapsulate your code for reuse across your project. If none of these reasons hit home with you, know that jQuery plugins are just plain fun to write, use, and reuse. How Does a jQuery Plugin Work? Plugin Declaration What!? Plugin Parameters Public Functions Conclusion
How To Develop a jQuery Plugin jQuery is the most popular JavaScript library and many sites adopt it for dynamic effects and Ajax functionality. However, relatively few developers delve into the depths of plugin development. In this tutorial, we will create simple plugin to explain the basics. Our code will reverse the text within one or more selected nodes — view a demonstration page. Why Create a jQuery Plugin? In a word: re-use. How jQuery Works At its core, jQuery is passed DOM elements or a string containing a CSS selector. // color all <p> tags red $("p").css("color", "red"); Note: although the jQuery library is named ‘jQuery’, ‘$’ is a shortcut variable that references it. How jQuery Plugins Work jQuery allows methods to be added to its library. Our example plugin will be called using code such as: // reverse the text in all <p> tags $("p").reverseText(); We will also add two optional parameters, minlength and maxlength. The Plugin Declaration Plugins are defined using the jQuery fn function, e.g. Plugin Parameters <!
Writing the Perfect jQuery Plugin - Jupiter JavaScript Consulting jQuery is an excellent DOM abstraction, but compared to other libraries, it leaves much to desire towards building complex, reusable functionality. There’s lots of good examples and resources, but most of them fall short in providing a pattern that is: extensible - you can add new features or derive new functionality from old functionality. Organized - the plugin is structured without a lot of anonymous functions Destroyable - you can remove the plugin without lingering side effects Deterministic - find out what’s going on where. Publication’s Purpose My goal for this article is two-fold: Raise the bar for what’s considered a “quality” widget. You can find all the source code and examples in this JSFiddle. Perfect Perspective The perfect plugin is many things. Progressive enhancement Event oriented architecture High performance plugins Futhermore, I’m focusing on a very specific type of plugin - widget plugins. Prior Patterns There’s a lot of other widget patterns. Problem Plugins Extensible
Writing your first jQuery plugin from scratch | Think Tank In this tutorial, we’ll show you the basics of how to create your very own jQuery plugin by showing you how to create a jQuery accordion. This tutorial assumes you already have a working knowledge of html, css and some jQuery. This has many advantages, it makes reusing your code much easier and saves you time when coming to different projects! Setting up First we’ll create a basic html page that will include the jQuery library from Googles servers, our accordion script file and a css file for styling. Here’s the html code we’ll be working with. and here’s the css code we’ll be working with which I’ve put into a file called ‘style.css’ and placed this in the same directory as the html file. Writing the plugin To start with, I created a folder called ‘js’ and created a file within this folder called ‘jquery.accordion.js’, this is the file which will house our plugin. jQuery Once the last piece of code is in place that should be it. Conclusion Tags: accordion, CSS, HTML, jQuery, plugin, tutorial