Archive for August 2012

Mindblowing freebies from Premium Pixels

►
Today I've collected multiple freebies from the fantastic webdesign page Premium Pixels. To download these fantastic freebies you need to sign up, don't you worry, it's free! Please check out this collection and if you like it, don't be afraid to leave a comment.

Blueish Cloud Growl Style

This freebie, a transparent Growl notification style, is a fantastic contribution from Swedish designer Victor Erixon. A refreshingly different style to others available methinks.

Shopping Cart Icons (PSD/PNG)

This freebies is a set of five 32px shopping cart icons I put together for practice. The download includes the PSD complete with raw vector shapes and some readymade pngs. Enjoy!
This freebie is an uber handsome set of 41 social networking icons in both 16px and 32px by Prekesh Chavda. Admit it, you love social media icons, especially when they’re this pretty.

Facebook & Twitter Sign-in Buttons (PSD)

This quick freebie is a set of social sign-in buttons for Facebook and Twitter. I put these together for an upcoming project and thought you might find them useful :)

Apple 27in LED Cinema Display (PSD)

This freebie, an Apple 27in LED Cinema Display, is a brilliant contribution from UI designer Koy Carraway. The fully layered PSD could make a sweet surround for showing off some work.

Safari Browser Chrome (PSD)

This freebie is a simple browser chrome based on Safari. Browser chromes have always been a popular way to display work and screenshots – now you have another in your arsenal.

Glowing Volume Knob & Switch (PSD)

This freebie is a super little set of glowing elements and super contribution from the Beardiest guy in design – the one and only Mr Luke Beard. Enjoy!

Fully Layered Macbook Air (PSD)

This freebie, a Macbook Air PSD, is a fantastic contribution from Swedish designer Jonathan Olsen. The Macbook is fully layered and makes a great surround for showing off work.
We ended last year with a contribution from Fabio Basile so why not start the new year with one? 15 super-awesome credit/debit card icons just for little old you.
This freebie is nifty little design for an analytics widget put together by Farzad Ban. He’s even kindly put together a matching icon too – you owe him one!
This freebie is a guest submission by Sebastien Gabriel and is, quite frankly, absolutely fantastic. If you’re into app/UI design, you’ll want to take a look at this!
This freebie, a set of iPhone chat bubbles, is a sweet contribution from fellow UK based web designer Nicholas Craig. Goes without saying that they’re pretty awesome.
This freebie, a fully scalable Apple Macbook Air PSD, is a fantastic contribution from UI designer Koy Carraway. This thing is just brilliant, a super useful item to have in your toolbox.
Liked this post? Don't be afraid to leave a comment!
Friday 31 August 2012
Posted by Magnus
0 Comments
Tag : , , , ,

Tutorial: Video Player with jQuery, HTML5 & CSS3

►

In this tutorial we will code an Video Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

Step 1 – Downloading MediaElement.js

First we need to download the “MediaElement.js” script and extract it. Then from the “build” folder we need three files:
  • flashmediaelement.swf
  • mediaelement-and-player.min.js
  • silverlightmediaelement.xap
Then copy all these three files to the same directory, I will copy for my “js” folder.

Step 2 – HTML Markup

Now, we need to link to the jQuery Library, we can host it locally or use the one hosted by Google. Then we need to link to “mediaelement-and-player.min.js” script file and the CSS file. All this three files need to be inside of the
  1. <head>  
  2.     <title>Video Player</title>  
  3.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  4.     <script src="js/mediaelement-and-player.min.js"></script>  
  5.     <link rel="stylesheet" href="css/style.css" media="screen">  
  6. </head>  
To create the video player we only need to add the new HTML5 video tag. Then we will add some attributes to the video tag: the width and height of the video and the poster. The poster is the image that you can add to be shown on top of the video until the user press the play button.
  1. <video width="640" height="267" poster="media/cars.png">    
  2.     <source src="media/cars.mp4" type="video/mp4">    
  3. </video>    
Now we just need to add the following code to load the video controls and to set some settings. The settings that we will add are:
  • - alwaysShowControls – true to always show the video controls and false to hide on mouse out.
  • - videoVolume – to make the volume slider be horizontal.
  • - features: ['playpause','progress','volume','fullscreen'] – here we’ll set what controls we want to add on the video.
