[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

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

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() {
      elem.focus();
    });
    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();
    }
  }).change(function(){
    if($(this).val() != '') {
      $('label[for="' + $(this)[0].id + '"]').hide();
    }
  })
})

BigVideo.js – big background video and images

BIGVIDEO.JS :

  • 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.

Setup

Play a series of ambient background videos (without sound)

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
});

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();
BV.init();
if (Modernizr.touch) {
    BV.show('video-poster.jpg');
} else {
    BV.show('video.mp4',{ambient:true});
}

Demos

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

$('#widget').slider();

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>
</ul>

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

3. Fire the plugin

$(function(){
  $("ul#ticker01").liScroll();
});

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

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

Demo & Download

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">
    <div>
        <div>
            <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>
        </div>
    </div>
    <a href="#"></a>
    <a href="#"></a>
</div>

3. Fire the plugin

jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);

Documentation

Demo

WunderSlider – responsive proportional slider

WunderSlider is a plugin that has something extra that the most of the responsive plugins out there. You can set it to resize your images by proportions: adapts proportionally to the screen size.

The plugin has a lot of properties: 41 effects, 8 themes, 12 overlays, flexible captions, links on image and many more.

How to use:

1. Adding the external sources

<link rel="stylesheet" type="text/css" href="css/default/wunderslidermin.css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="css/default/wunderslider-iemin.css" /><![endif]-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/wunderslider-min.js"></script>

2. The markup

<div id="wunderslider"></div>
#wunderslider {
  width: 80%;
  height: 500px;
  margin: 0 auto;
}

3. Fire the plugin

(function($) {
    $(window).load(function(){
      var parent = document.getElementById('wunderslider');
      var wunderSlider = new itthinx.WunderSlider(
      parent,
      [{
        url:'images-demo/image-0.jpg',
        title:'Title for the first image',
        description:'A nice image...',
        linkUrl:'http://www.wunderslider.com/'
      },
      {
        url:'images-demo/image-1.jpg',
        title:'Second image',
        description:'Another image.'
      },
      {
        url:'images-demo/image-2.jpg',
        title:'Here is another image',
        description:'One more image.'
      } ],
      { mode: 'proportional', mouseOverPause: true }
    );
  });
})(jQuery);

Demo & Documentation

Adding swipe to jCarousel

After using jCarousel in a project, and then testing it on mobile platforms, I’ve realized that you can’t swipe through the items and this should be the expected behavior for touch devices.

The solution is to add another nice plugin that allows you to use touch events, called jQuery Touchwipe. The code should look something like this:

$('#carousel').jcarousel({
  scroll: 1;
});

$('#carousel').touchwipe({
  wipeLeft: function() {
    $('#carousel').jcarousel('next');
  },
  wipeRight: function() {
    $('#carousel').jcarousel('prev');
  },
  min_move_x: 20,
  min_move_y: 20,
  preventDefaultEvents: false
});

The preventDefaultEvents option is set “true” on the plugin page example, but it prevents you to swipe up/down for usual scroll, so if you have to scroll down or up the page where the carousel is, you can set the option to “false”.