We’ve all seen the basic file upload form for uploading avatars, images, memes, etc. The problem with these is that once you upload your image it’s hidden from you.
The solution is to use a little bit of JavaScript to upload the image as soon as it’s selected and display a thumbnail so we can easily review the form before we submit it. Head on over to the ZURB – Image Uploads with 100% Less Suck to see a complete demo and breakdown of the JavaScript they use to accomplish this.
Requirements: jQuery Framework
Demo: http://www.zurb.com/playground/ajax_upload
License: MIT License
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.
Requirements: PHP, MySQL, jQuery Framework
Demo: http://demo.tutorialzine.com/2010/03/who-is-online-widget…
License: License Free
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.
Requirements: jQuery Framework
Demo: http://aext.net/jquery-menu-plugin-bubbleup/
License: License Free
Building with progressive enhancement is essential to ensuring a usable experience for all. But how do you determine which browsers should receive the enhanced experience and which should stick with the basic experience?
Introducing EnhanceJS, a JavaScript framework designed specifically to deliver a usable experience to the widest possible audience, by testing the browser to determine whether it is capable of correctly supporting a range of essential CSS and JavaScript properties, and delivering features only to those that pass the test.
Filament Group is releasing EnhanceJS as an open source (MIT license) project to allow everyone to start building sites with test-driven progressive enhancement. They explained how to use EnhanceJS in your own projects so you can take advantage of new CSS and JavaScript features while ensuring a usable experience to all.
Requirements: jQuery Framework
Demo: http://www.filamentgroup.com/lab/introducing_enhancejs…
License: MIT License
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.
Requirements: –
Demo: http://www.webdesignerwall.com/demo/css3-dropdown-menu/
License: License Free
Traffic Light Feedback is a web application that helps gathering customer feedback quickly and efficiently. It sends out a positive message about your company – showing how proactive you are and that you care about meeting your customers’ needs.
You get back immediate information about your customers’ current requirements – so you can prioritise and respond promptly, seizing opportunities to win additional business and acting to address any concerns, helping to cement the customer relationship.
What’s more, Traffic Light Feedback retains the details of all customer feedback over time, so you have the complete history of all your customers’ feedback at your fingertips.
With £15.00/month, you can send an unlimited number of feedback requests and feedback templates. TLF is very kind to giveaway 3 x 12 Month subscriptions of Traffic Light Feedback to our readers. All of them cost total £540 usd (£180 each). Simply leave a comment and tell us what you think about TLF under this post. We will randomly select 3 lucky people and announce the winners on 13th March. What are you waiting for?
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.
Requirements: jQuery Framework
Demo: http://www.digitalinferno.net/demos/tt-1-0/index.html
License: License Free
Few days ago, we have mentioned Qhub, which is a simple way to create a Q&A website. However, hosted version is only available to us only. How about a Q&A system that is open source and also let us install on our own server? Our readers have pointed out the following Open Source Q&A Systems.
OSQA is an Open Source Q&A System written using Django. Users can ask and answer questions, comment and vote for the questions of others and their answers. Both questions and answers can be revised and improved. Questions can be tagged with the relevant keywords to simplify future access and organize the accumulated material. OSQA can be downloaded from the project’s GitHub repository at http://github.com/rickross/osqa. It is under GNU General Public License.
Shapado is another Stack Overflow-like app written in Ruby on Rails, mongomapper and mongodb. It is available under the GNU Affero General Public License. Shapado can be downloaded from Gitorious at http://gitorious.org/shapado.
Requirements: Django or Ruby on Rails Framework
OSQA: http://osqa.net/
Shapado: http://shapado.com/
License: GPL License
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.
Requirements: –
Demo: http://www.webiconset.com/mobile-icon-set/
License: 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.
Requirements: Browsers support CSS transform property
Demo: http://joncom.be/code/css-clocks/
License: License Free
