5 Fresh and Useful jQuery Plugins Were Born in November 2009 | AEXT.NET jQuery is great and the amount of free extensions is simply amazing! The number of jQuery plugins that were created monthly is very hard to count and to know; And It is not easy to know which one is the nice one. In November 2009, 5 jQuery plugins were born and most of people believed that they are useful for web designers. Enjoy the 5 fresh jQuery plugins! 1. jQSlickWrap jQSlickWrap is a jQuery plugin which enables you to easily and accurately wrap your text around the content of floated images. Usage: It’s as simple as: $('img').slickWrap(); 2. jQuery Slider plugin (Safari style) jQuery Slider is easy to use and multifunctional jQuery plugin. Usage:Available Options: 3. jQuery Shuffle Plugin A jQuery plugin for shuffling a set of elements. Usage: To shuffle a set of elements use: $(selector).shuffle(); or $.shuffle(selector); 4. Plugin for creating sliding boxes, that allows to show more boxes on one place. It allows to show multiple columns/rows together 5.
Stopping & Starting HTML Marquees This page contains code that allows you to stop and start HTML marquees with your mouse. Therefore, your website users can stop/start your HTML marquees with their mouse too. These codes use JavaScript, and therefore, will not work on your MySpace page. You can still use marquee codes on your MySpace page though, you just won't be able to stop/start them with JavaScript. Clicking the Marquee This example allows the user to stop the marquee when they click on the mouse (i.e. onmousedown). Hovering over the Marquee This example allows the user to stop the marquee when they hover over the marquee with their cursor (i.e. onmouseover). Start/Stop Buttons: You can add "start" and "stop" buttons that enable the user to start and stop the marquee as required. Stopping Multiple Marquees: You can add "start" and "stop" buttons for as many marquees as you like. Slowing Down Your Marquee You can also make the marquee slow down instead of just stopping/starting. MySpace Users More Marquee Tricks
jQuery Plugins During the past few weeks we’ve been publishing our “Best of 2009″ series in which we’ve shown you the best WordPress themes, fonts, icons, and Photoshop Tutorials. In this article, our focus is on jQuery. Over the past couple of years jQuery has been growing in popularity, which means more and more plugins are being created to make web designers’ lives easier. Here are our favorites from 2009. Content Sliders This year we saw a growing popularity in using content sliders as a way to display several pieces of content within a limited area or to engage the user with the sliding animation. AnythingSlider AnythingSlider is created by Chris Coyier of CSS-Tricks and is a fully featured slider that is widely useful. Easy Slider Easy Slider is a content slider that gives you the the option to choose between classic previous/next navigation or to use a numeric “pagination” style navigation. Coda-Slider 2.0 Image Galleries Galleria Galleria is a javascript image gallery written in jQuery. slideViewer
30 Fresh AJAX Tutorials And Techniques Jan 04 2010 By Paul Andrew Using AJAX on websites and applications is pretty much taken for granted nowadays. Users expect it. As great as AJAX is, though, it is not for every website or application. In this round-up, we have collected 30 fresh AJAX tutorials and techniques, covering almost every aspect of AJAX development: forms, applications, polls, editing, parsing, visual effects and much more. AJAX Tutorials And Techniques An AJAX-Based Shopping Cart with PHP, CSS and jQuery In this tutorial, you will create an AJAX-driven shopping cart and store all of the products in a MySQL database, using PHP to process the data. jQuery will deliver the AJAX on the page, and with help of the simpletip plug-in, you will be able to deliver a high-end interactive check-out process.View the demo. Creating an AJAX Web App Using the Bit.ly API Using Twitter’s URL shortener, bit.ly, and the jQuery library, you will be taken through the process of building an AJAX Web app. About the Author
Tribune: Website Calendars for Media You’ve probably heard of widgets, also known as gadgets or docklets. “Spuds” are specialized Trumba® Connect widgets. We chose the term “spud” somewhat facetiously as a play on the concept of “mashups.” A mashup is a web page that brings together content from more than one source. The IT world borrowed the term “mashup” from a hip-hop music practice of mixing two or more songs together to create a new song. A spud is actually a small piece of JavaScript™ code that retrieves event information stored on the Trumba servers. Spuds embedded into your web pages act like windows. Create and Paste a Spud: A Walk Through the Process To help clarify the power and flexibility of spuds, let’s walk through the process of creating and embedding a spud using the Trumba Tribune calendar as an example. Step 1 In the Trumba Connect editing environment, we create the Trumba Tribune calendar. Step 2 Step 3 Step 4 Visitors to the Display & Locate Events page view and interact with the calendar. Tip
Shawn Mayzes - Google Maps jQuery Plugin Google Maps JavaScript API Version 2 Deprecation The Google Maps JavaScript API Version 2 was officially deprecated on May 19, 2010. The original deprecation period has been extended from May 19, 2013 until November 19, 2013. While you can use the original Google Maps JavaScript API to do what you need. Not all portions of the original API were carried over into this plugin, some portions are considered a work in progress, other portions are considered unknown to the developer at this time. I am not affiliated with Google and this is a personal project to simplify the usage of Google Maps API. Special thanks to Menno at www.codefocus.ca for doing a code review. Released under the GPL license & MIT license Obtain API Key All Maps API applications should load the Maps API using an API key. Testimonials "I have been crawing around in JQuery plugin code for about 6 months and this is one really FINE "first" plugin" - Russell Stoker "Your additions are amazing! Simple Map Custom Depth Map Animate
Event Delegation in jQuery and Performance (live vs bind vs other options) - ravelrumba Back home in Massachusetts for the holidays. Lots of snow and lots of cold. And an uncommon spell of morning quiet time in which, while trying to think of a better way to capture events in Google Analytics, I ended up comparing and testing different options for handling events, most involving delegation and most involving jQuery. (If you’re unfamiliar with the concept of event delegation, check out this post by Nicholas Zakas.) For this purpose the goal is to listen for all click events and then decide which ones we want to send to Analytics. The HTML for the test page consisted of 500 link elements, each nested 5 divs deep. <div><div><div><div><div><a href="#1">Link #1</a></div></div></div></div></div><div><div><div><div><div><a href="#2">Link #2</a></div></div></div></div></div> ... Normal event handling with .bind() window.onload = function(){ $("a").bind("click", function(event) { //If it's a link console.log("link!") Event delegation with .live() Event delegation without jQuery
jAni – jQuery Plugin for Cartoon-like Background Image Animation (alternative to animated GIF) — ajaxBlender.com Framework: jQuery Listed in: Effects jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it’s always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the “dark side” of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation. Light-weight scriptEasy to integrateFully customizable via CSSWorks with all modern browsers 1.) {code type=html} <script type=”text/javascript” src=”.. 3.) 4.) {code type=html} <div id=”animation-1″></div> {/code} 5.) That’s it ;) Click the Demo button to see it in action. jani.play() Start playing animation. jani.pause() Pause animation. jani.stop() Stop animation.