jQuery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible. It is a simple 2-click in place editing time picker and regular time picker.
It is unobtrusive and degrade gracefully. It has intuitive keyboard navigation support as well. jQuery.timepickr has just released Version 0.7 with the support of jQuery UI theme switcher. You can play around it with different themes offered.
Requirements: jQuery Framework
Demo: http://haineault.com/media/jquery/ui-timepickr/page/
License: MIT License
AnythingSlider is an attempt at bringing together the functionality of “featured content†slider, “start/stop slider“, “moving boxes“ and adding new features. In other words, to create a really “full featured†slider that could be widely useful. This is a plugin, which makes implementing it and customizing it much easier.
It supports Auto-playing (start playing or stopped). Pauses autoPlay on hover is optional. Each slide has a hashtag (can link directly to specific slides). Infinite/Continuous sliding (always slides in the direction you are going, even at “last†slide).
Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/AnythingSlider/
License: License Free
Nettus has published a tutorial of “How to Create A Simple Web-based Chat Application“. In the tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website.
The chat application includes a login and logout system, AJAX-style features, and will also offer support for multiple users. Also, you can work off this and build a multiple chat rooms, add an administrative backend, add emoticons, etc…
Requirements: jQuery Framework
Demo: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-simple…
License: License Free
The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.
Calendar events can be supplied as an array, url or function returning json. They can be dragged, dropped and resized. Lots of callbacks for customizing the way events are rendered plus callbacks for drag, drop, resize, mouseover, click etc. The jquery-week-calendar plugin is also highly configurable, enabling variable timeslots, readonly calendars, display of partial days, custom date formatting, direct manipulation of individual events for create, update, delete of events and much more.
Requirements: jQuery Framework
Demo: http://jquery-week-calendar.googlecode.com…
License: MIT License
One of the least used properties in CSS is the Clip property. Clip is part of the visual effects module of CSS 2.1 and its job is to place a visible window on top of an object that is being clipped.
It is useful for clipping images and creating thumbnails without having to create additional files. Creating Thumbnails Using the CSS Clip Property can be used to create square thumbnails, or to create other varieties of thumbnails without actually duplicating files on the server.
You can also add some drop shadow to the clipped thumbnail by using three wrapper divs with negative offsets of slightly varying background colors to create a shade effect.
Requirements: –
Demo: http://www.seifi.org/css/creating-thumbnails…
License: License Free
Bumpbox is another lightbox clone with a few advantages over other lightboxes – it supports not only all common media types but also PDF’s.
Yet, the integration and implementation on your own site is pretty simple. Just add the scripts to your head section, add classes to your links that should use bumpbox, define a rel tag with the size that the bumpbox should have and you’re ready to roll.
Bumpbox automatically detects what kind of filetype you wish to show in the box, so you do not need to specify the type, easing the process of integration.
Requirements: Mootools Framework 1.2
Demo: http://www.artviper.net/bumpbox.php
License: License Free
You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. AnythingZoomer is a jQuery plugin that does it.
It’s flexible in many ways, in that the “smallâ€, “largeâ€, and “zoom†areas are all pretty easy to customize via CSS. It’s inflexible in other ways, in that it doesn’t “automatically†work by cloning content or anything like that (which is arguably more flexible), and the HTML structure is fairly rigid.
Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/AnythingZoomer/
License: License Free
MattBango has shared his approach to creating a timeline out of CSS and HTML. The Pure CSS Timeline is a simple and clean looking timeline with some very straight forward markup. We have a nice looking timeline styled completely with CSS, but what happens if the visitor doesn’t have CSS enabled? Since we used unordered lists, we still have a nicely accessible list of events.
The Pure CSS Timeline may not be the perfect solution markup wise and CSS wise, but it gets the job done and is still quite accessible for all users. Take the timeline a step further. You could add some Javascript interactions, tooltips, animations, etc.
Requirements: –
Demo: http://mattbango.com/notebook/web-development/pure-css-timeline/
License: License Free
Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array. Here’s a look at the final result that we’ll be looking to make:
Our page will have two links. When a user hovers over a link, it will trigger the top banner to change its background image and text based on the entry in a JSON array. See the Demo
We’ll be using a pack of background images in later steps. You can grab those here.
Build the Page Structure
New File: I have called my HTML file ‘json-tooltip.htm” for this tutorial
Our example’s HTML is pretty self explanatory. We’re just blocking out a banner to contain the tooltip information, and then placing all of the normal content below.
Pay special attention to what’s going on with link anchors with a class of “tooltip” though. This is the class that will designate which links are tooltips. Also, you’ll notice that the “rel” attribute contains a number. This is the number we’ll use to associate a specific tooltip to an anchor link. This will become clear in a few steps. Read the rest of this entry »
Filament Group wrote an article describing how to use JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. The technique is particularly useful because the data for the visualization already exists in the page in structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.
Now they have rewritten and extended the code behind the technique and packaged it up as a new jQuery plugin called “Visualize“, which you can download. The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
Requirements: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9
Demo: http://www.filamentgroup.com/examples/charting_v2/index_2.php
License: MIT, GPL License
