Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

JQuery inArray() function

Posted in JQuery, Jquery interview questions

jquery inarray function
jQuery inArray() function is used to find specific value in array. If value is present in array then it returns index of that value in array and if value is not present then it returns -1.

Example:
Consider an array which contains numbers. if we want to find number 6 in array then use inArray() function.

var numbers=[3,4,5,6,712,45]
if($.inArray(6,numbers)!=-1){
    console.log("Element is at index", + $.inArray(6,numbers));
}else{
 console.log("Element not found");
}

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Window scroll animation using jQuery

Posted in JQuery, Jquery interview questions, Tutorials

It is possible to control scroll behavior of document using JQuery. Use jQuery scrollTop() method to scroll a html page. scrollTop() method returns vertical position of selected element.
Parameters:

  • scrollTop(): returns vertical scroll position of selected element.
  • scrollTop(value): sets scroll bar position to value in pixels.

Example:

$("#div1").scrollTop(300)

Animate scrollTop:

To animate scrollTop() use jQuery animate() method.

Example:

       $('html, body').stop().animate({
            scrollTop: $(link).offset().top
       }, 1000);

Here, link is the id of element to which you want to scroll a page. If you want to scroll a page at particular paragraph or div on click of link use below code.
<a href=”#”>scroll</a>

   $("a").click(function(e) {
        var link = $(this).attr('href');
        if ((link.charAt(0) == "#") && (link.length > 1)) {
             e.preventDefault();
             $('html, body').stop().animate({
                    scrollTop: $(link).offset().top
             }, 1000);
        }
   });

Above code will not work in IE 8. Below is the IE 8 fix to animate scrollTop()

    $("a").click(function(e) {
         var target = $(this.hash);
         target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
         var $main = $('html,body');
         e.preventDefault();
         $main.stop().animate({
               scrollTop: target.offset().top - ($main.offset().top - $main.scrollTop())
          }, 500);
     }); 

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

JQuery each() method

Posted in JQuery, Jquery interview questions

each() method in jquery is used to iterate an array of elements or numbers. This can also be used to iterate array of objects.

jquery-each-method

Parameters:

  • index: index of element or object in array.
  • value: value of element or object in array.
  • array: contains elements or objects.

Example:


$(".ele").each(function(index, value){
    console.log("element at "+ (index)+ " position is " + value);
});

In above example, there are some div’s with class name “ele”. We can iterate all div’s with class “ele” using each method.

Alternative syntax:

jquery-each-syntax

Iterating array of objects.
Consider an example of a employee object.

var employee={
      "name": "John",
      "age":23,
     "designation":"software engineer"
}

Now, we are creating employee’s array which contains of all employee objects.

var employees=[
  {
      "name": "John",
      "age":23,
     "designation":"software engineer"
  },
  {
      "name": "Michel",
      "age":32,
      "designation":"Finance manager"
  },
  {
      "name": "Xira",
      "age":28,
      "designation":"HR recruiter"
  }
]

Now apply $.each method to iterate employees array to get each employee info.

$.each(employees,function(index,value){
   console.log("Name: " + value.name)
   console.log("Age: "+value.age)
   console.log("Designation: " + value.designation);
});

Above example will return information of each employee.