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

Browser hacks using CSS

Posted in CSS, CSS Interview Questions

With reference to my previous post Browser detection using Jquery javascript we can apply browser specific CSS to HTML elements.

Use CSS hacks below.

Chrome:

    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
        .header{
          width: 230px;
        }
    }

Safari:

     @media screen and (-webkit-min-device-pixel-ratio:0) {
        .header{
          width: 230px;
        }
     }
                     OR

     @media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
        .header{
           width: 230px;
        }
      }

Firefox:

     @-moz-document url-prefix() {
        .header{
          width: 230px;
        }
     }

IE10 & IE11:


      @media all and (-ms-high-contrast:none)
       {
           .header { color: green } /* IE10 */
           *::-ms-backdrop, . header { color: red } /* IE11 */
       }

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