For more settings take a look at “MediaElement.js” Documentation.
  1. <script type="text/javascript">// <![CDATA[  
  2. $(document).ready(function() {  
  3.     $('video').mediaelementplayer({  
  4.         alwaysShowControls: true,  
  5.         videoVolume: 'horizontal',  
  6.         features: ['playpause','progress','volume','fullscreen']  
  7.     });  
  8. });  
  9. // ]]></script>  

Step 3 – Video Basic Styles

Let’s start by adding some reset styles to the elements that we will use.
  1. .mejs-inner,  
  2. .mejs-inner div,  
  3. .mejs-inner a,  
  4. .mejs-inner span,  
  5. .mejs-inner button,  
  6. .mejs-inner img {  
  7.     margin: 0;  
  8.     padding: 0;  
  9.     border: none;  
  10.     outline: none;  
  11. }  
Then we’ll add the general styles to the video container. All the CSS properties that we are using in this step are needed to create the video container layout. This will not create any styles to the video; it will only position all the video elements in the right place.
  1. .mejs-container {  
  2.     position: relative;  
  3.     background: #000000;  
  4. }  
  5.    
  6. .mejs-inner {  
  7.     position: relative;  
  8.     width: inherit;  
  9.     height: inherit;  
  10. }  
  11.    
  12. .me-plugin { position: absolute; }  
  13.    
  14. .mejs-container-fullscreen .mejs-mediaelement,  
  15. .mejs-container-fullscreen video,  
  16. .mejs-embed,  
  17. .mejs-embed body,  
  18. .mejs-mediaelement {  
  19.     width: 100%;  
  20.     height: 100%;  
  21. }  
  22.    
  23. .mejs-embed,  
  24. .mejs-embed body {  
  25.     margin: 0;  
  26.     padding: 0;  
  27.     overflow: hidden;  
  28. }  
  29.    
  30. .mejs-container-fullscreen {  
  31.     position: fixed;  
  32.     leftleft: 0;  
  33.     top: 0;  
  34.     rightright: 0;  
  35.     bottombottom: 0;  
  36.     overflow: hidden;  
  37.     z-index: 1000;  
  38. }  
  39.    
  40. .mejs-background,  
  41. .mejs-mediaelement,  
  42. .mejs-poster,  
  43. .mejs-overlay {  
  44.     position: absolute;  
  45.     top: 0;  
  46.     leftleft: 0;  
  47. }  
  48.    
  49. .mejs-poster img { display: block; }  

Step 4 – Controls Container

We will start to add a big play button to the center of the video container.

  1. .mejs-overlay-play { cursor: pointer; }  
  2.    
  3. .mejs-inner .mejs-overlay-button {  
  4.     position: absolute;  
  5.     top: 50%;  
  6.     leftleft: 50%;  
  7.     width: 50px;  
  8.     height: 50px;  
  9.     margin: -25px 0 0 -25px;  
  10.     background: url(../img/play.png) no-repeat;  
  11. }  
Then we will style and position the video controls container. We’ll position it at the bottom, give it a 34px height and add a background color. We’ll use RGBA to make the background transparent, but RGBA is not supported in older browsers so we’ll also give a fallback using RGB. Then we will add some buttons general styles and add the sprites images. If you don’t know what CSS sprites are or how to work with theme take a look at this article.
  1. .mejs-container .mejs-controls {  
  2.     position: absolute;  
  3.     width: 100%;  
  4.     height: 34px;  
  5.     leftleft: 0;  
  6.     bottombottom: 0;  
  7.     background: rgb(0,0,0);  
  8.     background: rgba(0,0,0, .7);  
  9. }  
  10.    
  11. .mejs-controls .mejs-button button {  
  12.     display: block;  
  13.     cursor: pointer;  
  14.     width: 16px;  
  15.     height: 16px;  
  16.     background: transparent url(../img/controls.png);  
  17. }  

Step 5 – Video Control Buttons

