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).
