Archive for October, 2015

Simple HTML5 placeholders fallback for IE9 and older

I hoped I will never hear about IE9 and its lack of support for the placeholder attribute, … I had high hopes.

I’ve boiled a simple fallback, late in the evening and in a rush, using IE conditional comments for browser detection.

<!--[if IE 8 ]>    <html class="ie8 lt-ie10"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9 lt-ie10"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html><!--<![endif]-->
$(document).ready(function() {

	// HTML5 placeholders fallback for IE9 and older
	if ($('html').hasClass('lt-ie10')) {

		// add the placeholder text as value
		$('textarea, input:text').each(function() {
			$(this).attr('value', $(this).attr('placeholder'));
		});

		// clear form fields on focus
		$('textarea, input:text').on('focus click', function(){
			if (this.value == this.defaultValue) {
			this.value = '';
			}
		}).on('blur', function(){
			if (this.value == '') {
			this.value = this.defaultValue;
			}
		});
	}

});

Random start cycle

function randomBox(randomItem) {

  randomItem = $(randomItem);

  var random = Math.floor(Math.random() * randomItem.length);

  randomItem.eq(random % randomItem.length).addClass('active');

  function startRand() {

    var current = randomItem.parent().find('.active');

    if ( current.is(':last-child') ) {
      current.removeClass('active');
      current.siblings(':first-child').addClass('active');
    } else {
      current.removeClass('active');
      current.next().addClass('active');
    }

    setTimeout(function(){startRand()}, 2500);
  }

  startRand();
}

randomBox('.list > .item');