Open Source Resources for Web Application Developers

MegaZine 3 is an open source pageflip/flashbook engine, written completely in AS3. It generates an interactive book, which can then be flipped through by the user. MegaZine 3 uses a completely dynamic approach, allowing full configuration through an external XML file. This makes it easy to set up books even if you do not even own the Flash IDE.

MegaZine 3 automatically generates a control bar that allows jumping to every individual page. It also generates thumbnails for the pages, to make it easier for the user to find a page again, or getting a first impression.

Requirements: Flash Required
Demo: http://megazine.mightypirates.de/demo/index.html
License: LGPL License

• 2 Comments

While mimicking the OS X dock and stacks isn’t new, it’s certainly not common. Nettuts has shown us a few ways to do “Outside the Box” Navigation with OS X style docks and stacks navigation.

jQuery OS X Stack and Drop Stack is my favorite navigation style out of the three shown in the tutorial. It’s super lightweight (~1kb). It might be a little awkward having the navigation in the bottom right or left of the browser window but it would certainly be creative and save lots of space.

Requirements: jQuery Framework
Demo: http://nettuts.s3.amazonaws.com/358_jquery…
License: License Free

• 3 Comments

Many websites offer syndication formats such as RSS, JSON, or XML based services to allow for easy content delivery. But what happens when a website doesn’t offer one of these services? How do you syndicate content from a website that doesn’t offer a news feed?

Nettus has gaven us a a simple solution using JQuery’s AJAX functions and PHP’s cURL library that allows us to syndicate external content. This is a simple solution if you require content from an external website.

Although JQuery’s easy syntax and CSS-selectors give us the convenience of styling and selecting what we want from the client-side, this is not speed optimized. Remember you have no control over whether or not the content creator changes what tags and classes they use, it is always best to style general elements that will be commonly used.

Requirements: jQuery Framework
Demo: http://net.tutsplus.com/tutorials/php/how-to-syndicate-content…
License: License Free

• 0 Comments

jQueryforDesigners has added a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. They have published a tutorial which walk through the fundamentals of scrolling carousel, and how they have created jQuery Infinite Carousel.

The trick is building the DOM with the cloned nodes, because we’ve cloned the start of the list to the end of the list, when we scroll off the last items, it looks like we’ve looped back round. Once the animation completes, we change the scrollLeft position back to the real first items.

This scrollLeft isn’t visible to the user since the overflow is hidden, and so it creates the effect of being infinitely sliding from left or right.

Requirements: jQuery Framework
Demo: http://jqueryfordesigners.com/demo/infinite-carousel.html
License: License Free

• 3 Comments

PhotoDiary is a web application which lets you to easily publish a brand new photo blog on the web. The application frontend is built upon Flash technology and data is managed through a dedicated web control panel, developed in PHP.

The interesting thing about PhotoDiary is that users who are viewing your PhotoDiary are able to add comments by putting yellow sticky notes on the photos.

To run PhotoDiary on your own web server, support for MySQL, PHP and GD Library technologies is required. This software is published according to a GNU GPL3.

Requirements: Flash,MySQL, PHP and GD Library
Demo: http://photodiary.webgriffe.com/demo/
License: GPL v3 License

• 2 Comments

UNIQLO has just released a Calendar Blog Parts, which displays a beatiful Flash calendar with the weather forcast. You can select the country appears on the calendar. You can also set the Background Music On/Off. There are Small and Large size available at the moment.

UNIQLO Calendar Blog Parts has been tested on Internet Explorer 6+, Firefox 1.5+ and Safari 1.3.2+. You can easily integrate the calendar on your blog, Myspace, Facebook, iGoogle and etc… Simply paste the generated code on your site, you will get a pretty calendar as follow.

Requirements: Flash Required
Demo: http://www.uniqlo.com/calendar/
License: License Free

• 0 Comments

Janko shows you how to implement Advanced Docking using jQuery. He taught us how to create multiple docking and undocking functionality with jQuery and unordered lists.

When user hovers an item on vertical menu, its submenu will slide in from left to right and overlay the content. When user move the mouse pointer outside the panel, it will slide back. If user clicks on “Dock” link, panel will fix in the current position while content moves to the right of the panel in order to be seen. Lastly, if users “undock” the panel, it will slide back.

But that is not all. Multiple panes are able to dock in the same time. If one panel only is docked it should be 100% height. With each new panel docked, height will be recalculated so that all panels have the same height value. If there are docked panels and user wants to slide in another panel temporarily, it will overlay docked panels.

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

• 3 Comments

The Dock is a set of iconic images that expand when rolled over with the cursor, and usually perform some action when clicked. jqDock is a jQuery plugin that mimics that behaviour by transforming a contiguous set of HTML images into an expanding Dock, vertical or horizontal, with or without labels.

Basically, jqDock expands a reduced size image towards its full size when the cursor is on or near it. You can specify a vertical or horizontal orientation for the Dock, and select the direction in which the image should expand and whether to show labels or not. The styling and positioning of the Dock is (almost) entirely down to you.

You should also check out other Fish Eye Menus we mentioned earlier.

Requirements: jQuery Framework
Demo: http://www.wizzud.com/jqDock/
License: MIT, GPL License

• 8 Comments

MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific functionality with just a few simple parameters. David has shown us 4 examples of using ScrollSpy.

Example 1: “Top the Top”
When you scroll down a defined number of pixels, you get a “Scroll to Top” link in the lower right hand part of the screen. When you’re back at the top, ScrollSpy is directed to hide the link.

Example 2: “The Show”
When you click the link, the window scrolls to the right. During the scrolling process, ScrollSpy shows and hides content blocks based on where in the scrolling process the window is.

Example 3: “Team Colors”
This displays a different background color depending on where you are in the page.

Example 4: “Position Pointer”
This displays imagery in different positions on the page based upon where the user scrolls.

Requirements: MooTools Framework
Demo 1: http://davidwalsh.name/dw-content/scroll-spy.php?
Demo 2: http://davidwalsh.name/dw-content/scroll-spy.php?page=1
Demo 3: http://davidwalsh.name/dw-content/scroll-spy.php?page=2
Demo 4: http://davidwalsh.name/dw-content/scroll-spy.php?page=3
License: License Free

• 4 Comments

dhtmlxScheduler is a web-based event calendar which provides simple in-browser scheduling solution. With smooth Ajax-enabled interface dhtmlxScheduler allows users to add, modify or delete events without refreshing the web page.

Intuitive drag-n-drop behavior gives the possibility to change events date and start/end time by simply dragging the event boxes. The calendar events can be displayed in Day/Week/Month views.

dhtmlxScheduler is very lightweight (about 19KB gzipped), cross-browser and highly customizable. Each aspect of the calendar interface can be configured through JavaScript API. Developers can easily add/update events, change date format, time scale or calendar language.

Although dhtmlxScheduler is a pure JavaScript solution, it can be easily connected to the backend database with the help of dhtmlxConnector, a PHP extension that enables data communication between client-side interface and server-side datasource.

You can also use your own server-side code written in any language (PHP, Java, ASP, etc.) to bind scheduler content to the database. dhtmlxScheduler is distributed under GNU GPL and commercial licenses.

Requirements: -
Demo: http://dhtmlx.com/docs/products/dhtmlxScheduler…
License: GPL and Commercial Licenses

• 4 Comments