Open Source Resources for Web Application Developers WebAppers - Hunting the Best Open Source Resources for Web Developers

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

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

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

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

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

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

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

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

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

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

Page 1 of 3212345»...Last »
Advertise Here

Search Site


Advertise on WebAppers