jquery — codestacker

background animation

requires jquery.ui or jquery.color (https://github.com/jquery/jquery-color)

   1  $.fn.backgroundAnimation : function(bgcolor, fgcolor, duration) {
   2  	$(this).animate({ backgroundColor: bgcolor }, duration).css('color', fgcolor);
   3  }

$.fn.backgroundAnimation : function(bgcolor, fgcolor, duration) {
	$(this).animate({ backgroundColor: bgcolor }, duration).css('color', fgcolor);
}

created by leozera — 31 July 2011 — get a short url — tags: jquery — embed

highlight an element

requires jquery.ui or jquery.color (https://github.com/jquery/jquery-color)

show/hide lines

   1  $.fn.highlight : function (highlightColor, duration) {
   2      var highlightBg = highlightColor || "#FFFF9C";
   3      var animateMs = duration || 2000;
   4      var originalBg = this.css("background-color");
   5  
   6      if (!originalBg || originalBg == highlightBg)
   7          originalBg = "#FFFFFF"; // default to white
   8  
   9      $(this).css("backgroundColor", highlightBg).animate({ backgroundColor: originalBg }, animateMs, null, function () { $(this).css("backgroundColor", originalBg);  });
  10  }

$.fn.highlight : function (highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 2000;
    var originalBg = this.css("background-color");

    if (!originalBg || originalBg == highlightBg)
        originalBg = "#FFFFFF"; // default to white

    $(this).css("backgroundColor", highlightBg).animate({ backgroundColor: originalBg }, animateMs, null, function () { $(this).css("backgroundColor", originalBg);  });
}

created by leozera — 31 July 2011 — get a short url — tags: jquery — embed

center vertically element

show/hide lines

   1  $.fn.center = function (relation) {
   2      var center_in = (relation) ? $(relation) : $(window);
   3      
   4      this.css("position","absolute");
   5      this.css("top", ( center_in.height() - this.height() ) / 2+center_in.scrollTop() + "px");
   6      this.css("left", ( center_in.width() - this.width() ) / 2+center_in.scrollLeft() + "px");
   7      return this;
   8  };

$.fn.center = function (relation) {
    var center_in = (relation) ? $(relation) : $(window);
    
    this.css("position","absolute");
    this.css("top", ( center_in.height() - this.height() ) / 2+center_in.scrollTop() + "px");
    this.css("left", ( center_in.width() - this.width() ) / 2+center_in.scrollLeft() + "px");
    return this;
};

created by leozera — 31 July 2011 — get a short url — tags: jquery — embed

add to bookmarks using jquery

show/hide lines

   1  $("a#bookmark").click(function(){
   2     var bookmarkUrl = this.href;
   3     var bookmarkTitle = this.title;
   4  	 
   5     if ($.browser.mozilla) // For Mozilla Firefox Bookmark
   6     { 
   7  	window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");
   8     } 
   9     else if($.browser.msie || $.browser.webkit) // For IE Favorite
  10     { 
  11  	window.external.AddFavorite( bookmarkUrl, bookmarkTitle); 
  12     }
  13     else if($.browser.opera ) // For Opera Browsers
  14     { 
  15  	$(this).attr("href",bookmarkUrl);
  16  	$(this).attr("title",bookmarkTitle);
  17  	$(this).attr("rel","sidebar");
  18  	$(this).click();
  19     } 
  20     else // for other browsers which does not support
  21     { 
  22          alert('Please hold CTRL+D and click the link to bookmark it in your browser.');
  23     }
  24     return false; 
  25  });

$("a#bookmark").click(function(){
   var bookmarkUrl = this.href;
   var bookmarkTitle = this.title;
	 
   if ($.browser.mozilla) // For Mozilla Firefox Bookmark
   { 
	window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");
   } 
   else if($.browser.msie || $.browser.webkit) // For IE Favorite
   { 
	window.external.AddFavorite( bookmarkUrl, bookmarkTitle); 
   }
   else if($.browser.opera ) // For Opera Browsers
   { 
	$(this).attr("href",bookmarkUrl);
	$(this).attr("title",bookmarkTitle);
	$(this).attr("rel","sidebar");
	$(this).click();
   } 
   else // for other browsers which does not support
   { 
        alert('Please hold CTRL+D and click the link to bookmark it in your browser.');
   }
   return false; 
});

created by leozera — 17 July 2011 — get a short url — tags: jquery — embed

detecting ie version with jquery

show/hide lines

   1  var IE = $.browser.msie, IEv = $.browser.version;
   2  
   3  if (IE) { //could be improved
   4      var IE6 = parseInt(IEv) == 6,
   5          IE7 = parseInt(IEv) == 7, 
   6          IE8 = parseInt(IEv) == 8, 
   7          IE9 = parseInt(IEv) == 9;
   8  }
   9  
  10  //Usage:
  11  
  12  if (IE) {
  13      //Do something for all IE versions
  14  }
  15  if (IE7) {
  16      //Do stuff just for IE7
  17  }
  18  if (IE7 || IE8) {
  19      //Do stuff just for IE7 or IE8
  20  }
  21  if (!IE6) {
  22      //Do something if not IE6
  23  }

var IE = $.browser.msie, IEv = $.browser.version;

if (IE) { //could be improved
    var IE6 = parseInt(IEv) == 6,
        IE7 = parseInt(IEv) == 7, 
        IE8 = parseInt(IEv) == 8, 
        IE9 = parseInt(IEv) == 9;
}

//Usage:

if (IE) {
    //Do something for all IE versions
}
if (IE7) {
    //Do stuff just for IE7
}
if (IE7 || IE8) {
    //Do stuff just for IE7 or IE8
}
if (!IE6) {
    //Do something if not IE6
}

created by leozera — 11 July 2011 — get a short url — tags: browser ie jquery — embed

simple jquery table sort

requires jquery.sortElements.js (https://github.com/jamespadolsey/jQuery-Plugins/blob/master/sortElements/jquery.sortElements.js)

via http://stackoverflow.com/questions/3160277/jquery-table-sort

show/hide lines

   1  var table = $('table');
   2  
   3  $('th').wrapInner('<span title="Sort this column"/>').each(function(){
   4       var th = $(this), thIndex = th.index(), inverse = false;
   5       th.click(function(){
   6           table.find('td').filter(function(){
   7               return $(this).index() === thIndex;
   8           }).sortElements(function(a, b){
   9               return $.text([a]) > $.text([b]) ?
  10                   inverse ? -1 : 1
  11                   : inverse ? 1 : -1;
  12           }, function(){
  13  			return this.parentNode; 
  14           });
  15           inverse = !inverse;
  16       });
  17  });

var table = $('table');

$('th').wrapInner('<span title="Sort this column"/>').each(function(){
     var th = $(this), thIndex = th.index(), inverse = false;
     th.click(function(){
         table.find('td').filter(function(){
             return $(this).index() === thIndex;
         }).sortElements(function(a, b){
             return $.text([a]) > $.text([b]) ?
                 inverse ? -1 : 1
                 : inverse ? 1 : -1;
         }, function(){
			return this.parentNode; 
         });
         inverse = !inverse;
     });
});

created by leozera — 01 July 2011 — get a short url — tags: jquery table — embed

smooth scrolling

http://snipplr.com/view.php?codeview&id=53669

show/hide lines

   1  $(document).ready(function() {
   2    function filterPath(string) {
   3    return string
   4      .replace(/^\//,'')
   5      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
   6      .replace(/\/$/,'');
   7    }
   8    var locationPath = filterPath(location.pathname);
   9    var scrollElem = scrollableElement('html', 'body');
  10  
  11    $('a[href*=#]').each(function() {
  12      var thisPath = filterPath(this.pathname) || locationPath;
  13      if (  locationPath == thisPath
  14      && (location.hostname == this.hostname || !this.hostname)
  15      && this.hash.replace(/#/,'') ) {
  16        var $target = $(this.hash), target = this.hash;
  17        if (target) {
  18          var targetOffset = $target.offset().top;
  19          $(this).click(function(event) {
  20            event.preventDefault();
  21            $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
  22              location.hash = target;
  23            });
  24          });
  25        }
  26      }
  27    });
  28  
  29    // use the first element that is "scrollable"
  30    function scrollableElement(els) {
  31      for (var i = 0, argLength = arguments.length; i <argLength; i++) {
  32        var el = arguments[i],
  33            $scrollElement = $(el);
  34        if ($scrollElement.scrollTop()> 0) {
  35          return el;
  36        } else {
  37          $scrollElement.scrollTop(1);
  38          var isScrollable = $scrollElement.scrollTop()> 0;
  39          $scrollElement.scrollTop(0);
  40          if (isScrollable) {
  41            return el;
  42          }
  43        }
  44      }
  45      return [];
  46    }
  47  
  48  });

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

});

created by leozera — 23 June 2011 — get a short url — tags: jquery — embed

simple jquery scroll to top

show/hide lines

   1  $(document).ready(function() {
   2  	$('.backtotop').click(function(){
   3  		$('html, body').animate({scrollTop:0}, 'slow');
   4  	});
   5  });

$(document).ready(function() {
	$('.backtotop').click(function(){
		$('html, body').animate({scrollTop:0}, 'slow');
	});
});

created by leozera — 23 June 2011 — get a short url — tags: jquery — embed

placeholder attribute for inputs in IE

require jquery and modernizer

show/hide lines

   1  if(!Modernizr.input.placeholder){
   2  	$("input").each(function(){
   3  		if($(this).val()=="" && $(this).attr("placeholder")!=""){
   4  			$(this).val($(this).attr("placeholder"));
   5  			$(this).focus(function(){
   6  				if($(this).val()==$(this).attr("placeholder")) $(this).val("");
   7  			});
   8  			$(this).blur(function(){
   9  				if($(this).val()=="") $(this).val($(this).attr("placeholder"));
  10  			});
  11  		}
  12  	});
  13  }

if(!Modernizr.input.placeholder){
	$("input").each(function(){
		if($(this).val()=="" && $(this).attr("placeholder")!=""){
			$(this).val($(this).attr("placeholder"));
			$(this).focus(function(){
				if($(this).val()==$(this).attr("placeholder")) $(this).val("");
			});
			$(this).blur(function(){
				if($(this).val()=="") $(this).val($(this).attr("placeholder"));
			});
		}
	});
}

created by leozera — 08 March 2011 — get a short url — tags: browser hack ie jquery — embed

open all externals links in a new window

show/hide lines

   1  $('a[href*=http:]').each(function(){
   2          if (this.host != window.location.host) {
   3                  $(this).attr('target', '_new');
   4          }
   5  });

$('a[href*=http:]').each(function(){
        if (this.host != window.location.host) {
                $(this).attr('target', '_new');
        }
});

created by leozera — 13 February 2011 — get a short url — tags: jquery — embed

codestacker

codestacker is a community to share snippets easily!

Login

Login

you are in: codestacker → codes [RSS] → tag: jquery [RSS]

background animation

Send this to a friend

highlight an element

Send this to a friend

center vertically element

Send this to a friend

add to bookmarks using jquery

Send this to a friend

detecting ie version with jquery

Send this to a friend

simple jquery table sort

Send this to a friend

smooth scrolling

Send this to a friend

simple jquery scroll to top

Send this to a friend

placeholder attribute for inputs in IE

Send this to a friend

open all externals links in a new window

Send this to a friend