Open Source Resources for Web Application Developers

Video conferencing typically requiring cumbersome downloads, logins, and endless contact lists, it too often becomes a service that is slow and unreliable.

Tinychat delivers dead simple video conferences without the extraneous ad-ons and inconvenience, making video conferencing an accessible, uncomplicated experience. You can have up to twelve people in a room with HQ video, protected by passwords and moderators, share your desktop with them, and your conferences can be recorded and embedded on your website.

Tinychat is the ultimate meeting solution for those who want to meet without stress and hassle. The Developer API is available and able to return information in both JSON and XML about a specific room as well.

Requirements: Firefox, IE, Safari, and Chrome
Demo: http://tinychat.com/
License: License Free

• 2 Comments

Would you like to Create a Realistic Hover Effect With jQuery? It adds a rising hover effect to a set of icon links using jQuery’s animate effect. In a nutshell, the JS appends the reflection/shadow to each <li>, then animates the position and opacity of these elements and the icon links on hover. And .stop() eliminates any queue buildup from quickly mousing back and forth over the navigation.

Requirements: jQuery Framework
Demo: http://adrianpelletier.com/sandbox/jquery_hover_nav/
License: License Free

• 7 Comments

Would you like to create a Simple Navigation with a Horizontal Subnav? It looks very similar to the Menu of Behance Network, which looks nice and professional.

We can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds. Nice and simple! I am sure this will come in handy in your future projects.

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

• 3 Comments

We have seen lots of Javascript Lightbox plugins. It is good to see someone who has created a valid markup Lightbox purely with XHTML and CSS for us.

ThinkVitamin has published a detailed tutorial of How to Create a Valid Non-Javascript Lightbox. Please note that this article assumes you have a basic understanding of (X)HTML and CSS.

Requirements: FF, Safari, Chrome, IE6, IE7 and IE8
Demo: http://www.growldesign.co.uk/projects/lb/
License: License Free

• 6 Comments

jQuery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible. It is a simple 2-click in place editing time picker and regular time picker.

It is unobtrusive and degrade gracefully. It has intuitive keyboard navigation support as well. jQuery.timepickr has just released Version 0.7 with the support of jQuery UI theme switcher. You can play around it with different themes offered.

Requirements: jQuery Framework
Demo: http://haineault.com/media/jquery/ui-timepickr/page/
License: MIT License

• 1 Comment

AnythingSlider is an attempt at bringing together the functionality of “featured content” slider, “start/stop slider“, “moving boxes“ and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is a plugin, which makes implementing it and customizing it much easier.

It supports Auto-playing (start playing or stopped). Pauses autoPlay on hover is optional. Each slide has a hashtag (can link directly to specific slides). Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide).

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

• 1 Comment

Nettus has published a tutorial of “How to Create A Simple Web-based Chat Application“. In the tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website.

The chat application includes a login and logout system, AJAX-style features, and will also offer support for multiple users. Also, you can work off this and build a multiple chat rooms, add an administrative backend, add emoticons, etc…

Requirements: jQuery Framework
Demo: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-simple…
License: License Free

• 5 Comments

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Calendar events can be supplied as an array, url or function returning json. They can be dragged, dropped and resized. Lots of callbacks for customizing the way events are rendered plus callbacks for drag, drop, resize, mouseover, click etc. The jquery-week-calendar plugin is also highly configurable, enabling variable timeslots, readonly calendars, display of partial days, custom date formatting, direct manipulation of individual events for create, update, delete of events and much more.

Requirements: jQuery Framework
Demo: http://jquery-week-calendar.googlecode.com…
License: MIT License

• 17 Comments

One of the least used properties in CSS is the Clip property. Clip is part of the visual effects module of CSS 2.1 and its job is to place a visible window on top of an object that is being clipped.

It is useful for clipping images and creating thumbnails without having to create additional files. Creating Thumbnails Using the CSS Clip Property can be used to create square thumbnails, or to create other varieties of thumbnails without actually duplicating files on the server.

You can also add some drop shadow to the clipped thumbnail by using three wrapper divs with negative offsets of slightly varying background colors to create a shade effect.

Requirements: -
Demo: http://www.seifi.org/css/creating-thumbnails…
License: License Free

• 4 Comments

Bumpbox is another lightbox clone with a few advantages over other lightboxes – it supports not only all common media types but also PDF’s.

Yet, the integration and implementation on your own site is pretty simple. Just add the scripts to your head section, add classes to your links that should use bumpbox, define a rel tag with the size that the bumpbox should have and you’re ready to roll.

Bumpbox automatically detects what kind of filetype you wish to show in the box, so you do not need to specify the type, easing the process of integration.

Requirements: Mootools Framework 1.2
Demo: http://www.artviper.net/bumpbox.php
License: License Free

• 14 Comments