In this step we will position the buttons in the right place. So basically what we will do here is: position each button on the controls container, set the width and height of each button and position the background image in order to display the right button.
  1. .mejs-controls div.mejs-playpause-button {  
  2.     position: absolute;  
  3.     top: 12px;  
  4.     leftleft: 15px;  
  5. }  
  6.    
  7. .mejs-controls .mejs-play button,  
  8. .mejs-controls .mejs-pause button {  
  9.     width: 12px;  
  10.     height: 12px;  
  11.     background-position: 0 0;  
  12. }  
  13.    
  14. .mejs-controls .mejs-pause button { background-position: 0 -12px; }  
  15.    
  16. .mejs-controls div.mejs-volume-button {  
  17.     position: absolute;  
  18.     top: 12px;  
  19.     leftleft: 45px;  
  20. }  
  21.    
  22. .mejs-controls .mejs-mute button,  
  23. .mejs-controls .mejs-unmute button {  
  24.     width: 14px;  
  25.     height: 12px;  
  26.     background-position: -12px 0;  
  27. }  
  28.    
  29. .mejs-controls .mejs-unmute button { background-position: -12px -12px; }  
  30.    
  31. .mejs-controls div.mejs-fullscreen-button {  
  32.     position: absolute;  
  33.     top: 7px;  
  34.     rightright: 7px;  
  35. }  
  36.    
  37. .mejs-controls .mejs-fullscreen-button button,  
  38. .mejs-controls .mejs-unfullscreen button {  
  39.     width: 27px;  
  40.     height: 22px;  
  41.     background-position: -26px 0;  
  42. }  
  43.    
  44. .mejs-controls .mejs-unfullscreen button {   
  45. background-position: -26px -22px; }  

Step 6 – Volume Slider

To style the volume slider we’ll position it, then add the width and height values, and rounded corners.
  1. .mejs-controls div.mejs-horizontal-volume-slider {  
  2.     position: absolute;  
  3.     cursor: pointer;  
  4.     top: 15px;  
  5.     leftleft: 65px;  
  6. }  
  7.    
  8. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {  
  9.     width: 60px;  
  10.     background: #d6d6d6;  
  11. }  
  12.    
  13. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  
  14.     position: absolute;  
  15.     width: 0;  
  16.     top: 0;  
  17.     leftleft: 0;  
  18. }  
  19.    
  20. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,  
  21. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  
  22.     height: 4px;  
  23.    
  24.     -webkit-border-radius: 2px;  
  25.     -moz-border-radius: 2px;  
  26.     border-radius: 2px;  
  27. }  

Step 7 – Progress Bar

The progress bar stylings are basic. We need to position it on the top of the controls container, add some background colors for each state (all and loaded time). For the current time we will set the width to 0 and it will be automatically updated when the movie is playing.
  1. .mejs-controls div.mejs-time-rail {  
  2.     position: absolute;  
  3.     width: 100%;  
  4.     leftleft: 0;  
  5.     top: -10px;  
  6. }  
  7.    
  8. .mejs-controls .mejs-time-rail span {  
  9.     position: absolute;  
  10.     display: block;  
  11.     cursor: pointer;  
  12.     width: 100%;  
  13.     height: 10px;  
  14.     top: 0;  
  15.     leftleft: 0;  
  16. }  
  17.    
  18. .mejs-controls .mejs-time-rail .mejs-time-total {  
  19.     background: rgb(152,152,152);  
  20.     background: rgba(152,152,152, .5);  
  21. }  
  22.    
  23. .mejs-controls .mejs-time-rail .mejs-time-loaded {  
  24.     background: rgb(0,0,0);  
  25.     background: rgba(0,0,0, .3);  
  26. }  
  27.    
  28. .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }  

Step 8 – Progress Bar Handle & Current Time Tooltip

