WebAppers

/ best free open source web resources /

Shopify

Sliding Content Aside to Reveal Secondary Content Pane

Posted · Category: GPL License, Popup

As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user’s focus on the task at hand. There are many techniques to use Lightbox, Carousel and Tabs to name a few – and recently Scott Robbin has offered up another: jQuery pageSlide.

jQuery pageSlide was inspired by the UI work of Aza Raskin. Aza introduced the idea of sliding content aside to reveal a secondary content pane. This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript.

By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

content-slider

Requirements: jQuery Framework
Demo: http://srobbin.com/blog/jquery-pageslide/
License: GPL License

Create Complex Layouts with a Fast and Simple UI Kit

Posted · Category: Framework, MIT License

Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with a rich view-component library ranging from Slider to List and SplitPane. Google wave layout can be coded in 100 lines using uki code.

Uki doesn’t want to be a Jack-of-all-trades. It only does layout but it does it well. You won’t find any ajax or data storage layer code here. Uki uses progressive rendering and can render 30k+ lists and tables most instantly. Uki works with IE6+, Opera 9+, FF 2+, Safari 3+, Chrome. And it looks exactly the same in all of them.

google-wave-layout

Requirements: -
Demo: http://ukijs.org/functional/wave.html
License: MIT License

Show a Before and After Picture with a Slider in jQuery

Posted · Category: CC License, Tools

New York Times online had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were.

CatchMyFame found this very useful and immediately created Before/After jQuery Plugin for the same purpose. The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

before-after-jquery

Requirements: jQuery Framework
Demo: http://www.catchmyfame.com/jquery/demo/8/
License: Creative Commons License

Roundabout jQuery Plugin with 9 Additional Movements

Posted · Category: BSD License, Gallery

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.

Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers nine additional movements. Like its Roundabout companion, Roundabout Shpaes is released under the BSD license.

jquery-roundabout

Requirements: jQuery 1.2.3+, 1.3.x or 1.4.x*
Demo: http://fredhq.com/projects/roundabout/
License: BSD License

Free Web Form Elements in PSD Format

Posted · Category: Forms, License Free

A webform on a web page allows a user to enter data that is sent to a server for processing. Webforms usually include checkboxes, radio buttons, or text fields. Designing webforms can be tedious sometimes. M. Manojlovic has saved us so much time by providing us some really nice Web Form Elements (Vol.1 and Vol.2) in PSD, which you can use them for free.

Web Form Elements Vol.1

webforms-1s

Web Form Elements Vol.2

webforms-2

Requirements: -
Web Form Vol.1: http://sniperyu.deviantart.com/art/Web-Form-Elements-1…
Web Form Vol.2: http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2…
License: License Free

Display Editable Form Data As Regular Tabular Data

Posted · Category: Forms, License Free

CSS Globe has shown us a little trick that you can apply to your forms to enhance user experience. We will display editable form data (indented to be edited, updated) as regular tabular data intended for reading.

This works on most modern browsers with pure CSS, but we need a little bit of Javascript in order to make this work on Internet Explorer though, because of the lack of support for :focus pseudo-class.

tabular-form

Requirements: -
Demo: http://cssglobe.com/articles/editable_fields/
License: License Free

The Winners of 20 One-Year Pingdom Accounts

Posted · Category: Announcement

Thank you for all of the participants of Over $2,000 Christmas Giveaway: Pingdom Accounts. We are happy to announce the following 5 winners. Congratulations. We will contact you guys shortly with the instruction of getting your free Pingdom Account.

1. Robert Durish 2. webbografico 3. Arpit Jacob 4. Michele Gerarduzzi 5. Joel 6. Claes 7. Rob Mason 8. Darren Cornwell 9. Anton Dubina 10. Alex Flueras 11. Jeremy Weiss 12. Kaiserlino 13. james F 14. Irimia 15. DarkMaster 16. mdhb2 17. Eric 18. IBldTraffic 19. Arjun Parsi 20. Hernan Silva

WebAppers will continue giving away some really nice web development tools and resources to our readers. Please feel free to suggest what you would like for the next Giveaway under this post. Thank you.

Search & Share Makes Highlighting Text More Functional

Posted · Category: Capture

Search and Share makes highlighting text a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and present a variety of options accordingly. The criteria for understanding the intention is the character length of the selection, and the interpreted actions are copying, searching and sharing.

Whenever someone selects more than 40 characters from your web page and clicks the “Copy” link, your page title and URL will be included in the footer of the copied text. Your users will also be presented with the option to directly embed the excerpt in a newly composed email within Outlook, Gmail or Yahoo Mail. Sometimes, Search and Share enables your users to get the options of Wikipedia, Amazon or eBay as well.

search-share

Requirements: jQuery Framework
Demo: http://www.latentmotion.com/search-and-share/
License: Creative Commons 3.0 License

Ample SDK – Open Source Javascript GUI Framework

Posted · Category: Framework, GPL License, MIT License

ample-sdk

Ample SDK is a standard-based cross-browser JavaScript GUI Framework for building Rich Internet Applications. It employs XML technologies (such as XUL, SVG or HTML5) for UI layout, CSS for UI style and JavaScript for application logic. It equalizes browsers and brings technologies support to those missing any.

Ample SDK is entirely written in JavaScript and thus it does not require any specific components installed in your browser to operate properly. It doesn’t modify the browser infrastructure but rather fills in the missing functionality.

Ample SDK consists of a Ample Runtime (or Core) and User Interface Markup Language implementations. Ample Runtime implements DOM (Level 3) objects, XML languages, objects facilitating work with XML, XSL-T, and a whole range of UI services. Every UI Markup Language implementation is included separately depending on your needs and specifics of the User Interface you build.

Ample SDK can easily be extended by prototyping existing or new objects. You can also create new components or entire languages that suit best your User Interface specifics.

Ample SDK Runtime is fully functional in all modern web browsers. User Interface languages are still being implemented/tested and some quirks might be observed. Ample SDK is distributed using a dual-licensing approach under MIT and GPL licenses.

Requirements: -
Demo: http://www.amplesdk.com/examples/
License: MIT and GPL License

Over $2,000 Christmas Giveaway: Pingdom Accounts

Posted · Category: Announcement

Merry Christmas! It is time to give some Christmas presents to our readers. Pingdom is very kind to giveaway 20 one-year Pingdom Basic accounts for free to us. Each account allows you to monitor 5 sites/servers, with 20 SMS alerts and Unlimited email & twitter alerts. All of them cost total $2,388 usd ($119.4 each). Just in case you do not know what Pingdom does for you.

If you are a business with an online presence, it is important that your website and other online services are available 24/7, all year round. However, all websites have occasional problems, whether the reason is external or internal, and there is a significant risk that you are unaware of these problems.

With Pingdom, any problem with your website will be discovered the minute it happens. You will be immediately alerted so you can take action before it affects your business. You will also be able to see detailed statistics of your website performance, giving you a historical record of all incidents.

pingdom-account-free

Have a chance of taking this one-year Pingdom Basic account for FREE? All you need to do to participate is:
1. Post a link to this Giveaway – either on your blog, or on Twitter
2. Leave a comment below letting us know where you have posted the link

The competition will be closed in 4 days, and we will draw 20 winners randomly and announce it on 24rd December 2009. Thank you for all of the participants in advance.

Page 1 of 3123»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons