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

Get contents of iframe using JQuery

Posted in JQuery, Jquery interview questions

Iframe is an HTML tag. Iframe is used to another document in current HTML document.

How to get contents of iframe?
JQuery provides contents() function to fetch contents from iframe.

Example:

    <iframe id="webFrame"></iframe>
    var iframeContents= $("#webFrame").contents();

iframe

As shown in above figure, there is an iframe with id=’editor’. We have to find a div with id=’banner’ inside iframe. Refer code below to achieve this.

Example:

   var banner=$("#webFrame").contents().find("body").find("#banner");

In above code, you won’t get any content in banner variable. You should write this code inside load() event of iframe and it should be inside document.ready function.

Example:

  $(document).ready(function(){
    $("#webFrame").load(function(){
      var banner=$("#webFrame").contents().find("body").find("#banner");
    });
  });

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

Document Object Model (DOM)

Posted in Javascript, javascript interview questions, JQuery, Jquery interview questions

DOM is a hierarchy of HTML tags. It represents arrangement of HTML tags in a web page. The DOM provides the information needed for JavaScript to communicate with the elements on the web page. The DOM also provides the tools necessary to navigate through, change, and add to the HTML on the page.

HTML Document:
HTML document

The above HTML document can be represented in the form of a document tree which is called “document object model” is shown below. Each leaf on the tree is called as node which directly relates to each element on a page. When a node appears inside another node of a tree it is considered as a child node of that node.

Structure of DOM:
DOM

JavaScript provide several ways to select DOM elements, change style of the elements, remove element from DOM, add elements to DOM.

How Do I Access the DOM?

To access DOM elements use JavaScript in-built functions.

Example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id=" header">This is header</h1>
<script>
  var x=document.getElementById("header");
  alert(x.innerHTML);
</script>

</body>
</html>

There are several document functions to select DOM elements like document.getElementsByTagName(), document.createElement(“div”) etc.

Problem with JavaScript Selectors:

To select DOM elements using JavaScript, developers need to write huge code. JQuery solves these problems and provides easy-to-use, cross-browser compatible ways of selecting and working with page elements. We can use JQuery Selectors to modify above code. JQuery reduces developer’s efforts to select and perform any operation on DOM elements.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
  alert($("#header").html());
});
</script>

</head>
<body>
<h1 id=" header">This is header</h1>
</body>
</html>

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

$.map JQuery function

Posted in JQuery, Jquery interview questions

$.map converts existing array into new array. If you want to process elements in an array then use $.map .

Syntax:

jQuery-map-function

Example:

var arr=[1,2,3,4];
$.map (arr, function (n) {
  return  n + 1;
});

In above example, $.map returns an array with each element value incremented by 1. You can process each value in existing array using $.map.

Note: There is difference between $.map and $.each function. $.each returns original array whereas $.map returns processed (new) array.
Below is the illustration of difference between $.map and $.each function.

jquery-map-and-jquery-each-difference

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

Preload images using jQuery

Posted in JQuery, Jquery interview questions

preloading
In your web applications, if you are using lot of images also if there are some hover, slider, animation effects then those are not working properly when you load page first time. The reason is images take some time to load. To overcome this use image preloading. When images are preloaded in the browser, user can visit entire application seamlessly with faster loading experience. You can preload images using javascript, css. See below example.

var imagesArray=["abc.png","slider_1.png","slider_2.png","slider_3.png"];

Create an array of images which you want to preload. Iterate through each image and create image object and assign imagePath to image object. In this case, you are just making a request for image to server for each newly created image object. This image object is of no use, we are using this just for pre-loading purpose.

var imagePath="/images/";
var totalImages= imagesArray.length;

$.each(imagesArray, function(index, value){
    var img= new Image();
    img.src=imagePath+value;
    console.log("Image "+ value +"  is loaded");
    var percentImagesLoaded= ((index+1)/totalImages)*100;
    console.log("Loading: "+ percentImagesLoaded);

   /*
    * code to hide loading image
    */
   // if(percentImagesLoaded==100){
       // hide loading image
   // }
});

You can show a image preloader while images are loading. Create a dummy div which will show loading image and after all images are loading then hide this dummy div.

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