In this step we will add the progress bar handle and the tool tip that will show the current time on hover. So we will adjust the position, add the background images, set the widths and heights, and some typography styles.
  1. .mejs-controls .mejs-time-rail .mejs-time-handle {  
  2.     position: absolute;  
  3.     cursor: pointer;  
  4.     width: 16px;  
  5.     height: 18px;  
  6.     top: -3px;  
  7.     background: url(../img/handle.png);  
  8. }  
  9.    
  10. .mejs-controls .mejs-time-rail .mejs-time-float {  
  11.     position: absolute;  
  12.     display: none;  
  13.     width: 33px;  
  14.     height: 23px;  
  15.     top: -26px;  
  16.     margin-left: -17px;  
  17.     background: url(../img/tooltip.png);  
  18. }  
  19.    
  20. .mejs-controls .mejs-time-rail .mejs-time-float-current {  
  21.     position: absolute;  
  22.     display: block;  
  23.     leftleft: 0;  
  24.     top: 4px;  
  25.    
  26.     font-family: Helvetica, Arial, sans-serif;  
  27.     font-size: 10px;  
  28.     font-weight: bold;  
  29.     color: #666666;  
  30.     text-align: center;  
  31. }  
  32.    
  33. .mejs-controls .mejs-time-rail .mejs-time-float-corner {   
  34. display: none; }  

Step 9 – The Green Gradient

To finish our tutorial we only need to add a green CSS3 gradient that will be used on the progress bar and volume slider.
  1. .mejs-controls .mejs-time-rail .mejs-time-current,  
  2. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  
  3.     background: #82d344;  
  4.     background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);  
  5.     background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);  
  6.     background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);  
  7.     background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);  
  8.     background: linear-gradient(top, #82d344 0%, #51af34 100%);  
  9. }  

Conclusion

We’ve successfully coded this Video Player. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles.
PreviewDownload
Monday 27 August 2012
Posted by Magnus
2 Comments
Tag : , , ,

20 Useful jQuery Notification Plugins and Tutorials

►
jquery-notification-plugins
Just like jQuery sliders I think jQuery notification plugins have a very crucial potential in enhancing user experience for website visitors. The power of these scripts are oftentimes unnoticed, you see a jQuery notification plugin can be used for providing a timely and appropriate feedback to a visitor e.g. about status, success or failure of the task being carried out – and typically it requires little effort and programming to do so. This way there is a much greater chance that visitors in general will convert, meaning they perform the actions you have lined up for them to make your business a success. Examples of this could be signing up for a newsletter, making a purchase. jQuery notification plugins all have different functions and styles but generally they are all used to provide messages on a web page in a easy to notice way. This could be a small message box added to the top right corner of the page with a error message, a red background color and an icon indicating this is important!
This article will provide you some essential tips for choosing the right jQuery Notification Plugin and a list of the best scripts available right now. If we missed your favorite plugin please share this in a comment to help us improve the article,. 

Tips for choosing the right  jQuery Notification script

Before deciding on a specific script I would recommend you look through the tips and guidance I have provided below.
- Make sure there are recent updates, support, ratings and comments: We do our best to keep articles like this one up to date there is always a risk that both free and premium jQuery plugins are suddenly not supported any more. Keep in mind that many jQuery plugins (in particular free ones) are created as personal projects and made available as is. For commercial client project there is a potential risk using these.

