[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

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

iScroll 4 on mobile devices

iScroll is used to scroll contents inside a fixed width/height element.

Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile. Doesn’t work on IE!

Features:

  • Pinch / Zoom
  • Pull up/down to refresh
  • Improved speed and momentum
  • Snap to element
  • Customizable scrollbars

How to include iScroll in your project:

Step 1. Download the JS file on iScroll 4 page.

Step 2. The HTML markup

You can add how many iScrolls you want in a page, but remember to initialize every one of them. Try to keep the DOM structure as simple as possible.

<div id="wrapper">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

In this example, the wrapper is static, and the ul is the scrolling element. If you want to have multiple scrolling elements, you need to nest them in a single element, because only the first child of the wrapper element is scrolled. For that you have the following example:

<div id="wrapper">
  <div class="scroller">
    <ul>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Step 3. The initialization

Even if the demos you download on iScroll 4 have a different initialization, use the following (because on mobile devices, the header will be fixed with the initialization in the demos):

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
  var myScroll;
  function loaded() {
    myScroll = new iScroll('wrapper');
  }
  document.addEventListener('DOMContentLoaded', loaded, false);
</script>

You can find a series of examples and the documentation of iScroll on their official page.

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.

Demo

1. The HTML

<form>
  <div class="form-row">
    <label for="click_here" class="label-hide">Click here</label>
    <input type="text" id="click_here" class="label-over"/>
  </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').focus(function() {
    $('label.label-hide[for="' + $(this)[0].id + '"]').hide();
  }).blur(function() {
    if($(this).val() == '') {
      $('label.label-hide[for="' + $(this)[0].id + '"]').show();
    }
  });
});

Rollover menu on click

In this post is an example of a rollover menu that appears on a click event. Timers are used to show the menu while the mouse is over the menu, and to hide the menu when you leave the menu. This can be very simple to modify from a click event to a mouseover/mouseenter event.

Demo

1. The HTML

<a href="#">Show menu</a>
<ul>
  <li>&raquo; <a href="#">First item</a></li>
  <li>&raquo; <a href="#">Second item</a></li>
  <li>&raquo; <a href="#">Third item</a></li>
</ul>

2. The CSS

Here is the entire CSS that I’ve used for the demo.

body { font-family: Arial; }
.menu a, .menu li {
  color: #9F1501;
  text-decoration: none;
}
.menu a:hover { text-decoration: underline; }
.menu {
  display: none; /* this is mandatory */
  background: #f0f0f0;
  padding: 10px;
  list-style: none;
  width: 150px;
  border-radius: 5px;
}

3. The jQuery

$(function() {
  $('.show-menu').click(function() {
    clearTimeout($(this).data('timeoutId'));
    $(".menu").show();
  }).mouseleave(function() {
    var timeoutId = setTimeout(function() {
      $(".menu").hide();
    }, 650);
    $(this).data('timeoutId', timeoutId);
  });
  $('.menu').mouseenter(function() {
    clearTimeout($(".show-menu").data('timeoutId'));
    $(".menu").show();
  }).mouseleave(function() {
    var timeoutId = setTimeout(function() {
      $(".menu").hide();
    }, 650);
    $(".show-menu").data('timeoutId', timeoutId);
  });
});