Tutorial Set/Clear Default Input Value

by in , 0 

$('.default-value').each(function() {

       var default_value = this.value;

       $(this).focus(function(){
               if(this.value == default_value) {
                       this.value = '';
               }
       });

       $(this).blur(function(){
               if(this.value == '') {
                       this.value = default_value;
               }
       });

});

Tutorial Serialize Form to JSON

by in , 0 

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

Reference URL

Tutorial Select List Item Only If Doesn’t Contain Another List (and is top level)

by in , 0

I realize this is rather specific, but I had to write this selector earlier to fix a problem and I used jQuery because the selector is rather advanced (and needed to work cross-browser). I needed to select the anchor link of a list item but only if that list item didn't contain another list and was at the top level of the nested list structure (no deeper).

$("ul.dropdown > li:not(:has('ul')) a").css({
        "background-image": "none",
});

The idea was that each of the top level links in the dropdown menu had a "down arrow" graphic, but the list items that did not have a dropdown should have that arrow removed.

Tutorial Select Element Only if Children are Not Animated

by in , 0 

var myChildrenBehave =  $(".element").filter(function() {
  var filtered = $(this).children().not(":animated");
  return filtered;
 });

This selects the element only if its children behave (not being animated). Very helpful on a drop down menu (on hover or click)

Tutorial Search/Replace

by in , 0 

jQuery(function () { 
    jQuery(":contains(FIND)").not(":has(:contains(FIND))").each(function () { 
        var that = $(this), 
            html = that.html(); 
         
        html = html.replace(/(\(FIND:.*?\))/g, "REPLACE-WITH"); 
        that.html(html); 
    }); 
});

Reference URL

Tutorial Scroll Page Horizontally With Mouse Wheel

by in , 0

1) Load jQuery and the Mouse Wheel plugin

Mouse Wheel plugin is here.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2) Attach mousewheel event to body

The "30" represents speed. preventDefault ensures the page won't scroll down.

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });

});

View Demo

Tutorial Run JavaScript Only After Entire Page Has Loaded

by in , 0 

$(window).bind("load", function() {
   // code here
});