Home>

23. jquery delayed loading function

Want to delay something?

$(document) .ready (function () {
 window.settimeout (function () {
  //do something
 }, 1000);
});

24. Remove word function

Want to remove a certain word (s)?

$(document) .ready (function () {
 var el=$("#id");
 el.html (el.html (). replace (/word/ig, ""));
});

25. Verify that the element exists in the jquery object collection

Simply test with the .length property if the element exists.

$(document) .ready (function () {
 if ($("#id"). length) {
 //do something
 }
});

26. Make the entire div clickable

Want to make the complete div clickable?

$(document) .ready (function () {
 $("div"). click (function () {
  //get the url from href attribute and launch the url
  window.location=$(this) .find ("a"). attr ("href");return false;
 });
//how to use
<div><a href="index.html">home</a></div>
});

27. Conversion between id and class

When changing the window size, switch between id and class

$(document) .ready (function () {
 function checkwindowsize () {
 if ($(window) .width ()>1200) {
  $("body"). addclass ("large");
 }
 else {
  $("body"). removeclass ("large");
 }
 }
$(window) .resize (checkwindowsize);
});

28. Cloning Objects

Clone a div or an other element.

$(document) .ready (function () {
 var cloned=$("#id"). clone ();
//how to use
<div id=id></div>
});

29. Center element on screen

Center an element in the center of your screen.

$(document) .ready (function () {
 jquery.fn.center=function () {
  this.css ("position", "absolute");
  this.css ("top", ($(window) .height ()-this.height ())/2 + $(window) .scrolltop () + "px");
  this.css ("left", ($(window) .width ()-this.width ())/2 + $(window) .scrollleft () + "px");
  return this;
 }
 $("#id"). center ();
});

30. Write your own selector

Write your own selectors.

$(document) .ready (function () {
 $.extend ($. expr [":"], {
  morethen1000px:function (a) {
   return $(a) .width ()>1000;
  }
 });
 $(". box:morethen1000px"). click (function () {
  //creating a simple js alert box
  alert ("the element that you have clicked is over 1000 pixels wide");
 });
});

31. Number of statistical elements

Count an element.

$(document) .ready (function () {
 $("p"). size ();
});

32. Use your own bullets

Want to use your own bullets instead of using the standard or images bullets?

$(document) .ready (function () {
 $("ul"). addclass ("replaced");
 $("ul>li"). prepend ("‒");
 //how to use
 ul.replaced {list-style:none;}
});

33. Reference the jquery library on google host

Let google host the jquery script for you. This can be done in 2 ways.

//example 1
<script src="http://www.google.com/jsapi"></script>
<script type=text/javascript>
google.load ("jquery", "1.2.6");
google.setonloadcallback (function () {
 //do something
});
</script>
 //example 2:(the best and fastest way)
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"<&/script>

34. Disable jquery (animation) effect

Disable all jquery effects

$(document) .ready (function () {
 jquery.fx.off=true;
});

35. Conflict resolution with other javascript libraries

Avoidto avoid conflict other libraries on your website, you can use this jquery method, and assign a different variable name instead of the dollar sign.

$(document) .ready (function () {
 var $jq=jquery.noconflict ();
 $jq ("#id"). show ();
});
  • Previous Menu for Android Development
  • Next PHP simply uses PDO in the database abstraction layer