Tag Archive for jquery

Case insensitive jQuery :contains selector

// For jQuery 1.2

jQuery.extend(
    jQuery.expr[':'], { 
        Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0" 
});


// For jQuery 1.3 (thanks @user95227) and later you need

jQuery.expr[':'].Contains = function(a,i,m){
     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

source

Only allow AJAX for a HTTP Request

// If the request did not come from AJAX, exit:
if($_SERVER['HTTP_X_REQUESTED_WITH'] !='XMLHttpRequest'){
	exit;
}

source

Alt image loaded script

// $('img.photo',this).imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images

// mit license. paul irish. 2010.
// webkit fix from Oren Solomianik. thx!

// callback function is passed the last image to load
//   as an argument, and the collection as `this`


$.fn.imagesLoaded = function(callback){
  var elems = this.filter('img'),
      len   = elems.length;
      
  elems.bind('load',function(){
      if (--len <= 0){ callback.call(elems,this); }
  }).each(function(){
     // cached images don't fire load sometimes, so we reset src.
     if (this.complete || this.complete === undefined){
        var src = this.src;
        // webkit hack from <a href="http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f" >http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f</a>
        // data uri bypasses webkit log warning (thx doug jones)
        this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        this.src = src;
     }  
  }); 

  return this;
};

source

Using Input Title As Initial Text – Hide When On Focus

function watermark ($obj) {
				
	var prev;
	
	$obj.each(function() {
		if ($(this).attr("title"))	$(this).val($(this).attr("title")).addClass("greyout");
	});
	
	$obj
		.focus(function()
			{
				if ($(this).val()==$(this).attr("title")) {
					prev = $(this).val();
					$(this).val("").removeClass("greyout");
				}
			})
		
		.blur(function()
			{
				if($(this).val()=="") {
					$(this).val(prev).addClass("greyout");;
				}
			});

}

source

Jquery – Slideshow

// slideshow
 var currentPosition = 0;
 var slideWidth = 700;
 var slides = $('.slide');
 var numberOfSlides = slides.length;
 // Remove scrollbar in JS - It is added in CSS for user how does not have js enable
 $('.slidesContainer').css('overflow', 'hidden');
 // Wrap all .slides with #slideInner div
 slides // variable slides = .slide
 .wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : slideWidth});
 // Float left to display horizontally, readjust .slides width
 /* 
 Set #slideInner width equal to total width of all slides
 #slideInner wraps all of our slides that has a width equal to total width of all .slide div.
 */
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  
  // Insert left and right controls (with class names of .control) for user navigation;
    $('.slideshow')
      .prepend('<span class="control" id="leftControl">Move left</span>')
      .append('<span class="control" id="rightControl">Move right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control')
      .bind('click', function(){
      // Determine new position
        currentPosition = ($(this).attr('id')=='rightControl')
      ? currentPosition+1 : currentPosition-1;

        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
          'marginLeft' : slideWidth*(-currentPosition)
        });
      });

    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position){
      // Hide left arrow if position is first slide
      if(position==0){ $('#leftControl').hide() }
      else{ $('#leftControl').show() }
      // Hide right arrow if position is last slide
      if(position==numberOfSlides-1){ $('#rightControl').hide() }
      else{ $('#rightControl').show() }
      }

});

source

Scroll To Top

// javascript
$(function() {
  $window = $(window);
  $link = $("#scrollToTop"); // your link to show when user scrolls down
$link.click(function() {
 $("html, body").animate({ scrollTop: 0 }, "slow"); // this is the gist of the script, scroll to top (scrollTop: 0)
});

$window.scroll(function() {
   if ($window.scrollTop() <= 0) {
     $link.fadeOut("fast");
   } else {
     $link.fadeIn("fast");
     }
})

// css
#scrollToTop:link, 
#scrollToTop:visited {
  display: none;
  position: fixed;
  top: 15px;
  right: 15px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  background: #ccc;
  color: #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

source

jquery console.log

jQuery.fn.log = function (msg) {
      console.log("%s: %o", msg, this);
      return this;
  };

source

jQuery dynamic loader – load jquery using pure js javascript if jQ is undefined or does not exist

// jQuery dynamic loader - load jQuery using pure javascript js
// if jQuery is undefined or does not exist, then load it

if ( !window.jQuery ) {
	var jqscript = document.createElement('script');
	jqscript.setAttribute("type", "text/javascript");
	jqscript.setAttribute("src", "<a href="http://code.jquery.com/jquery.min.js");" >http://code.jquery.com/jquery.min.js");</a>
	document.getElementsByTagName("head")[0].appendChild(jqscript);
};

source

javascript function within a function to repeat itself js jquery jq loop looping

// animation functions
		zlpFX = {
			show1: function() {
				$('div#mainBackground2').fadeOut(3000);
				$('div#transMoving').animate({
					paddingLeft: "180px",
					paddingTop: "20px"
				},
				4000).find('h3').fadeOut(2000);
				setTimeout("zlpFX.show2()", 14000);
			},
			show2: function() {
				$('div#mainBackground2').fadeIn(4000);
				$('div#transMoving').animate({
					paddingLeft: '220px',
					paddingTop: '75px'
				},
				4500).find('h3').fadeIn(6000);
				setTimeout("zlpFX.show1()", 14000);
			}
		};




		// now start the animation functions
		setTimeout("zlpFX.show1()", 11000);

source

How to namespace your event handlers

$("div").bind("click.plugin", someFn);  
$("div").bind("focus.plugin", otherFn);  
$("div").unbind(".plugin");

source