Wed. Oct 16th, 2019

Codes

Codes for Coders

10 tips and tricks Javascript and Jquery for Developers

2 min read
10 tips and tricks Javascript and Jquery Rishap Gandhi

10 tips and tricks Javascript and Jquery Rishap Gandhi

Today will be see some tips and tricks of JavaScript and JQuery.

1. Alternate way of Document Ready

//Instead of
$(document).ready(function() {
//document ready
});
//Use
$(function(){
//document ready
});

2. Counting immediate child elements
If you want to count all the DIVs present in the element #foo

<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>

//jQuery code to count child elements
$("#foo > div").size()

3. Center an element on the Screen

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;
}

//Use the above function as:
$(element).center();

4. Disable right-click contextual menu
There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

5. Get mouse cursor x and y axis
This script will display the x and y value – the coordinate of the mouse pointer.

$().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

<p></p>

6. Fadeout Slideup effect to remove an element
Combine more than one effects in jQuery to animate and remove an element from DOM.

$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.01, function(){ //fade
$(this).slideUp("slow", function() { //slide up
$(this).remove(); //then remove from the DOM
});
});
});

7. Checking if an element exists
Use following snippet to check whether an element exists or not.

if ($("#someDiv").length) {
//hooray!!! it exists...
}

8. Alternate way of Document Ready

//Instead of
$(document).ready(function() {
//document ready
});
//Use
$(function(){
//document ready
});

9. The $.proxy()
One of the drawbacks to using callback functions in jQuery has always been that when they are executed by a method of the library, the context is set to a different element. For example, if you have this markup:

<div id="panel" style="display:none">
<button>Close</button>
</div>

And you try to execute this code:

$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});
});

You will run into a problem – the button will disappear, not the panel. With $.proxy, you can write it like this:

$('#panel').fadeIn(function(){
// Using $.proxy to bind this:

$('#panel button').click($.proxy(function(){
// this points to #panel
$(this).fadeOut();
},this));
});

Which will do what you expect. The $.proxy function takes two arguments – your original function, and a context. It returns a new function in which the value of this is always fixed to the context. You can read more about $.proxy in the docs.

10. Getting Parent DIV using closest
If you want to find the wrapping DIV element (regardless of the ID on that DIV) then you’ll want this jQuery selector:

$("#searchBox").closest("div");
10 tips and tricks Javascript and Jquery

Leave a Reply

Your email address will not be published. Required fields are marked *