Don’t use jquery-latest.js

Yesterday jQuery Blog announced that not to use jquery-latest.js in production site ,

below is the excerpt of the blog post

Earlier this week the jQuery CDN had an issue that made the jquery-latest.js and jquery-latest.min.js files unavailable for a few hours in some geographical areas. (This wasn’t a problem with the CDN itself, but with the repository that provides files for the CDN.) While we always hope to have 100% up-time, this particular outage emphasized the number of production sites following the antipattern of using this file. So let’s be clear: Don’t use jquery-latest.js on a production site.

Complete Post here

Using jquery-latest.js from a CDN has a danger of any bug or regression introduced in latest version , so it’s always safe to validate the version of jquery before using in production

HTML5 input type = “Search” implemented in jquery for cross browser support

HTML5 input type “search” is not supported by all the available browsers yet,

So this is a jquery alternative to this html5 feature

for a demo , visit jsFiddle


<table border="1">
<tr>
<td>Normal :</td>
<div><input type="text" /></div>
</tr>
<tr>
HTML5 :
<div><input type="search" id="searchField" /></div>
</tr>
<tr>
<td>jQuery :</td>
jqSearchField" />
</tr>
</table>

 

 


$.widget('iCircle.searchInput', {

options: {},

_create: function () {

var thisElem = this.element;

var wrapper = $("
<div>").css({position:"relative",display:"inline-block"});</div>
thisElem.wrap(wrapper);

// after $.wrap() methed wrapper will have no reference to the DOM Element of wrapper
// so targetElem.parent() will return the wrapper jquery object
wrapper = thisElem.parent();

// draw closebtn
var closeBtnRight = thisElem.outerHeight() - thisElem.innerHeight();
var closeBtnLineHeight = wrapper.height();
var closeBtn = $("").html("X").
css({ position:"absolute",
"font-family": "sans-serif",
right:closeBtnRight+"px",
lineHeight:closeBtnLineHeight+"px",
color:"#0059A0",
visibility:"hidden",
cursor:"pointer"
}).
appendTo(wrapper);

// reduce width and add padding to avoid overlapping on closeBtn
var thisElemWidth = thisElem.width()-closeBtn.outerWidth();
var thisElemMargin = thisElem.css("margin");
thisElem.css({"width":thisElemWidth,margin:thisElemMargin,"padding-right":closeBtn.outerWidth()});

// add click handler to closeBtn
closeBtn.click(function(){
console.log("Click");
thisElem.val("");
});

// add logic to show or hide the close btn
thisElem.keyup(function(){
console.log("keyup");
if(thisElem.val() == ""){
closeBtn.css("visibility","hidden");
}else{
closeBtn.css("visibility","visible");
}
});

wrapper.mouseenter(function(){
console.log("mouseover");
if(thisElem.val() == ""){
closeBtn.css("visibility","hidden");
}else{
closeBtn.css("visibility","visible");
}
});

wrapper.mouseleave(function(){
console.log("mouseleave");
if(!(thisElem.is(":focus"))){
closeBtn.css("visibility","hidden");
}
});

}

});

$("#jqSearchField").searchInput();