WebAppers

/ best free open source web resources /

Shopify

How to Turn Long Web Form into a Wizard with jQuery

Posted · Category: Forms, License Free

If you would, for whatever reason, have a large webform all fields should be semantically divided into fieldsets. Each fieldset would clearly describe each group of fields.

So, we can say that each group of fields represent a sub task of a larger task – filling the entire web form. Thus, each sub task can become a step with a description, input fields and navigation that is common for wizard forms – back and next. The entire process can be done in several simple steps.

This detailed tutorial will show you how to turn long webform into a wizard with jQuery. A plugin is also available for download.

form-wizard

Requirements: jQuery Framework
Demo: http://www.jankoatwarpspeed.com/examples/webform_to_wizard/
License: License Free

Web Icon Set Offers Professional & Quality Icon Sets

Posted · Category: Icons, License Free

Web Icon Set offers professional and quality icon sets to web developers like us. They have just released their first icon set, Web Application Icon Set for free. You can use these icons on any desktop and web applications.

Application Icon Set inclides Register, Settings, Users, Database, Login, Chat, Add, Delete, Edit, invoice. They are in PNG format with 128, 64, 48, 32px sizes. Web Icon Set regularly adding more great web icons, so please stay tuned.

application-icons

Requirements: -
Demo: http://www.webiconset.com/
License: License Free

Simply Butons v2 with Javascript Enhancements

Posted · Category: Buttons, License Free

p51Labs came up with the Simply-Buttons v2. Buttons auto resize itself to fit text. There are 3 states: Inactive, Active, and Hover. They look and behave the same way in every browser and operating system. However, the caveats are the outlines on the buttons, the text is selectable. And These buttons are not mobile friendly.

With Simply-Buttons Javascript component provided, you can solve the caveats above as well. You can easily modify the buttons look and feel. You can do this by creating your own stylesheet. If you like this, you might be interested in Simple Round CSS Buttons or Colorful and Scalable Buttons or Beautiful Scalable CSS Buttons as well.

buttons-2

Requirements: -
Demo: http://www.p51labs.com/simply-buttons-v2/
License: License Free

Search Over 13,000 High Quality Freeware Fonts

Posted · Category: Fonts, License Free

A unique font can help your document stand out and attract attention. A perfectly suited font can help to make a design attractive and successful. Finding these high quality fonts is a task made easier with SearchFreeFonts.com. New SearchFreeFonts.com collection contains over 13,000 free fonts.

Freeware fonts can be used commercially or non-commercially without acquiring copyright permission as long as you will not profit from the use of the font. Detailed copyright information is available for individual fonts in the readme.txt file, or copyright.txt which are included as a part of the zip font file.

search-free-fonts

Requirements: -
Demo: http://www.searchfreefonts.com/
License: License Free

Raindrops Create Useful, Compelling Messaging Experiences

Posted · Category: License Free, Webmail

raindrop

Raindrop is an exploration in messaging innovation being led by the team responsible for Thunderbird, to explore new ways to use Open Web technologies to create useful, compelling messaging experiences.

A central principle behind Raindrop is that messaging should be personal — they want Raindrop to be people-centric both in how they process messages, and in how they can help give people control over their personal data and experiences.

When a friend’s link from YouTube or flickr arrives, your messaging client should be able to show the video or photos near or as part of the message, rather than rudely kicking you over to a separate browser tab.

Notifications from computers and mailing lists should be organized for you, not clutter your Inbox or require tedious manual filter setup. It should be easy to smoothly integrate new web services into your conversation viewer entirely using open web technologies.

raindrop-mozilla

Source: http://mozillalabs.com/raindrop/

How to Create Mega Drop Down Menus with jQuery

Posted · Category: License Free, Menu

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

Show Your Links as a Drop Down List with Pluralink

Posted · Category: License Free, Tooltips

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

How to Create a Animated Flip-Down Clock with Mootools

Posted · Category: Calendar, License Free

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

Use Facebook Connect on Your Site with Mu

Posted · Category: Framework, License Free

Facebook Connect is way to make your application more social. With it you gain access to: Identity: the user’s name, photo and more. Social Graph: the user’s friends and connections. Distribution: the Stream, and the ability to communicate. Integration: publishers, canvas pages, profile boxes & tabs.

This guide is for using the Mu JavaScript library to access the above on your site. Mu is a very lightweight library which you can use Facebook Connect on your site along with your favourite JavaScript library such as Dojo, jQuery, MooTools, Prototype or YUI.

mu-facebook-api

Requirements: Facebook Connect
Demo: http://mu.daaku.org/console/
License: License Free

How to Create a Google Wave-like History Slider

Posted · Category: Information, License Free

We’ve all seen the videos of Google’s latest product – Wave. Although not “ground-braking” and “revolutionary” as we’ve imagined, it still features some great UI that will surely inspire at least a few developers to implement some of it in their works.

Tutorialzine was one of those inspired people, he showed us how to create a Google Wave-like History Slider. Using it, we will enable our visitors to go back and forth in time to view the changes that take place on a comment thread.

The technologies we are using include PHP as a back-end, MySQL as data storage, jQuery, CSS and XHTML for the front-end with AJAX in between. The slider itself is a component created with jQuery UI.

googlw-wave-slider

Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2009/10/google-wave-history-slider-jquery…
License: License Free

Page 59 of 94...«555657585960616263»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons