WebAppers

/ best free open source web resources /

Shopify

Maplace.js – A Small jQuery Plugin for Google Maps

Posted · Category: Maps, MIT License

Maplace.js is a small Google Maps Javascript plugin for jQuery that helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map. It requires jQuery and Google Maps API v3 so you need to have both in your page.It supports markers and custom icons, zoom level and custom controls menu. It is released under the MIT license.

jquery-google-map

Requirements: jQuery Framework
Demo: http://maplacejs.com/
License: MIT License

A Responsive Pie Chart Based on Snap SVG Framework

Posted · Category: Charts, MIT License

Pizza Pie Charts is a responsive Pie chart based on the Snap SVG framework from Adobe. It focuses on easy integration via HTML markup and CSS instead of JavaScript objects, although you can pass JavaScript objects to Pizza as well.

You can deliver pie charts to any device with Pizza. Your pie will be steaming hot with SVG so that it looks good on retina devices and HiDPI devices. And the pie will fit the width of your box — um, container — or can be given a max-width or max-height.

pizza-pie-charts

Requirements: Sass Framework
Demo: http://zurb.com/playground/pizza-pie-charts
License: MIT License

Sticks Elements to the Top with Stickup jQuery Plugin

Posted · Category: GPL License, Menu

Stickup is a simple jQuery plugin that “sticks” an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.

Although stickUp was made to work on any kind of website, it was originally designed for the “one-pager” style of websites. By using CSS the sticky navigation menu item will be highlighted as it’s correlating content is crolled in and out of view.

stickup

Requirements: jQuery Framework
Demo: http://lirancohen.github.io/stickUp/
License: GPL License

HubSpot jQuery Messaging Library for 21st Century

Posted · Category: Chat, License Free

HubSpot Messaging Library is Alerts for the 21st century. It show transactional messages in your app. You can easily wrap AJAX requests with progress, success and error messages. You can also add action links to your messages. It works in everything modern, and IE7 and above. It requires jQuery framework.

jquery-alerts

Requirements: jQuery Framework
Demo: http://github.hubspot.com/messenger/
License: License Free

Ember Charts – Charting Library Built with Ember & D3

Posted · Category: Charts, License Free

Ember Charts is a charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to extend and modify. The out-of-the-box behavior these chart components represents their thoughts on best practices in chart interactivity and presentation.

It is highly customizable and extensible. You can add legends, labels, tooltips, and mouseover effects. You can also roll your own charts by extending our ChartComponent class – get labels, automatic resizing, and reasonable defaults for margins, padding, etc.

ember-charts

Requirements: D3.js and Ember.js
Demo: http://addepar.github.io/#/ember-charts/
License: License Free

Simptip – A Simple CSS Tooltip Made with Sass

Posted · Category: MIT License, Tooltips

Simptip is a simple CSS tooltip made with Sass. You can have a tooltip in different directions (top, left, bottom, right). Secondly as you know color is an important factor. You can also have a Tooltip in different color such as success , info , warning and danger. And finally other features like (soft edge, half arrow, movable effect, fade effect, multiline tooltip). You can use these items either together or separately.

simtip

Requirements: Sass Framework
Demo: http://arashm.net/lab/simptip/
License: MIT License

Resumable.js – Resumable Uploads via HTML5 File API

Posted · Category: MIT License, Upload

Resumable.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each file into small chunks. Then, whenever the upload of a chunk fails, uploading is retried until the procedure completes. This allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause, resume and even recover uploads without losing state because only the currently uploading chunks will be aborted, not the entire upload.

Resumable.js does not have any external dependencies other than the HTML5 File API. This is relied on for the ability to chunk files into smaller pieces. Currently, this means that support is limited to Firefox 4+, Chrome 11+ and Safari 6+.

resumable-js

Requirements: -
Demo: http://www.resumablejs.com/
License: MIT License

How to Create Fancy Animations for Thumbnail Grids

Posted · Category: Gallery, License Free

Today Codrops has shared some fancy Animations for Thumbnails in a Grid with us. There are many possibilities when it comes to these kind of effects, but not all of them fit well when applied to multiple items, like a grid of images. There is not much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that we can play with delays, intensifying the viewing pleasure of the whole thing. Not only can we apply the delays in order, but randomly or reversed.

animations-grid

Requirements: CSS
Demo: http://tympanus.net/Development/ThumbnailGridAnimations/
License: License Free

How to Make Buttons with Built-in Progress Meters

Posted · Category: License Free, Upload

Progress bars have become quite popular lately, and there are lots of plugins that can help you add one to your site. But how do you make one yourself? The problem is that there are plenty of implementations already, so Tutorialzine has published a tutorial, teaching us how to code buttons that have built in progress meters.

They will be perfect for displaying progress while submitting forms or loading content via AJAX. They will also use CSS3 styles and transitions to make them easy to customize.

buttons-progress-meters

Requirements: -
Demo: http://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/
License: License Free

How to Build Live NASDAQ Bar Charts without Plugins

Posted · Category: Charts, Information

In this article, we’ll get rolling on developing plug-in free by creating bar graphs and similar graphics, using NASDAQ’s current web site as an example. But we won’t be creating merely a picture of a bar graph, but a real, interactive bar graph. Let’s take a look at an existing site that uses Flash, then build one using HTML5.

If you have Flash installed, you’ll see a fancy line chart. You can float your mouse over the line and see a small popup showing the stock price at that point, along with the volume of trading, like so:

If you don’t have Flash installed, then the site just shows you a graphic image. So you’re not left out completely without Flash, but with HTML5, we can include everybody.

Now, we’ll build something similar. To keep this article from getting too long, let’s just show the data in a box below the graph. But as you move the mouse along the graph, or touch it on a tablet, it will highlight the closest point on the graph, and show the information for that point in a box. Here’s what the final product will look like: Read the rest of this entry »

Page 7 of 66«34567891011»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons