WebAppers » Componentshttp://www.webappers.com - Hunting the Best Open Source Resources for Web Developers Fri, 19 Mar 2010 07:01:23 +0000 http://wordpress.org/?v=2.8.6 en Presentation Cycle with a Progress Barhttp://www.webappers.com/2010/03/17/presentation-cycle-with-a-progress-bar/ http://www.webappers.com/2010/03/17/presentation-cycle-with-a-progress-bar/#comments Wed, 17 Mar 2010 07:01:33 +0000 Ray Cheung http://www.webappers.com/?p=2620 Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements. Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

Gaya Design has written a tutorial explain how to implement this on your web page and give you some tips on how to adjust the looks of the cycle elements and progress bar.

presentation-cycle

Requirements: jQuery Framework
Demo: http://www.gayadesign.com/scripts/presentationCycle/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/03/17/presentation-cycle-with-a-progress-bar/feed/ Display Thumbnail for Image Uploads with jQueryhttp://www.webappers.com/2010/03/08/display-thumbnail-for-image-uploads-with-jquery/ http://www.webappers.com/2010/03/08/display-thumbnail-for-image-uploads-with-jquery/#comments Mon, 08 Mar 2010 07:01:10 +0000 Ray Cheung http://www.webappers.com/?p=2561 We’ve all seen the basic file upload form for uploading avatars, images, memes, etc. The problem with these is that once you upload your image it’s hidden from you.

The solution is to use a little bit of JavaScript to upload the image as soon as it’s selected and display a thumbnail so we can easily review the form before we submit it. Head on over to the ZURB – Image Uploads with 100% Less Suck to see a complete demo and breakdown of the JavaScript they use to accomplish this.

ajax-image-upload

Requirements: jQuery Framework
Demo: http://www.zurb.com/playground/ajax_upload
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/03/08/display-thumbnail-for-image-uploads-with-jquery/feed/ BubbleUP jQuery Plugin for Your Menushttp://www.webappers.com/2010/03/04/bubbleup-jquery-plugin-for-your-menus/ http://www.webappers.com/2010/03/04/bubbleup-jquery-plugin-for-your-menus/#comments Thu, 04 Mar 2010 07:01:37 +0000 Ray Cheung http://www.webappers.com/?p=2535 BubbleUP jQuery Plugin is a fun and easy plugin to get you started in jQuery. The effect is a nice starting point for learning the basics and many of the steps involved in creating other more intricate plugins you will make in the future.

With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. It has been tested on IE 7, Opera 10, Firefox 3.5, Safari 4, and Chrome 5 Beta.

jquery-bubble

Requirements: jQuery Framework
Demo: http://aext.net/jquery-menu-plugin-bubbleup/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/03/04/bubbleup-jquery-plugin-for-your-menus/feed/ Mac-like Multi-level Dropdown Menu with CSS3http://www.webappers.com/2010/03/02/mac-like-multi-level-dropdown-menu-with-css3/ http://www.webappers.com/2010/03/02/mac-like-multi-level-dropdown-menu-with-css3/#comments Tue, 02 Mar 2010 07:01:47 +0000 Ray Cheung http://www.webappers.com/?p=2539 WebDesignerWall has shared the way he made the Mac-like multi-level dropdown menu using border-radius, box-shadow, and text-shadow. It is called CSS3 Dropdown Menu, which renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

There is one gradient image is used. A white-transparent image is used to achieve the gradient effect. Because the new CSS3 gradient feature is not supported by all browsers yet, it is safer to use a gradient background image.

css3-dropdown-menu

Requirements: -
Demo: http://www.webdesignerwall.com/demo/css3-dropdown-menu/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/03/02/mac-like-multi-level-dropdown-menu-with-css3/feed/ TinyTips – Lightweight jQuery Plugin for Tooltipshttp://www.webappers.com/2010/02/27/tinytips-lightweight-jquery-plugin-for-tooltips/ http://www.webappers.com/2010/02/27/tinytips-lightweight-jquery-plugin-for-tooltips/#comments Sat, 27 Feb 2010 07:01:50 +0000 Ray Cheung http://www.webappers.com/?p=2516 TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly. TinyTips is very easy to install and use. Simply include TinyTips and the latest release of jQuery in the <head>.  You can also give it a nice style by editing the stylesheet.

tiny-tooltips

Requirements: jQuery Framework
Demo: http://www.digitalinferno.net/demos/tt-1-0/index.html
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/02/27/tinytips-lightweight-jquery-plugin-for-tooltips/feed/ Pure HTML Clocks using Javascript & CSS Rotationhttp://www.webappers.com/2010/02/24/pure-html-clocks-using-javascript-css-rotation/ http://www.webappers.com/2010/02/24/pure-html-clocks-using-javascript-css-rotation/#comments Wed, 24 Feb 2010 07:01:56 +0000 Ray Cheung http://www.webappers.com/?p=2506 The two Clocks are pure HTML using JavaScript and CSS rotation. There are no Adobe Flash files or <canvas> going on, just regular <div> and <img> tags. The way it works is by taking those images in an { overflow: hidden } <div> and rotating them, via JavaScript, using the proposed CSS transform property.

However, this isn’t going to work in any currently available version of Internet Explorer or many older browsers. It only works in Google Chrome, Safari and Firefox 3.5+ browsers support the CSS transform property.

css-clock

Requirements: Browsers support CSS transform property
Demo: http://joncom.be/code/css-clocks/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/02/24/pure-html-clocks-using-javascript-css-rotation/feed/ YoxView – A Free jQuery Image Viewer Pluginhttp://www.webappers.com/2010/02/23/yoxview-a-free-jquery-image-viewer-plugin/ http://www.webappers.com/2010/02/23/yoxview-a-free-jquery-image-viewer-plugin/#comments Tue, 23 Feb 2010 07:01:40 +0000 Ray Cheung http://www.webappers.com/?p=2501 YoxView is a free image viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin. YoxView is inspired by Lokesh Dhakar’s Lightbox. Like it, YoxView displays images above the website’s content, as a separate layer.

Users always see the whole image, even on small screen resolutions or resized windows. Images smaller than the browser’s window are displayed at their original size, larger images are resized to fit. Images are loaded in the background, to improve the viewer’s performance and shorten wait times for users. Forward caching continues while viewing images.

yox-view

Requirements: jQuery Framework
Demo: http://www.yoxigen.com/yoxview/
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/02/23/yoxview-a-free-jquery-image-viewer-plugin/feed/ Chat Room v2 with PHP, jQuery, and a Text Filehttp://www.webappers.com/2010/02/20/chat-room-v2-with-php-jquery-and-a-text-file/ http://www.webappers.com/2010/02/20/chat-room-v2-with-php-jquery-and-a-text-file/#comments Sat, 20 Feb 2010 07:01:33 +0000 Ray Cheung http://www.webappers.com/?p=2487 This is Chat2, which is an update to original Chat Room published on CSS-Tricks. In some ways, the technology is the same. We employ PHP to talk to the server, jQuery to keep the chat rolling, and the chats themselves will be stored in .txt files just like the first version.

There are some new features in Chat2. Usernames are now unique to users currently chatting. You can see a “currently chatting” user list. And there are multiple rooms for chatting available now.

chat2

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

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/02/20/chat-room-v2-with-php-jquery-and-a-text-file/feed/ jQuery Digital Clock Inspired by HTC Hero Widgethttp://www.webappers.com/2010/02/16/jquery-digital-clock-inspired-by-htc-hero-widget/ http://www.webappers.com/2010/02/16/jquery-digital-clock-inspired-by-htc-hero-widget/#comments Tue, 16 Feb 2010 07:47:34 +0000 Ray Cheung http://www.webappers.com/?p=2463 jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget. To use the jDigiClock plugin, simply include the jQuery library, the jDigiClock source file and jDigiClock core stylesheet file inside the <head> tag of your HTML document.

jDigiClock accepts a lot of configuration options, e.g. Clock images path, Weather images path, Set AM/PM option, Weather location code, Set weather metric mode: C or F, Weather update in minutes.

jquery-weather-clock

Requirements: jQuery Framework
Demo: http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/
License: MIT and GPL License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/02/16/jquery-digital-clock-inspired-by-htc-hero-widget/feed/ Automatic Image Rotator with CSS and jQueryhttp://www.webappers.com/2010/02/15/automatic-image-rotator-with-css-and-jquery/ http://www.webappers.com/2010/02/15/automatic-image-rotator-with-css-and-jquery/#comments Mon, 15 Feb 2010 07:01:23 +0000 Ray Cheung http://www.webappers.com/?p=2447 With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, SohTanaka believes it is wise to build simple widgets like the image slider using HTML / CSS / Javascript, and leave more interactive applications for flash if needed.

Therefore, SohTanaka has built an Automatic Image Slider with CSS and jQuery. This html based image slider will have its benefits with SEO and will also degrade gracefully for those without Javascript enabled.

image-rotator

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

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/02/15/automatic-image-rotator-with-css-and-jquery/feed/