Resources: jQuery / Javascript

Prevent ugly fadein-fadeout-fadein loops when you quickly hover and exit with this nifty code. It basically checks to make sure we’re not currently animating before it applies a new animation filter

    $(this).filter(':not(:animated)').animate({ opacity : 1 }, 200);

In a recent project I have struggled to deal with Microsoft’s “Brand New” Internet Explorer 9′s “support” for HTML5 and CSS3. IE9 support for HTML5 and CSS3 is laughable with many, many holes and incompatibilities. One in particular that I’m dealing with is an input field’s placeholder attribute. As I include jQuery in 80% of my projects, I turned to jQuery for a solution, and alas! jQuery pulls through again. Just drop in this code in your JavaScript and you don’t even need to make any changes to your CSS or HTML!

    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();

Animate faster with CSS3

7 January 2013

Micro-animations, or 'nice-to-have' animations can pretty quickly add up to a bloated javascript effects library. CSS is faster, more lightweight and just as easy to code. You can run most micro-animations without even using jQuery, but naturally this relies upon the user having CSS3 support.

CSS3 Animation

.transitionable-element {
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out; }

.transitionable-element:hover {
opacity: 0.5;}



Animate with CSS3 but trigger with jQuery

.fade-out:hover {
    opacity: 0.5;}
$('.transitionable-element').hover( function(){
        $(this).addClass('fade-out');
    }, function(){
        $(this).removeClass('fade-out');
    }
);

Disabling an element from click events within AS3 is easy enough, but when you're developing a jQuery site/application sometimes you want a visual element which sits above links, buttons, and so on. Drop this code in for the element you wish to disable (CSS):

pointer-events: none;
Let's work together