5 HTML5 Audio Players

1. Speakker

Comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors and two different button sets for light and dark themes.

Demo & Documentation

2. audio.js


audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

Demo & Documentation

3. Sound Manager 2

SoundManager 2 gives you a single, powerful API that supports both new and old, using HTML5 audio where supported and optional Flash-based fallback where needed.

Demo & Documentation

4. jPlayer

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages.

Demo & Documentation

5. Media Element

Instead of offering an HTML5 player to modern browsers and a totally separate Flash player to older browsers, MediaElement.js upgrades them with custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API.

Demo & Documentation

20 usefull and free jQuery plugins

Here is a list of jQuery plugins that can increase the user experience on your website.

1. Flexslider

FlexSlider has been verified in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. jQuery versions 1.3+ are supported. It’s supposed to be the best responsive jQuery slider around.

Demo   Download & Documentation

2. Camera

Demo   Download & Documentation

3. jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

Demo    Download & Documentation

4. Zoomer Gallery


A jQuery plugin for displaying images with Flash-like zooming effects.

Demo Download & Documentation

5. jqZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.

Supports: IE 6+, Firefox 2+, Chrome 1.0, Safari 2+, Opera 9+

Demo    Download & Documentation

6. gZoom

Demo   Download & Documentation

7. Hover Zoom

The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails.

Demo   Download & Documentation

8. jParallax

jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Demo   Download & Documentation

9. zLayer

zLayers is a jQuery parallax plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent.

Demo   Download & Documentation

10. Arctext


Demo   Download & Documentation

11.TagBox

This is a jQuery plugin to help add tags like input in your forms.

Demo   Download & Documentation

12. MobilyBlocks

jQuery plugin (2KB) that allows you to create an unordered list as an animated circle.

Demo Download & Documentation

13. turn.js

This is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

Demo   Download & Documentation

14. Fullcalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar.

Demo  Download & Documentation

15. Star rating plugin

The Star Rating Plugin is a plugin for the jQuery Javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes.

Demo   Download & Documentation

16. prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.
17. fleXcroll

A Cross Browser and Standards Compliant Custom ScrollBar

Demo   Download & Documentation

18. iScroll

Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.

Demo   Download & Documentation

19. Simple Modal

SIMPLEMODAL is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content.
SIMPLEMODAL is not a lightbox although the possibility to hide parts of its layout may partially make it similar.

Demo   Download & Documentation

20. Lettering

Demo   Download & Documentation

Using Flexslider jQuery plugin – with thumbs

Flexslider is a responsive jQuery plugin that you can use on desktop sites and on mobile ones as well.

The best features are:

  • simple markup
  • supported by all major browsers
  • supported by mobile browsers
  • can use any html elements inside the slides
  • touch swipe support

First, you can download the flexslider.js from here.

Step 1. Add the flexslider js/css files

This code must be added in the <head> of the document.

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

Step 2. The HTML markup

This code must be added in the <body> of the document.

<div class="flexslider">
    <ul>
      <li><img src="slide1.jpg" /></li>
      <li><img src="slide2.jpg" /></li>
      <li><img src="slide3.jpg" /></li>
    </ul>
</div>

Step 3. Fire the slider

This code must be added after the links added at Step 1.

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
      $('.flexslider').flexslider();
    });
</script>

The css file can be customized and you can change the navigation buttons, direction buttons, sizes and positions.

Adding an additional thumbnails bar to Flexslider.

Step 1. Follow the previous steps and insert your own flexslider.

Step2. The HTML markup for thumbs

<ul id="thumbs">
    <li><img src="slide1_t.jpg" rel="0" /></li>
    <li><img src="slide2_t.jpgg" rel="1"/></li>
    <li><img src="slide3_t.jpg" rel="2" /></li>
</ul>

Step 3. The new fire script

<script>
$(window).load(function() {
    $('.flexslider').flexslider({
      controlsContainer : ".flexslider",
      start: function(slider){
        $('#thumbs li img').click(function(){
          var index = parseInt($(this).attr('rel'));
          (index > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
          slider.flexAnimate(index, slider.vars.pauseOnAction);
        });
    }
});
</script>

Alternative to Lorem Ipsum

After reading some articles about the debate whether to use or not Lorem Ipsum text (‘Yes/No Ipsum‘ and ‘The Other Reason why Lorem Ipsum is Hurting Your Designs’) I’ve agreed with Sacha Greif’s point of view, that we need to use some other type of copy text.

She recommended in her article to use some paragraphs from Wikipedia, but I’ve found 2 more ways to replace the usage of Lorem Ipsum.

1. Blind text generator

“But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.”

This tool allows you to copy text from Cicero, Kafka and other English cursive text.

2. Fillerati

“My one great danger now lay in returning to the upper levels in search of Perry and Ghak, but there was nothing else to be done, and so I hastened upward. When I came to the frequented portions of the building, I found a large burden of skins in a corner and …”

Fragments from recognized authors like Jules Verne or Jack London.

jqTransform jQuery Plugin

This plugin allows you to create custom form elements. You can customize all types of form inputs, textarea, buttons with only one plugin.

How to use

Download the sources from here.

1. Add the javascript files and the stylesheet to the head of your page

<link href="/css/jqtransform.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript src="/js/jquery.jqtransform.min.js"></script>

*You can customize the CSS file with you own images and styles.

2. The HTML markup

<form class="jqtransform">
  <input type="checkbox" name="checkbox" />
  <input type="radio" name="radio-btn" value="1" checked="checked"/>
  <input type="radio" name="radio-btn" value="2" />
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  <select>
</form>
You can use the ‘jqtransform’ class on the entire form, like in the example above, or you can use it only for some formfields in the form, like below.
<form>
  <div class="form-row jqtransform">
    <input type="checkbox" /> <!-- this checkbox will be styled -->
  </div>
  <input type="checkbox" /> <!-- this checkbox will not be styled -->
</form>
3.  Use the plugin. Include the following script to start using the plugin
<script type=type="text/javascript">
 $(function() {
   $(".jqtransform").jqTransform();
   //finds all elements with class 'jqtransform' and apply your style, even if you use it on all the form or only in a section of the form
 });
 </script>

Visit the plugin page for more information.

4 Useful CSS3 Tutorials

1. 3D thumbnail hover effects

A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. In the example there are used thumbnails that will reveal some more information on hover.

Demo Download Source

2. How to create animated tooltips with CSS3

This is a tutorial that helps you create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after.

Demo Download Source

3. Enhance required form fields with CSS3

Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones. The idea is to allow the user to enhance only the required fields so that he has a notion about what fields are actually required. That’s normally done a little * or similar but in this tutorial you will learn to create a little interactive effect for a better visualisation of required fields.

Demo Download Source

4. Direction-aware hover effect using CSS3 and jQuery

How to create a direction-aware hover effect using CSS3 and jQuery.  The idea of this tutorial is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we “leave” the element, the overlay will slide out to that direction, following our mouse. This will create an interesting-looking effect.

Demo Download Source