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

Browser detection using Jquery javascript

Posted in JQuery, Jquery interview questions
  1. Detect IE 8 and above:

           if( $.browser.msie && parseInt($.browser.version)>=8){
             alert("IE 8 and above");
           }
        
  2. Detect any version of internet explorer including IE 11.

           if(navigator.userAgent.indexOf("MSIE ") > -1 || navigator.userAgent.indexOf("Trident/") > -1){
             alert("internet explorer detected");
           }
        
  3. Detect IE 8 and above:

           if( $.browser.msie && parseInt($.browser.version)>=8){
             alert("IE 8 and above");
           }
        
  4. Detect Mozilla firefox

          if($.browser.mozilla){
           alert("Firefox detected");
          }
        
  5. Chrome and safari

         if($.browser.webkit){
            alert("browser detected");
         }
        
  6. Detect safari only

         if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
           alert('Its Safari');
         }
        
  7. Detect Mac

         if (navigator.userAgent.indexOf('Mac OS X') != -1) {
             alert("MAC found");
         }
        
  8. Detect any device (iphone, ipad, android, desktop)

          function getDevice() {
    	        var ua = navigator.userAgent;
    	        return (ua.indexOf('iPhone') != -1) ? 'iphone' : ((ua.indexOf('iPad') != -1) ? 'ipad' :       ((ua.indexOf('Android') != -1) ? 'android' : 'desktop'));
           }
    
          if(getDevice()=="android"){
             alert("android device");
          }
    
        

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

Opacity not working in ie8

Posted in CSS

opacity: 0 this css property is not working in internet explorer 8. For this find below hack for ie8.

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 filter: alpha(opacity=70);

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

difference between display:none and visibility:hidden

Posted in CSS, CSS Interview Questions

display:none means element in html page won’t appear on the page. The element will be in dom structure but it will be hidden. So position of element below current element which hidden will be shifted. Other elements will adjust there position automatically.

difference-display-none-and-visibility-hidden

 

In above figure, #div2 is having css property “display”:”none” so in the output #div3 is shifted upwords. Restriction is that all div’s should be relatively positioned. If div’s are absolutely positioned then there will not be any change in position’s of the div.

visibility:hidden means tag is not visible on the page but space is allocated for that element. It is same a opacity:0;

difference-visibility-hidden-and-display-none

 

In above figure, #div2 is having css property “visibility”:”hidden” so in the output #div3 position will remain as it is.

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

Merge objects in jquery $.extend

Posted in JQuery

$.extend is the method provided by jQuery to merge two objects.

Example:

var person={
   "name":"Suhas",
   "age": 23,

};

var employee={
   "ID":"23456",
   "designation":"Software Engineer"

}
var mergedObj=$.extend(person,employee)
console.log(mergedObj);

In above example, there are two objects person and employee. $.extend will merged properties of both objects and console.log will return following output.

Object {name: "Suhas", age: 23, ID: "23456", designation: "Software Engineer"}

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

Center align div using css

Posted in CSS

Center aligned div element in css. Use margin: 0 auto property to center align div and adjust width accordingly.

Example :

div{
     width:1024px;
     margin:0 auto;
     height: auto;
}

Center aligned div element using absolute position

Example :

div{
   position: absolute;
   width:1024;
   left: 0;
   right: 0;
   margin: auto auto;
}

Adjust width div will automatically center aligned to the document.