WebAppers

/ best free open source web resources /

Shopify

Sleek Event Timeline with PHP, MySQL, CSS & jQuery

Posted · Category: Calendar, License Free

Tutorialzine has just showed us how to make an Advanced Event Timeline with the help of PHP, MySQL, CSS & jQuery, that will display a pretty time line with clickable events. Adding new events is as easy as inserting a row in the database.

The main idea is that we have two divs – timelineLimiter and timelineScroll positioned inside it. The former takes the width of the screen, and the latter is expanded to fit all the event sections that are inserted inside it. This way only a part of the larger inner div is visible and the rest can be scrolled to the left and right by a jQuery slider.

Now you can create a sleek event timeline that you can modify to showcase the important events that mark your days. It is easily modifiable and you are free to use it in your or your clients’ projects.

event-timeline

Requirements: PHP, CSS and jQuery Framework
Demo: http://demo.tutorialzine.com/2010/01/advanced-event-timeline…
License: License Free

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

Produce Interactive Charts of Time Series with dygraphs

Posted · Category: Charts, License Free

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them. You can mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.

Another significant feature of the dygraphs library is the ability to display error bars around data series. dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client’s browser.

dygraphs-javascript

Requirements: JavaScript Enabled
Demo: http://www.danvk.org/dygraphs/
License: License Free

Editing and Testing Regular Expressions with RegExr

Posted · Category: Code, License Free

RegExr is an online tool for editing and testing Regular Expressions (RegExp / RegEx). It provides a simple interface to enter RegEx expressions, and visualize matches in real-time editable source text. It also provides a handy RegExp snippet sidebar with descriptions and usage examples to make it easier to learn Regular Expressions through trial and error.

RegExr is built with Flex 3, and uses ActionScript 3′s built in RegExp engine. It isn’t as powerful as a product like RegExBuddy, but it has the advantage of being online and free. You are able to save your patterns locally, and to share patterns on a searchable community database of regular expressions as well.

regular-expressions tool

Requirements: Flex 3, ActionScript 3
Demo: http://gskinner.com/RegExr/
License: License Free

CodeRun Studio – Free & Cross-Platform Online IDE

Posted · Category: Code, License Free

CodeRun Studio is a free, cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser. CodeRun Studio can be used instead or alongside your existing desktop IDE. You can upload existing code in order to test it in the cloud or for sharing with your peers.

CodeRun features native support for C#/.NET (3.5), PHP (5.1), JavaScript, HTML and CSS. C# support includes ASP.NET, WCF, Silverlight and WPF browser application development and deployment. Database support includes SQL Server 2005 and Amazon SimpleDB. This means you do not have to learn anything new in order to begin working with CodeRun. Simply upload you existing code, or start from one of the built-in templates.

code-run

Requirements: -
Demo: http://www.coderun.com/ide/
License: License Free

Customize the Look of Your Twitter Profile with Themeleon

Posted · Category: License Free, Tools

ColourLovers has released a lovely web application called Themeleon, for your Twitter profile. You can use themeleon to customize the way Twitter looks for you and how your profile looks to others. Use any of the more than 600k seamless background patterns and 1 million color palettes on COLOURlovers or customize any of the colors or patterns to get just the right design for you.

Simply login to Twitter, choose your background (pattern or photo) and your colours. You can preview your changes instantly. Drag and drop colors to arrange the order they’re in your pattern or profile settings. Save your settings and share your work!

twitter-background

Requirements: -
Demo: http://colourlovers.com/themeleon/twitter
License: License Free

Fixed Position Table Header jQuery Plugin

Posted · Category: License Free, Tables

Wouldn’t it be great if there was an easy way to make massive HTML tables with scrollable content and headers that stayed put? Why would you want this? Say you have a table with many rows and columns. Typically what happens when you scroll to the bottom of the table is you’ve forgotten the context of the cell you’re viewing because the table header has scrolled out of view.

Chromaloop did come across a solution that achieves the desired effect by creating two tables and stacking them on top of each other, one for the thead and the other for the tbody. Regardless of the extra markup required, this approach seemed to work the most reliably across all browsers.

So Chromaloop worked out a way to do it that would rely on Jquery to do most of the heavy lifting for the extra HTML markup and generating the correct cell dimensions so that the thead would line up properly with the tbody with dynamic content. The rest would rely on some light CSS markup to define the table dimensions and positioning.

And then, he has taken this a step further by creating Chromatable jQuery Plugin to keep the code contained in one location and allow users to call the “chromatable()” method on any table, or many tables on the same page.

fixed-header-table

Requirements: jQuery Framework
Demo: http://www.chromaloop.com/posts/chromatable-jquery-plugin
License: License Free

Easy to Use Safari Style jQuery Slider Plugin

Posted · Category: Forms, License Free

jQuery Slider plugin (Safari style) is easy to use and multifunctional jQuery plugin. It makes selected elements into sliders. The handle can be moved with the mouse easily. There are various options such as step of pointer, heterogeneity, dimension, limits and scale.

If you do not fancy the Safari style, you can also define your own new skin for the sliders as well. (Do not forget to set absolute or true relative path for png in jslider.ie6.css and jslider.ie6.[skin].css)

jquery-slider

Requirements: jQuery Framework
Demo: http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/
License: License Free

HotGloo – Intuitive Online WireFrame Application

Posted · Category: License Free, Tools

HotGloo is an Online Wireframe Application. With the help of the elements you can create a whole world out of wireframes. Just drag and drop, scale, link, name and rename them – it’s super easy and intuitive.

You can manage your projects: edit, comment & share any moment of the developing process with colleagues and clients. You can also add editors & reviewers to your projects within just a view steps and as you like. HotGloo is free for the beta testing phase. However they are thinking about a reasonable monthly pricing model for after the beta testing stage.

wireframe

Requirements: -
Demo: http://hello.hotgloo.com/
License: License Free

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

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons