[UPDATE] Hide label when focus on input

Here is a way to hide a label when you focus on an input. There are many ways to do that, but I’ve used a label positioned absolute over the input, and some jQuery to hide and show it. It works even if some of the fields are pre-filled.

1. The Markup

    <label for="click_here">Click here</label>
    <input type="text" id="click_here"/>

2. The CSS

.form-row { position: relative; }
.label-hide {
  position: absolute;
  left: 10px;
  top: 3px;
  font-family: Arial;
input {
  height: 15px;
  line-height: 15px;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #cecece;

3. The jQuery

$(function() {
  $('.label-over').each(function() {
    var elem = $(this);
    $('label[for="' + $(this).attr('id') + '"]').click(function() {
    if ($(this).val() != '') {
      $('label[for="' + $(this).attr('id') + '"]').hide();
  }).focus(function() {
    $('label[for="' + $(this)[0].id + '"]').hide();
  }).blur(function() {
    if($(this).val() == '') {
      $('label[for="' + $(this)[0].id + '"]').show();
    if($(this).val() != '') {
      $('label[for="' + $(this)[0].id + '"]').hide();

BigVideo.js – big background video and images


  • the plugin helps you to add full background videos to your website;
  • you can use it with a single video on repeat or to show a video playlist;
  • the videos can play silent;
  • the plugin uses the video.js api (so you will need to include the video.js file in your page);
  • it also requires jQuery, jQuery UI and jQuery imagesloaded.


Play a series of ambient background videos (without sound)

$(function() {
    var BV = new $.BigVideo();

Remember that mobile devices do not allow video autoplay. You can use Modernizr to detect for touchscreen devices, then show a large poster image fot BigVideo to use instead

var BV = new $.BigVideo();
if (Modernizr.touch) {
} else {


Ambient video demo

Series of ambient background videos demo

Mobile demo

jQuery UI touch events

As more and more websites go responsive, the widgets with touch events are a must. jQuery UI, unfortunately, doesn’t support touch events for their widgets.

After a struggle with a jQuery UI slider to make it work on an iPad, I’ve found an awesome js library that adds touch events to the jQuery UI.

jQuery UI Touch Punch is a hack that enables the touch events on sites using jQuery UI.

How to use

1. You need to include the jQuery and jQuery UI on your page

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

2. Include the Touch Punch js after jQuery UI and before its first use.

<script src="/js/jquery.ui.touch-punch.min.js"></script>

3. Use jQuery UI as normal


Now enjoy the touch events on your jQuery UI widgets!

Demo & Download

jQuery liScroll – scroll text plugin

This plugin is an adaptation of a news ticker. You can adapt it to scroll random text, not only news feeds.

1. Include the dependencies in the head of the html document

<link rel="stylesheet" type="text/css" media="screen" href="/css/li-scroller.css" />
<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.li-scroller.1.0.js"></script>

2. The markup

<ul id="ticker01">
  <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
  <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
  <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>

The markup doesn’t need to have the span and a element, you can include whatever text you want.

3. Fire the plugin


The plugin has only one option, so if you want the list to scroll faster or slower, you should modify the travelocity param.

  $("ul#ticker01").liScroll({travelocity: 0.15});

Demo & Download

Awesome CSS3 animation menus

I’ve found some creative animation menus done only with CSS3 on codrops. The icons are a Web Symbols typeface included with @font-face so the animation on the icon is very intuitive and simple to understand.

On the demo page you can see 10 examples of animations that you can download.

The Markup

<ul class="ca-menu">
    <a href="#">
      <span class="ca-icon">A</span>
      <div class="ca-content">
        <h2 class="ca-main">Exceptional Service</h2>
        <h3 class="ca-sub">Personalized to your needs</h3>


I’ll write down the CSS only for the example shown in the screenshot above and only for the hover part.

.ca-menu li:hover{
  background-color: #000;
.ca-menu li:hover .ca-icon{
  color: #f900b0;
  font-size: 120px;
  opacity: 0.2;
  left: -20px;
  transform: rotate(20deg);
.ca-menu li:hover .ca-main{
  color: #f900b0;
  opacity: 0.8;
.ca-menu li:hover .ca-sub{
  color: #fff;
  opacity: 0.8;

Download & Documentation


jQuery thumbnail scroller

This jQuery plugin works by cursor movement or next/previous buttons. It’s really simple to use and first one that I’ve found that starts the slider on hover and it’s cool.

How to use it

1. Include the external files

<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
<script src="jquery.thumbnailScroller.js"></script>

2. The Markup

<div id="tS2">
            <a href="#"><img src="thumbs/img1.jpg" /></a>
            <a href="#"><img src="thumbs/img2.jpg" /></a>
            <a href="#"><img src="thumbs/img3.jpg" /></a>
            <a href="#"><img src="thumbs/img4.jpg" /></a>
            <a href="#"><img src="thumbs/img5.jpg" /></a>
    <a href="#"></a>
    <a href="#"></a>

3. Fire the plugin




Creating a stitched border

Use this snippet  to get a stitched-like border on your elements.

<div>Today it's a beautiful day for styling.</div>


.stitched {
  padding: 15px 10px;
  margin: 10px;
  background: #3AB551;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3em;
  border: 2px dashed #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -moz-box-shadow: 0 0 0 4px #38A64C;
  -webkit-box-shadow: 0 0 0 4px #38A64C;
  box-shadow: 0 0 0 4px #38A64C;
  text-shadow: -1px -1px #2D853D;
  font-weight: normal;