- Know your layout requirements: Some jQuery notification plugins are simple and allow for minimal adjustments to the look and feel of the notification elements, however they may at the same time be simpler to use and more light weight. Other jQuery notification scripts are more flexible and have many properties you can use to make a more tailor made solution. Relevant things to consider could be, control of location on page, colors, graphics, fonts and so on
- User control of notifications: Some notifications may need to appear and go away after e.g. 5 seconds, while others require users to approve they received the message… or simply close it by clicking a [x]. 
- Know what interaction types you will need and ensure the plugin you choose for notifications are capable of solving all the requirements.
- Animations and transitions: They way a notification plugin add the messages to the page can mean a lot for the user experience and the ability to draw attention. Very popular ways right now is to do this is sliding message bars or boxes down from from the top/bottom or in from the sides. Fading in and out messages can also be cool.
- One or more at the same time: Consider if you will need to have multiple notifications showing up at the same time, and if they will need to have different styling and function. This may be pretty important for the notification plugin you choose.
- Technical stuff: Consider your needs related to how notification elements are inserted into pages e.g. what element they can be dynamically put into (HTML div tags) what option you will have to trigger it/control it (events in other JavaScript programs, timers, page events etc.
If you are new to jQuery and not really aware of the power and diversity it offers in the front end development area you should investigate it a bit further. As an example I will recommend you to explore jQuery infinite scrolling plugins, because they have a great potential to encourage the visitors to read more content of your website as demonstrated by Facebook and Pinterest. Further social media jQuery resources for easy integration of social networks and page flip interfaces for more interesting image and content displays are cool ideas for most websites. For now, here are some of the great plugins that you can use for better notification system on your website. Enjoy!

Now to the jQuery Notification plugins

If you need a notification script for your website look not further… below you should be able to find what you need!

jQuery “growl-like” notification plugin

This plugin provides you with a flexible and lightweight notification system on your website. You can you can call it like this: jQuery.noticeAdd() or jQuery.noticeRemove(). The fact that it is not bound to an HTML object makes this plugin very easy to use. It is callable or removable from any function. For example: it could be initiated as callback from a function or on a success or failure after an Ajax request.
jquery-growl-like-notification-plugin
MORE INFO | DEMO  – by Tim Bennik jQuery (Free jQuery Plugin)

Owl, Unobtrusive CSS3 Notifications

Alert boxes are obtrusive, ugly and usually just annoying. Not anymore, meet Owl. Owl is a feature-packed jQuery-plugin, yet very easy to use. The notifications are elegant and beautiful, of course unobtrusive and can be presented in a lot of ways.
owl-css3-notification-plugin
MORE INFO | DEMO – by CodeCanyon (Premium jQuery Plugin)

jQuery Notify

jQuery Notify is easy to implement, fast loading and will improve the usability of your website. It comes pre-loaded with a simple style which is easily modified using basic CSS . For the more advanced user jQuery Notify gives you the option to use up to 4 separate callbacks on each notification item which fire at key points in the invocation process.
jquery-notify
MORE INFO | DEMO – by CodeCanyon (Premium jQuery Plugin)

Fallr – Simple & Elegant Modal Box jQuery Plugin

Fallr is a general modal box / message window with clean UI to present a notification / confirmation / lightbox / popup / choices / attention / forms / wizard steps / welcome / notice / warning / alert / information / slider / gallery / or whatever dialog you want, in a simple and elegant way.
fallr
MORE INFO | DEMO – by CodeCanyon (Premium jQuery Plugin)

Notification Center – 4 Notification Types

Notification Center is a jQuery plugin that facilitates the process of creating and managing notifications within an application. The primary features of Notification Center are: 2 themes – Light and Dark; Notification ‘bubbles’ track the number of unread notifications in each category; 4 display types (modal, bar, growl, none); 4 helper types (success, error, warning, notice); Create notifications in Javascript or PHP; Automatically poll the server for new notifications and etc.
notification-center[5]
MORE INFO | DEMO – by CodeCanyon (Premium jQuery Plugin)

Menu with CSS3 Effects and Notification Bubbles

This Menu with CSS3 Effects and Notification Bubbles has everything you need. The functionality is divided in different parts and that makes it very powerful. The core is a rock solid base for every css menu with unlimited menu levels and a mega menu. The effects are pure CSS but you can use the jQuery plugin for support in older browsers. The menu styles are also pure CSS and there are no images used.
menu-with-notification-bubbles
MORE INFO | DEMO – by CodeCanyon (Premium jQuery Plugin)

MsgUI

MsgUI is a customizable notification plugin package that allows you to utilize stylish notifications throughout your site. Included in this package are Growl, Bar, and Alert jQuery plugins. MsgUI is currently supported in the latest versions of Firefox, Chrome, Safari, Opera, and IE.
msg-ui
MORE INFO | DEMO – by CodeCanyon (Premium jQuery Plugin)

jNotifier

Simple jQuery plugin for display beautiful notifications on your site. Notifications display in stack on site, and have callback, timer for lifetime, close button, show or hide preview picture.
jnotifier[3]
MORE INFO | DEMO – by CodeCanyon (Premium jQuery Plugin)

jQuery notification Plug-in

This plug in supports four types of major notifications (Success, Error, Warning and Information). To change the notification type pass parameter type=”value” to showNotification() function.
jquery-notification-plugin
MORE INFO | DEMO – by Ravi Tamada (Free jQuery Plugin)

jQuery plugin Easy Notification

There are cases and scenarios when you want to deliver a message to your website users and make sure that they will read it or at least notice it. This jQuery plugin will make that task easy for you. This plugin will create and insert a simple piece of HTML code that contains a message you want to send to your visitors. Visitors have an option of closing notification once they read it. You can control the content and appearance of the notification by adjusting plugin options and CSS.
jquery-plugin-easy-notification
MORE INFO | DEMO – by CSS Globe (Free jQuery Plugin)

jNotify, display animated (informations, errors, success) boxes

jNotify can display information boxes in just one line of code. Three kind of boxes are allowed : information, success and failure. The whole box is entirely skinnable with css. For example, you could use it for a mail being successfully sent or a validation error of a form.
jnotify
MORE INFO | DEMO – by MyjQueryPlugins (Free jQuery Plugin)

noty – A jQuery Notification Plugin

noty is a jQuery plugin that makes it easy to create alert – success – error – warning – information – b messages as an alternative the standard alert dialog. Each notification is added to a queue. (Optional). The notifications can be positioned at the; top – topLeft – topCenter – topRight – center – centerLeft – centerRight – bottom – bottomLeft – bottomCenter – bottomRight. There are lots of other options in the API to customise the text, animation, speed, buttons and much more. It also has various callbacks for the buttons, opening closing the notifications and queue control.
noty
MORE INFO | DEMO – by Noty  (Free jQuery Plugin)

jquery-toastmessage-plugin

jquery-toastmessage-plugin is a JQuery plugin which provides android-like notification messages. It’s a quite nice way to report info or error to the user.
jquery-toast-message-plugin
MORE INFO  | DEMO – by Akquinet  (Free jQuery Plugin)

Slide Note For jQuery

A jQuery Plugin that makes it easy to display sliding notifications on your website or in your web application. It offers flexible positioning options, support for Ajax, CSS hooks, and more
slidenote-for-jQuery
MORE INFO | DEMO – by Moreco.de (Free jQuery Plugin)

FooBar – A jQuery Notification Bar

FooBar is a neat and unobtrusive notification bar that sits at the top of the page that can be used to inform or announce specific info to site visitors. The collapsible bar can be used in unlimited scenarios, including displaying notifications, showing site announcements, product specials, competitions, giveaways, etc. Anything you can think of, really.
foobar
MORE INFO  |  DEMO – by CodeCanyon  (Premium jQuery Plugin)

Sticky – A super simple notification system for jQuery

Sticky allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders.
sticky
MORE INFO  | DEMO – by ThrivingKings (Free jQuery Plugin)

Cool notification messages with CSS3 & jQuery

Notification messages are an important part of the user experience and you can’t afford to omit them. A notification alert message should appear every time the user perform important tasks. In this article, you’ll learn how to create some alert messages with CSS3 and jQuery.
cool-notification-messages-with-css3-and-jQuery
MORE INFO | DEMO – by RedTeamDesign (Free jQuery Tutorial)

Facebook like Beeper for Alerting Notifications Live

Whenever you are online on Facebook and if there are any notifications then you would have noticed the small blue box on the left bottom alerting you the notification live, this is what Facebook calls as the beeper. This tutorial will teach you how to create such a beeper found on Facebook.
facebook-like-beeper
MORE INFO | DEMO – by Geo Web Station (Free jQuery Tutorial)

jBar – A jQuery Notification Plugin

jBar is a jQuery Plugin that allows you to integrate notifications in your web site. The behavior is very similar to Twitter’s and Stackoverflow’s notification messages. The plugin is configurable in text color, position (top or bottom) and other properties. This is how you use it: $(element).bar({ message : ‘Your profile customization has been saved!.’
jbar
MORE INFO | DEMO – by CoDrops (Free jQuery Plugin)

LeValidate

LeValidate gives you ability to validate forms by rules that are very easy to set along with css3 dynamic notification box which you can modify as you like. Plugin is mainly designed to be light and easy to edit for everyone. Package includes necassary files with documentation and couple of examples to understand everything.
le-validate

Thursday 23 August 2012
Posted by Magnus
0 Comments
Tag : , , ,

- Copyright © Bjonk Design -