jQuery Drop Captions Plugin will degrade nicely if JavaScript is disabled; and the title attribute will still display the exact same text. It has several configuration options including settings for animation delay, speed, opacity and easing.
Developed by Catch My Fame; jQuery Drop Captions Plugin is available for download under CC Attribution-Share Alike 3.0 license. You can find further information, demo & download on Catch My Fame Website.
CoolTips is an object-oriented, unobtrusive & lightweight class based on Prototype JS + script.aculo.us frameworks for creating good looking tooltips.
It doesn't need any inline JavaScript coding. Using the title attribute of elements is enough and CoolTips will convert them.
The tooltips can be customized using a bunch of parameters or by CSS:
Besides the colors of background, borders & text, it is possible to set the opacity, appear/hide durations or enabling/disabling mouse follow effect.
Special Downloads:
Uki is a simple JavaScript user interface toolkit for creating desktop-like web applications with few lines of code.
The toolkit is fast. It uses progressive rendering, can render 30k+ lists & tables very quickly (which would normally take minutes in IE).
It doesn't offer a complete JavaScript framework. Rather, Uki is totally focused on the layout and, if wanted, can be used with any JS framework.
Uki comes with a rich view-component library ranging from slider to list and splitpane (more is on the way like tree, grid views).
The toolkit works cross-browser & presents a demo for creating the Google Wave interface with 100 lines of code.
Special Downloads:
IntraMessenger is a free application for that enables communication between communities, groups, companies or simply closed groups.
It consists of a client (for Windows) & a PHP-MySQL-based open source server to manage the whole communication.
The messenger is autonomous, but authentication (login + password) is possible from other existing databases like forums, groupware applications, e-learning systems, etc.
IntraMessenger has a multilingual interface & it is a handy application for enabling web-based communities to communicate in the desktop.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Ample SDK is a standard-based cross-browser JavaScript GUI Framework for building Rich Internet Applications. It employs XML technologies (such as XUL, SVG or HTML5) for UI layout, CSS for UI style and JavaScript for application logic. It equalizes browsers and brings technologies support to those missing any.
Ample SDK is entirely written in JavaScript and thus it does not require any specific components installed in your browser to operate properly. It doesn’t modify the browser infrastructure but rather fills in the missing functionality.
Ample SDK consists of a Ample Runtime (or Core) and User Interface Markup Language implementations. Ample Runtime implements DOM (Level 3) objects, XML languages, objects facilitating work with XML, XSL-T, and a whole range of UI services. Every UI Markup Language implementation is included separately depending on your needs and specifics of the User Interface you build.
Ample SDK can easily be extended by prototyping existing or new objects. You can also create new components or entire languages that suit best your User Interface specifics.
Ample SDK Runtime is fully functional in all modern web browsers. User Interface languages are still being implemented/tested and some quirks might be observed. Ample SDK is distributed using a dual-licensing approach under MIT and GPL licenses.
Requirements: - Demo: http://www.amplesdk.com/examples/ License: MIT and GPL License
TufteGraph is a jQuery plugin that can create standard & stacked bar charts inside any given element.
It it configured mostly by dynamic functions which simplifies the usage by allowing for a really compact API.
A standard chart comes with no style but it can be totally customized with CSS (download package includes an example).
Important Info: The charts created work in major browsers. Although the example in the plugin's website doesn't seem to work in IE, the raphael.js file used can be replaced by the latest version of Raphaël JS library which will fix the problem.
Special Downloads: Ajaxed Add-To-Basket Scenarios With jQuery And PHP Free Admin Template For Web Applications jQuery Dynamic Drag’n Drop ScheduledTweets
Advertisements: SSLmatic – Cheap SSL Certificates (from $19.99/year) Follow WebResourcesDepot At Twitter And Get More Resources!
Tags: Javascript
JQuery Roundabout is an impressive plugin that converts HTML elements into highly-customizable & interactive turntable-like (and more) interfaces.
By default, it works with ordered/un-ordered lists but with a little configuration it can convert any nested HTML structure.
The plugin has a bunch of options for maximum customization like:
With the help of a complimentary plugin, named Roundabout Shapes, it is possible create too many different types of interfaces.
jQuery Roundabout can have have various uses from displaying images to creating form interfaces, animations, etc.
Special Downloads: Ajaxed Add-To-Basket Scenarios With jQuery And PHP Free Admin Template For Web Applications jQuery Dynamic Drag’n Drop ScheduledTweets
Advertisements: SSLmatic – Cheap SSL Certificates (from $19.99/year) Follow WebResourcesDepot At Twitter And Get More Resources!
Tags: Javascript
The problem of mouseover/-out the menu a couple of times. After you stop moving the mouse, the animation will continue since you’ve built up the animation queue with every mouse event.
Some uses the stop() method to prevent animation queue buildup. While this helps solve the initial problem, it introduces another: When you now do a fast mouseover/-out, you will see no animation at all or just a part of the animation. This behavior seems somehow unnatural.
The HoverFlow Plugin is the solution, which honors a single mouseover/-out with a full animation cycle while preventing animation queue buildup. A queued animation will only run if it corresponds with the current mouse position at “runtime”. That is, a mouseover animation will only run if the mouse is currently over the element, and a mouseout animation will only run if the mouse is currently not over the element. Otherwise, the animation queue is emptied.
Requirements: jQuery Framework Demo: http://www.2meter3.de/code/hoverFlow/ License: MIT and GPL License
Tutorialzine is going to create a pure jQuery & CSS Twitter Ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.
To change the twitter accounts that are shown in the ticker, you’ll need to modify the tweetUsers array. If you provide two or more twitter names, their tweets will be shown together. Only the 50 most recent tweets from the past 7 days will be returned.
Requirements: jQuery Framework Demo: http://demo.tutorialzine.com/2009/10/jquery-twitter-ticker/demo.html License: License Free
In my last two tutorials, I explained how to use event delegation for showing and hiding tooltips. In a comment on the first one, Jan Aagaard asked how we might go about enhancing the script by adding a small delay before showing a tooltip. The answer lies with two JavaScript functions, setTimeout() and clearTimeout().
Picking up where we left off last time, I'm going to create the tooltip div, declare a couple variables, and then bind 'mouseover,' 'mousemove,' and 'mouseout' all at once. In addition to $livetip and tipTitle, I'm declaring showTip (and leaving it undefined for the moment) and delay. The showTip variable will be used as a reference for the setTimeout function, and delay will be used to set the time after which the function within setTimeout's argument will execute (in this case, 300ms).
Of course, you don't have to use a variable for the delay, but I like to have that sort of setting up top where I can find it easily. Also, if I ever decide to convert this script into a plugin, having the delay stored in a variable will make it simpler to convert it to an option.
Inside the .bind(), and after the business of determining whether the event is being triggered by a link or one of its descendants, the setTimeout is called on line 12:
setTimeout is actually a method of the window object; as such, the this keyword inside its function argument will refer to window. It's not of much concern here because, with event delegation, we're relying on event.target rather than this, but I thought it might be worth mentioning anyway.
Note that within the setTimeout function, I'm storing a little data (line 13) for the link to indicate that the tooltip is active on it. This tipActive information then determines what to do on mouseout.
On mouseout, if the link has the tipActive data, that data is removed (line 29, below), the tooltip is hidden (line 30), and the link's original title attribute value is restored if tipTitle has a value (line 31). If that tipActive data is not associated with the link, then the timeout that was set on mouseover is reset with clearTimeout (line 33).
The mousemove part hasn't changed from what it was in the previous post, except that it first checks if the 'tipActive' data is assigned to the link. I figured that setting the top and left properties of the tooltip is probably more work than doing a little check on the link's data, so why bother setting them if I don't have to?
So, that's it. Just add a simple setTimeout delay and conditionally clear it. If you want to set a delay on mouseout, you can do that the same way.
Check out the demo or download the zip (or neither, if you're stubborn).
Meerkat is a jQuery plugin for creating a fixed content on the top or bottom of the page which keeps its position when the page is scrolled.
The content displayed can slide or fade in & can be configured with the options provided.
There is a close option, which closes Meerkat until the page has been reloaded, or a dontShow option, which closes it until the browser session has ended, or for a set amount of days, totally configurable.
It is also possible to define the background color, height & animation speed of the Meerkat easily.
The plugin is very useful for displaying sticky banners & notifications or creating a splash page (an example exists in the plugin page).
Special Downloads: Ajaxed Add-To-Basket Scenarios With jQuery And PHP Free Admin Template For Web Applications jQuery Dynamic Drag’n Drop ScheduledTweets
Advertisements: SSLmatic – Cheap SSL Certificates (from $19.99/year) Follow WebResourcesDepot At Twitter And Get More Resources!
Tags: Javascript, Popup
We all know the kind of dynamic and engaging functionality that jQuery can add to a user interface, but integrating jQuery does require some technical know-how. This isn’t a big deal for many of us, but some WordPress users prefer the simplicity of a plugin. The purpose of this article is to help you discover some of the useful WordPress plugins available that gives you jQuery powered functionality in an easy to implement package.
This plugin builds on the builtin Wordpress gallery, and replaces any gallery inserted using the tag with a neat jQuery powered carousel. By carousel it means you can browse through all the pictures in the gallery and they’ll slide from the right to the left and seamlessly start over at the end.
jQuery Lightbox For Native Galleries makes the native WordPress galleries use a lightbox script called ColorBox to display the fullsize images.
This plugin adds Lazy Load to WordPress. Lazy load delays loading of images in (long) pages. Images below the fold (far down in the page) wont be loaded before user scrolls down.
This plugin gives commentors a live preview without taking up any extra screen real estate. It includes a simple HTML editor and you can customize comment preview block as you wish.
Google Analyticator adds the necessary JavaScript code to enable Google Analytics logging on any WordPress blog. This eliminates the need to edit your template code to begin logging. Google Analyticator also includes several widgets for displaying Analytics data in the admin and on your blog.
If you don’t like WordPress built-in Visual Editor (because it puts a lot of unnecessary tags or by any other reasons), but you want to have live post preview like in Visual Editor, this plugin may be useful for you.
jQuery-Pagebar displays a jQuery slider instead of the normal previous/next links.
This plugin will rotate latest posts from blog, presented with selected image, post headline, and optional post excerpt.
This plugin implements the excellent Javascript Slimbox2 written by Christophe Beyls which utilizes jQuery.
This plugin aims to consolidate your post information into a collapsible panel (using jQuery) that can save space on your page.
This is Wordpress’s version of the jQuery Lightbox Plugin written by balupton.
jQuery has a nice selection of core animation effects, such as .show('speed') and .hide('speed'), .slideUp() and .slideDown(), and .fadeIn() and .fadeOut(). It even has a couple methods for toggling effects — the aptly named .toggle('speed') and .slideToggle().
All of these methods have optional speed, easing, and callback arguments — although a couple are special cases. The .show() and .hide() methods, when used without a speed, will immediately show and hide the matched set of elements with no animation. When the speed argument is included, the matched elements are shown and hidden gradually by animating their height, width, and opacity simultaneously. The .toggle() method shares its name with a method that takes two arguments that alternate being triggered. All of the other effect methods have a default speed of 400ms.
jQuery internally uses another method, .animate(), to define these shorthand effect methods, and it makes .animate() available to us to do the same. So, let's create our own method that we can use the same way we would use, for example, .slideToggle().
Someone on the jQuery discussion list recently asked if there was a .fadeToggle() effect in jQuery. In my reply, I admitted that there wasn't one, but suggested that it wouldn't be too hard to create using .animate(). We just attach .fadeToggle to jQuery.fn and pass in the speed, easing, and callback arguments. Then, we return this.animate() with the effect we want, along with those same arguments:
Now, when we want to use it, we can treat it the same as any other jQuery method. For example:
Try it out:
(Incidentally, Dan G. Switzer saw the discussion-list thread and blogged about it himself. Thanks, Dan!)
To create a method that toggles a fade and a slide at the same time, all we need to do is repeat the process, adding a 'height' parameter:
Give this one a try:
Let's try one more — a "blind" effect. Instead of changing the height of the element, as we do with a "slide" animation, we're going to move the entire element up and down.
The plugin itself will still be fairly rudimentary, but we'll need to set up some CSS to get it to work correctly. Here is the CSS:
Notice that we have two 'boxes' styled here. The first one will be in the markup itself, but the second one, since it's only being used to help with the effect, will be created by our script. The important properties here are #box-outer's overflow: hidden and height: 120px. The hidden overflow will allow #box to seemingly disappear as it moves up, while the height (which is #box's height plus its top and bottom padding) will keep the rest of the page from shifting along with the box.
Now, on to the plugin code:
While relatively simple, there are a couple things here that might be confusing to jQuery/JavaScript beginners. The first line inside the function declares a variable for the height of this, plus the top and bottom padding ('this' here refers to whatever is matched by the selector in the script that uses the plugin). The parseInt() JavaScript function function looks at a string from left to right until it encounters a non-numeric character. The string of digits up to that character is converted into an integer, stripping off the trailing non-numeric character. So, '10px' becomes 10.
The line that follows animates the marginTop property. It uses a ternary (conditional) operator to test if marginTop is less than zero. If it is, the element's marginTop property animates to 0; if not, it animates to negative the value stored in the h variable.
Finally, we're ready to put this plugin to use:
Line 2 'caches' our selector, since we're using it more than once. Then we wrap a div around the '#box' div and bind a click handler to a button. Let's see how this one looks:
Blind Toggle
So, now we have three simple effects methods that we apply to our sites for a little extra flair.
For really cool effects, check out the brand new jQuery Enchant — a set of effects similar to the popular script.aculo.us effects for Prototype. While Enchant is still only in an Alpha version, it already looks fantastic.
