WebAppers » Componentshttp://www.webappers.com - Hunting the Best Open Source Resources for Web Developers Sat, 21 Nov 2009 07:01:00 +0000 http://wordpress.org/?v=2.8.6 en Floom – Blinds Effect MooTools Slideshowhttp://www.webappers.com/2009/11/16/floom-blinds-effect-mootools-slideshow/ http://www.webappers.com/2009/11/16/floom-blinds-effect-mootools-slideshow/#comments Mon, 16 Nov 2009 07:01:02 +0000 Ray Cheung http://www.webappers.com/?p=1955 Floom is a Blinds-effect MooTools Slideshow. There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation. The second one is by simply passing a element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection.

mootools-slideshow

Requirements: Mootools Framework
Demo: http://nouincolor.com/floom/1.0/Demos/
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/11/16/floom-blinds-effect-mootools-slideshow/feed/ ATWidget – Easy to Customize Date & Time Pickerhttp://www.webappers.com/2009/11/13/atwidget-easy-to-customize-date-time-picker/ http://www.webappers.com/2009/11/13/atwidget-easy-to-customize-date-time-picker/#comments Fri, 13 Nov 2009 07:01:56 +0000 Ray Cheung http://www.webappers.com/?p=1963 The Any+Time JavaScript Library includes an easy-to-use, easy-to-customize calendar widget (date and/or time picker) and a powerful Date/String parse/format utility. ATWidget is the AJAX-capable JavaScript GUI component. It is easy to add to a page and even easier to use! Unlike most date/time selection tools, nearly every field in an ATWidget control can be chosen with a single mouse click.

The ATWidget date/time control is attached to any input (text) field with a single line of JavaScript code. It can be placed as a popup or inline. The appearance of the ATWidget calendar tool can be customized by modifying or supplementing the included CSS stylesheet. All labels, as well as month, weekday and era names and abbreviations, are also easy to change.

any-time

Requirements: Prototype Framework
Demo: http://www.ama3.com/anytime/
License: Creative Commons License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/11/13/atwidget-easy-to-customize-date-time-picker/feed/ Create Zoomable & Interactive Maps with jQueryhttp://www.webappers.com/2009/11/09/create-a-zoomable-interactive-maps-with-jquery/ http://www.webappers.com/2009/11/09/create-a-zoomable-interactive-maps-with-jquery/#comments Mon, 09 Nov 2009 07:01:10 +0000 Ray Cheung http://www.webappers.com/?p=1932 NMC has written a jQuery plugin for Zoomable, Interactive Maps. Each location on the map would be represented by a bullet. Clicking the bullet would bring up more information on the location. Since the locations of the bullets might be highly clustered, zooming into select subregions is possible too.

However, the plugin currently does nothing on its own to make content available to search engines and those with disabilities. And also, right now it is impossible to programatically interact with the map once it is launched. Eventually it will have a simple API to assist in navigation and other manipulations.

jquery-maps

Requirements: jQuery Framework
Demo: http://www.newmediacampaigns.com/page/a-jquery-plugin…
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/11/09/create-a-zoomable-interactive-maps-with-jquery/feed/ How to Create Mega Drop Down Menus with jQueryhttp://www.webappers.com/2009/11/05/how-to-create-mega-drop-down-menus-with-jquery/ http://www.webappers.com/2009/11/05/how-to-create-mega-drop-down-menus-with-jquery/#comments Thu, 05 Nov 2009 07:01:53 +0000 Ray Cheung http://www.webappers.com/?p=1910 Do you remeber we have published a post of Accessible Very Tall Menus with jQuery and CSS? Some people found it not a good way to present information, because we cannot see everything on the menu in one go.

Now SohTanaka has come up with another solution – Mega Drop Down Menus. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.

mega-dropdown-menu

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/11/05/how-to-create-mega-drop-down-menus-with-jquery/feed/ Show Your Links as a Drop Down List with Pluralinkhttp://www.webappers.com/2009/11/04/show-your-links-as-a-drop-down-list-with-pluralink/ http://www.webappers.com/2009/11/04/show-your-links-as-a-drop-down-list-with-pluralink/#comments Wed, 04 Nov 2009 07:01:02 +0000 Ray Cheung http://www.webappers.com/?p=1903 Pluralink is an amazing javascript plugin to arrange multiple links in your text. Here is how it works. Suppose you have to include 3 links in a text. What you usually do is that you list it one after the other in a single line which gives a feeling of repetition. For example, if you want to link to google, yahoo and bing in a single line, you will write as “the three top search engines google, yahoo, bing contribute …”.

But with Pluralink you can show all your links as a drop down list from which the user can choose any of those. It gives a nicer look as well. You can download either the pure pluralink version or the wordpress plugin version for free.

