jQuery Repo

Wednesday, 26 June 2013

Find out if you browser supports HTML5 or not

HTML5 is the future of the web so one can start implementing it from now onwards as some of the browsers are compatible with it(not completely). However, while implementing you should take care of those browsers also which are not compatible with HTML5.

The are several ways to detect whether your browser supports HTML5 element or not.

The easiest way to do so is to use “Modernizr”. It is an open source , MIT Licensed Javascript library that detects support for many HTML5 and CSS3 features. You can download it from here

Using Modernizr to detect HTML5 Elements is very simple. In the head part we have to insert this

It will create a global object called “Modernizr” which contain some boolean properties for each feature it can detect.

For example if we want to detect Canvas element

if (Modernizr.canvas) {

// Canvas support available

}

else {

// Canvas support not available

}

You can refer to http://www.modernizr.com/ for the list of features that Modernizr supports.

2.If the feature you want to detect is not in the list then you can do something like this

function isCanvasSupport() {

return !!document.createElement('canvas').getContext; }

It will create a dummy canvas element after that it will check for getContext() method this method will only exist if your browser supports the canvas API The double negation sign (!!) will force the result to boolean

3. There is one more way to do the same in a way it is the exact replica of the above

var supportCanvas = 'getContext' in document.createElement('canvas');

if(supportCanvas) {

//Do Something

}

else {

//Do something

}

You can use any of the above mention methods. These will be helpful for fixing compatibility issues as currently only few browsers are compatible with HTML5.

Reference : http://www.mindfiresolutions.com

Good Luck.. :)

CSS hack for Safari Browser

In the current situation it's a challenging task for the web developers to build websites which is compatible with different and popular browsers available (like IE, Firefox, Mozilla, Safari, Google Crome, Opera etc...)

Different browsers have their different ways of serving the web page content and may create problem while using some CSS properties to get a desired output. To avoid these kinds of problems there is are solutions which are called "CSS hacks" and which are also different for different browsers. Using CSS hack is not recommended as per the W3C validation rules but in some cases we have to use them to get our task done. I knew about CSS hack for IE, Firefox but I came across CSS hack for Safari which I was not aware of and as Safari is one of the mostly used browser in world so I think this information might help others as well to overcome from these kind of browser compatibility issues.

While working on one of my projects I faced a problem where Safari browser was not supporting one of CSS properties and was distrorting the layout, however, it was worknig fine in IE and Firefox. To fix this I had to use a CSS hack for Safari. Here is an simple example which you can test quickly and see the difference.

- Create an HTML file and name as you want, then copy and paste the following code to your file:

<html>
   <head>
       <title>Safari CSS Hack Example</title>
       <style type="text/css">
           body {
               background-color: #FF00FF;
               font-family:Arial, Helvetica, sans-serif;
               color: #fff;
               font-size:14px;
               font-weight:bold;
           }
           @media screen and (-webkit-min-device-pixel-ratio:0) {body {background-color: #FF6500;}}
       </style>
   </head>
   <body>
       <p>
           The page background will show orange in Safari 3+, Chrome and Opera (< 9.5) browsers. In all other browsers it should show pink.       </p>
   </body>
</html>

- Now try opening the file in Firefox/IE and Safari and see the difference. The page background is different in Safari from the background shown in IE.

If you look in web for CSS hack for Safari then you might find different ways like using body:nth-of-type(1) or body:first-of-type which can be used to apply specific CSS property for Safari but these properties are also supported by Firefox 3.5x.

So here the CSS hack I have used is "@media screen and (-webkit-min-device-pixel-ratio:0) " and here are the few stpes how to use it:

- You don't need write your entire class inside "@media screen and (-webkit-min-device-pixel-ratio:0){}". As shown in the above example you can just write the required property that you want to apply for Safari. In the above example from the all of the CSS properties of body I want to only change the background-color for Safari so I just specified the CSS classname/ID and the property with different values.

- I also noticed one more limitation which you might need to be careful while using this is the way it is written needs to stay like this which means your new property needs to be written in between "@media screen and (-webkit-min-device-pixel-ratio:0){}" but if you are using any code minifier to minify your CSS file then it will try to remove the extra spaces used which will create problem and this property will not be effective.

Reference : http://www.mindfiresolutions.com

Good Luck...

Saturday, 22 June 2013

Tips to use jQuery selectors efficiently

It is pretty important to understand how to write efficient element selection statement. One has to be very careful while jquery selector statement. Below are some tips on how to use your jQuery selectors efficiently.

1. Always try to use ID as selector

You can use ID as selector in jQuery. See below jQuery code.

`1`	`$("#elmID");`

When IDs are used as selector then jQuery internally makes a call to getElementById() method of Java script which directly maps to the element.

When Classes are used as selector then jQuery has to do DOM traversal.So when DOM traversal is performed via jQuery takes more time to select elements. In terms of speed and performance, it is best practice to use IDs as selector.

2. Use class selector with tags

You can use CSS classes as selector. For example, to select elements with "myCSSClass" following jQuery code can be used.

`1`	`$(".myCSSClass");`

As said earlier, when classes are used DOM traversal happens. But there could be a situation where you need to use classes as selector. For better performance, you can use tag name with the class name. See below

`1`	`$("div.myCSSClass");`

Above jQuery code, restricts the search element specific to DIV elements only.

3. Keep your selector simple, don't make it complex

Avoid complex selectors. You should use make your selectors simple, unless required.

`1`	`$("body .main p#myID em");`

Instead of using such a complex selector, we can simplify it. See below.

`1`	`$("p#myID em");`

4. Don't use your selector repeatedly.

See below jQuery code. The selectors are used thrice for 3 different operation.

1$("#myID").css("color", "red");

2$("#myID").css("font", "Arial");

3$("#myID").text("Error occurred!");

The problem with above code is, jQuery has to traverse 3 times as there are 3 different statements.But this can be combined into a single statement.

`1`	`$("p").css({` `"color":` `"red",` `"font":` `"Arial"}).text("Error occurred!");`

5. Know how your selectors are executed

Do you know how the selectors are executed? Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class ".myCssClass" and after that it will reject all the other elements which are not in "p#elmID".

1$("p#elmID .myCssClass");

Reference :http://jquerybyexample.blogspot.com