RSS

Category Archives: jQuery

Creating Custom Selector in JQuery

JQuery custom selectors are very powerful. This allows you to write custom selectors that are fulfilling needs for your script domain. This makes repetitive complex selector logic much intention revealing and more succinc.
Custom selectors are just like other selectors that selects DOM elements with criteria defined by yourself. Most of the time they just allows you to write more succinct code that will enhance code reuse.
Say if you want to select hyperlinks that point to pdf files and give indication of them with icon you can achieve it with CSS selectors. Particular CSS that is used are indicated below.
jquery custom selector

• Please note for demo purpose I have not spent much time formatting the page

a[href $='.pdf'] { 
background: url("../Images/pdf-icon.jpg") no-repeat scroll right center / 20px auto rgba(0, 0, 0, 0);   
padding-right: 30px; //this padding will universally accommodate the pdf icon
}
 

For above code browser support is not bad either according to here. http://www.quirksmode.org/css/selectors/
However for demo purpose regarding custom JQuery selectors I am achieving the same using JQuery which is however not the better way but I saw that I had used it for one of my old project which I saw when I was doing maintenance fix.

jQuery.noConflict();

(function($) {
	$.extend($.expr[':'], {pdfLinks : function(o) {
		if (typeof o.href !== "undefined") {
			var link = o.href;
			return link.indexOf("pdf", link.length - 3) !== -1;
		}
		return false;
	}});
	
	$("a:pdfLinks").addClass('pdfIcon');
})(jQuery);
.pdfIcon {
	background: url("../Images/pdf-icon.jpg") no-repeat scroll right center / 20px auto rgba(0, 0, 0, 0);
	padding-right: 30px;
}

It is that $.extend does the job of extending JQuery to use the custom selector. In above CSS class we give additional padding of 30px to the right of the selected links so that there is a space to include background pdf icon.

 
Leave a comment

Posted by on May 27, 2014 in Javascript, jQuery

 

Safer Way of using JQuery – $ Sign to Avoid Conflics with Other Libraries

Due to dynamic nature in variable declarations and usage in JavaScript it is very easy that one of your variables get overwritten by scripts in other locations. This is very common for global variables so you must avoid using global variables. Many senior developers avoid using global variables but when using JQuery many unaware that they are using $ sign which is a large global variable. However there might be custom libraries or custom script files that use $ sign for their functional object roots.
Much safer option when using JQuery is to use “noConflict” method which will overcome this problem.
You can use the code like following to live with scripts that use $ sign for their own purpose.

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);

Here is what the above code does.
During JQuery initialization it will do a sort of backup of “$” sign named object if there is already a one defined. So in this case if you had another library that use $ sign that object will be internally preserved when after JQuery initialized. So to restore the $ sign back you can use jQuery.noConflict();
This will essentially reverts $ sign to other library but which also introduces another annoyance. You are most likely not willing to use “jQuery” instead of much succinct “$” sign when scripting. So to avoid that you can use following technique which will again remap $ sign to JQuery but inside the anonymous function scope but not in the global window scope. So this will allow to use $ in JQuery scripting as usual.

 (function( $ ) {
  $(function() {
    // Jquery coding using $ as alias to jQuery without polluting global $ 
  });
})(jQuery);

Remember this code will also restore $ sign of JQuery itself if your output has accidentally referred multiple JQuery files or multiple versions of JQuery.

 
Leave a comment

Posted by on April 30, 2014 in Javascript, jQuery

 

Tags: ,