multi-links

Requirements: -
Demo: http://pluralink.com/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/11/04/show-your-links-as-a-drop-down-list-with-pluralink/feed/ An Unobtrusive Javascript Calendar & Datepickerhttp://www.webappers.com/2009/10/31/an-unobtrusive-javascript-calendar-datepicker/ http://www.webappers.com/2009/10/31/an-unobtrusive-javascript-calendar-datepicker/#comments Sat, 31 Oct 2009 07:55:38 +0000 Ray Cheung http://www.webappers.com/?p=1879 After the success of Vista-like Ajax Calendar, dev.base86 has recently released Calender Eightysix. It is completely built from scratch with pure javascript, making use of some of the superb features the latest MooTools javascript framework has to offer.

Calender Eightysix is an unobtrusive developer friendly javascript calendar and datepicker offering a better user experience for date related functionalities. Calendar Eightysix has a variety of options to style and format the calendar to your needs. This is done by providing options while instantiating the class.

javascript-calendar

Requirements: Mootools Framework
Demo: http://dev.base86.com/scripts/datepicker_calendar_eightysix.html
License: Creative Commons 3.0 License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/10/31/an-unobtrusive-javascript-calendar-datepicker/feed/ How to Create a Animated Flip-Down Clock with Mootoolshttp://www.webappers.com/2009/10/30/how-to-create-a-animated-flip-down-clock-with-mootools/ http://www.webappers.com/2009/10/30/how-to-create-a-animated-flip-down-clock-with-mootools/#comments Fri, 30 Oct 2009 07:01:27 +0000 Ray Cheung http://www.webappers.com/?p=1875 Nettus has published a tutorial: Learn how to Create a Retro Animated Flip-Down Clock. In the tutorial, we will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, we are trying to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website.

The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the “flip” effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes.

flipdown-clock

Requirements: Mootools Framework
Demo: http://nettuts.s3.amazonaws.com/470_clock/Source/index.html
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/10/30/how-to-create-a-animated-flip-down-clock-with-mootools/feed/ SimpleModal – A jQuery Modal Dialog Frameworkhttp://www.webappers.com/2009/10/28/simplemodal-a-jquery-modal-dialog-framework/ http://www.webappers.com/2009/10/28/simplemodal-a-jquery-modal-dialog-framework/#comments Wed, 28 Oct 2009 07:01:15 +0000 Ray Cheung http://www.webappers.com/?p=1864 SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

Styles can be applied through external CSS, the options object, or both. The CSS options for the modal overlay, container, and data elements are: overlayCss, containerCss and dataCss, all which take a key/value object of properties.

jquery-modal

Requirements: jQuery Framework
Demo: http://www.ericmmartin.com/projects/simplemodal-demos/
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/10/28/simplemodal-a-jquery-modal-dialog-framework/feed/ Accessible Very Tall Menus with jQuery and CSShttp://www.webappers.com/2009/10/23/accessible-very-tall-menus-with-jquery-and-css/ http://www.webappers.com/2009/10/23/accessible-very-tall-menus-with-jquery-and-css/#comments Fri, 23 Oct 2009 07:01:25 +0000 Ray Cheung http://www.webappers.com/?p=1836 The problem with long dropdowns is that the dropdown itself can go below the fold of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window.

For those of us with scroll wheels of some kind on our mouses, it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu and probably having it close.

CSS Tricks has come up with a Solution For Very Long Dropdown Menus, and tell us how to implement a technique where as you scroll down, the menu actually moved in an accelerated fashion. Therefore the menu can be accessible even the user has no scroll wheels on his mouse.

css-tall-menu

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/LongDropdowns/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/10/23/accessible-very-tall-menus-with-jquery-and-css/feed/ Embed Customised Google Maps into Your Websitehttp://www.webappers.com/2009/10/17/embed-customised-google-maps-into-your-website/ http://www.webappers.com/2009/10/17/embed-customised-google-maps-into-your-website/#comments Sat, 17 Oct 2009 07:01:33 +0000 Ray Cheung http://www.webappers.com/?p=1812 The Google Maps API allows you to embed maps directly into your website. All it takes is a little JavaScript, and CSS. Version 3 of the Google Maps API has just been released, it would be nice to do something with it.

Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it be nice to add your company logo, parking lots, train stations to the map, in order to help the customer even more? Adding Custom Google Maps to Your Website is very simple and easy, Stiern is going to show you how.

google-map-api

Requirements: Google Map API
Demo: http://stiern.com/tutorials/adding-custom-google-maps-to-your-website
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/10/17/embed-customised-google-maps-into-your-website/feed/