Tag Archive for jquery

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

Searching of all nodes on page for particular piece of text

/*This useful extended function will allow you to 
pattern match a keyword across all the nodes in a 
page. See the example below for how GMail use something 
similar in concept for their search-keyword highlighting*/  
  
$.fn.egrep = function(pat) {  
 var out = [];  
 var textNodes = function(n) {  
  if (n.nodeType == Node.TEXT_NODE) {  
   var t = typeof pat == 'string' ?  
    n.nodeValue.indexOf(pat) != -1 :  
    pat.test(n.nodeValue);  
   if (t) {  
    out.push(n.parentNode);  
   }  
  }  
  else {  
   $.each(n.childNodes, function(a, b) {  
    textNodes(b);  
   });  
  }  
 };  
 this.each(function() {  
  textNodes(this);  
 });  
 return out;  
};  
  
// Here's an example of using this to highlight  
//all the nodes on the page that contain the keyword  
//'jQuery'  
$("#testbutton").click(function()  
{  
var n = $('body').egrep(/jquery/i); 
for (var i = 0; i < n.length; ++i) 
{ 
   void($(n[i]).css('background', 'yellow'));  
 }  
});

source

How to retain information stripped from the DOM by .remove()

//In the below example  
$("p").click(function(){  
      $(this).toggleClass("off");  
    });  
    var p;  
    $("button").click(function(){  
      if ( p ) {  
        p.appendTo("body");  
        p = null;  
      } else {  
        p = $("p").detach();  
      }  
    });

source

jsCookies – my simple easy pure js javascript cookies function

//  create my jsCookies function
var jsCookies = {

	// this gets a cookie and returns the cookies value, if no cookies it returns blank ""
	get: function(c_name) {
		if (document.cookie.length > 0) {
			var c_start = document.cookie.indexOf(c_name + "=");
			if (c_start != -1) {
				c_start = c_start + c_name.length + 1;
				var c_end = document.cookie.indexOf(";", c_start);
				if (c_end == -1) {
					c_end = document.cookie.length;
				}
				return unescape(document.cookie.substring(c_start, c_end));
			}
		}
		return "";
	},

	// this sets a cookie with your given ("cookie name", "cookie value", "good for x days")
	set: function(c_name, value, expiredays) {
		var exdate = new Date();
		exdate.setDate(exdate.getDate() + expiredays);
		document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + exdate.toUTCString());
	},

	// this checks to see if a cookie exists, then returns true or false
	check: function(c_name) {
		c_name = jsCookies.get(c_name);
		if (c_name != null && c_name != "") {
			return true;
		} else {
			return false;
		}
	}

};
// end my jsCookies function

// USAGE - get    ::   jsCookies.get("cookie_name_here");  [returns the value of the cookie]
// USAGE - set    ::   jsCookies.set("cookie_name", "cookie_value", 5 );  [give name, val and # of days til expiration]
// USAGE - check  ::   jsCookies.check("cookie_name_here");  [returns only true or false if the cookie exists or not]

source

js jQueryLoader – check if $ is undefined, then load jquery with pure javascript if needed

/* I used to use (!$) or ($ == undefined) but that doesn't work sucka! */

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

HTML5 Basic Template (w /Google Load)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Webpage Title</title>
<meta charset="utf-8" />
<script src="<a href="http://www.google.com/jsapi"></script>" >http://www.google.com/jsapi"></script></a>
<!--[if lt IE 9]>
<script src="<a href="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>" >http://html5shiv.googlecode.com/svn/trunk/html5.js"></script></a>
<![endif]-->
<script>
  google.load("jquery", "1.4.2");
</script>
</head>
<body>

</body>
</html>

source