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

Search object in an array

Posted in Javascript, JQuery

You can find any element in an array based on index of that element. But what if you want to find an object in an array of objects based on any of the property. You can use filter function of JQuery.

JQuery filter (selection) function returns an element or array of elements that matches specified criteria. If provided selection parameter matches with any of the element in an array it returns that particular element or array of elements.

Example:

  $(selector).filter (selection, function(index){
       // Process elements here
  })
    Selector is a set of DOM elements or array of objects.
    Selection is a filter parameter which is used to match with the elements in array.
    function(index) is a callback function which used to process the elements in filtered array.

Example:

Consider an example of employee’s data. Find list of employee’s based on their age.

    var employees=[
        {name:"George", age:32, retiredate:"March 12, 2014"},
        {name:"Edward", age:17, retiredate:"June 2, 2023"},
        {name:"Christine", age:58, retiredate:"December 20, 2036"},
        {name:"Sarah", age:62, retiredate:"April 30, 2020"}
   ];

   var age=32;
   var employeesFound = employees.filter(function(obj) {
    return obj.age== age;
   });

In above case, employeesFound array contains an employee object with an age of 32. You can find employees with age greater than 32.

    var employeesFound = employees.filter(function( obj) {
     return obj.age> age;
    });

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.

Disable auto zoom effect on orientation IPAD Safari

Posted in Javascript, JQuery

You might face automatic zoom-in effect in IPAD if you change it’s orientation. For that you can use HTML 5 “deviceorientation” event. In this event you can check whether device is in landscape or portrait mode. Accordingly, set meta tag based on orientation of the device. See below example

Detect device orientation


     $(window).on("deviceorientation", function( event ) {
		if (window.matchMedia("(orientation: portrait)").matches) {
			alert("Device is in portrait mode")
		}
		if (window.matchMedia("(orientation: landscape)").matches) {
			alert("Device is in landscape mode")
		}
	});


Disable auto zoom in IPAD

    $(window).on("deviceorientation", function( event ) {
		if (window.matchMedia("(orientation: portrait)").matches) {
                   $("meta[property=metainf]").attr("content","width=device-width, initial-scale=1, maximum-scale=0.74, user-scalable=no");
		}
		if (window.matchMedia("(orientation: landscape)").matches) {
	           $("meta[property=metainf]").attr("content","width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no");
		}
   });

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

Check device orientation using JQuery

Posted in Javascript, JQuery

If you are developing a mobile website you will definitely check it in both landscape and portrait mode. For that you can use HTML 5 “deviceorientation” event. Using this you can check whether your device is in portrait and landscape mode.

Example:


     $(window).on("deviceorientation", function( event ) {
		if (window.matchMedia("(orientation: portrait)").matches) {
			alert("Device is in portrait mode")
		}
		if (window.matchMedia("(orientation: landscape)").matches) {
			alert("Device is in landscape mode")
		}
	});


Here, we have used window.matchMedia() function. We can write media queries in javascript using window.matchMedia(). It returns a MediaQueryList object containing some functions and properties. “matches” property is a boolean parameter it is used to match media queries.

You might face automatic zoom-in effect in IPAD if you change it’s orientation. For that you can set meta tag based on orientation of the device. See below example

    $(window).on("deviceorientation", function( event ) {
		if (window.matchMedia("(orientation: portrait)").matches) {
                   $("meta[property=metainf]").attr("content","width=device-width, initial-scale=1, maximum-scale=0.74, user-scalable=no");
		}
		if (window.matchMedia("(orientation: landscape)").matches) {
	           $("meta[property=metainf]").attr("content","width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no");
		}
   });

Initial-scale should be “1” to avoid automatic zoom-in and zoom-out effect in ipad or any other devices. So only play with maximum-scale and minimum-scale accordingly.