WebAppers

/ best free open source web resources /

Shopify

How to Create a “Who is Online” Widget

Posted · Category: License Free, Stats

TutorialZine has written a tutorial and shown us how to create a “Who is online” widget with PHP, MySQL and jQuery. It will display the number of visitors, currently viewing your site, and it will even be able to detect the country your visitors are from and display it in a slide out panel.

Having access to real time data on your site userbase is a dream to any webmaster. Tools like Google Analytics give a great perspective on your site’s reach, but lack the real time feel a simple widget like this can provide.

who-is-online

Requirements: PHP, MySQL, jQuery Framework
Demo: http://demo.tutorialzine.com/2010/03/who-is-online-widget…
License: License Free

BubbleUP jQuery Plugin for Your Menus

Posted · Category: License Free, Menu

BubbleUP jQuery Plugin is a fun and easy plugin to get you started in jQuery. The effect is a nice starting point for learning the basics and many of the steps involved in creating other more intricate plugins you will make in the future.

With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. It has been tested on IE 7, Opera 10, Firefox 3.5, Safari 4, and Chrome 5 Beta.

jquery-bubble

Requirements: jQuery Framework
Demo: http://aext.net/jquery-menu-plugin-bubbleup/
License: License Free

Mac-like Multi-level Dropdown Menu with CSS3

Posted · Category: License Free, Menu

WebDesignerWall has shared the way he made the Mac-like multi-level dropdown menu using border-radius, box-shadow, and text-shadow. It is called CSS3 Dropdown Menu, which renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

There is one gradient image is used. A white-transparent image is used to achieve the gradient effect. Because the new CSS3 gradient feature is not supported by all browsers yet, it is safer to use a gradient background image.

css3-dropdown-menu

Requirements: -
Demo: http://www.webdesignerwall.com/demo/css3-dropdown-menu/
License: License Free

TinyTips – Lightweight jQuery Plugin for Tooltips

Posted · Category: License Free, Tooltips

TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly. TinyTips is very easy to install and use. Simply include TinyTips and the latest release of jQuery in the <head>.  You can also give it a nice style by editing the stylesheet.

tiny-tooltips

Requirements: jQuery Framework
Demo: http://www.digitalinferno.net/demos/tt-1-0/index.html
License: License Free

Free Mobile Icon Set for Personal & Commercial Use

Posted · Category: Icons, License Free

Web Icon Set has released a set of Free Mobile Icon Set recently. Mobile Icon Set includes Phone Call, Photos, Messages, Calculator, Wireless, Calendar, Settings, Contacts, Notes, Map. You are welcome to use them on both your Personal and Commercial Projects. The sizes of the icons include 128, 64, 48, 32px. You can use these icons on your mobile applications or mobiles.

mobile-icon-set

Requirements: -
Demo: http://www.webiconset.com/mobile-icon-set/
License: License Free

Pure HTML Clocks using Javascript & CSS Rotation

Posted · Category: Calendar, License Free

The two Clocks are pure HTML using JavaScript and CSS rotation. There are no Adobe Flash files or <canvas> going on, just regular <div> and <img> tags. The way it works is by taking those images in an { overflow: hidden } <div> and rotating them, via JavaScript, using the proposed CSS transform property.

However, this isn’t going to work in any currently available version of Internet Explorer or many older browsers. It only works in Google Chrome, Safari and Firefox 3.5+ browsers support the CSS transform property.

css-clock

Requirements: Browsers support CSS transform property
Demo: http://joncom.be/code/css-clocks/
License: License Free

Chat Room v2 with PHP, jQuery, and a Text File

Posted · Category: Chat, License Free

This is Chat2, which is an update to original Chat Room published on CSS-Tricks. In some ways, the technology is the same. We employ PHP to talk to the server, jQuery to keep the chat rolling, and the chats themselves will be stored in .txt files just like the first version.

There are some new features in Chat2. Usernames are now unique to users currently chatting. You can see a “currently chatting” user list. And there are multiple rooms for chatting available now.

chat2

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

Automatic Image Rotator with CSS and jQuery

Posted · Category: Gallery, License Free

With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, SohTanaka believes it is wise to build simple widgets like the image slider using HTML / CSS / Javascript, and leave more interactive applications for flash if needed.

Therefore, SohTanaka has built an Automatic Image Slider with CSS and jQuery. This html based image slider will have its benefits with SEO and will also degrade gracefully for those without Javascript enabled.

image-rotator

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

jQuery Magic Line Sliding Style Navigation

Posted · Category: License Free, Menu

jQuery Magic Line Navigation allows us to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities.

As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

dynamic-menu

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

Flickr-Style Photo Tagging Using jQuery

Posted · Category: License Free, Tooltips

A few days ago, Ben Nadel programmed a little proof-of-concept for Flickr-style photo tagging using jQuery. He did it as an exploration in mouse-based event binding. He took a step further and packaged the jQuery code up into a jQuery plugin (phototagger.jquery.js), build a light-weight ColdFusion persistence layer (drop-and-run, no database required), and turned it into an official project: jQuery Photo Tagger.

jQuery Photo Tagger comes in at about 1,000 lines of code. As such, you can either check out the project page or try the online demo for yourself. Please note that you have to hold CTRL key when clicking mouse to create hotspot.

photo-tagger

Requirements: jQuery Framework
Demo: http://www.bennadel.com/resources/projects/jquery_photo_tagger…
License: License Free

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

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons