Skip to main content

Essential steps for cross browser compatible Javascript

Working with javascript opens up a whole set of possibilities for web developers. But at the same time, web developers have to deal with bunch of new issues when dealing with several browsers. The main reason behind this is because, each vendor has implemented the DOM in each browser differently. Some follows W3C standard while others don't. MS IE is the big bully in the block. IE usually doesn't respect W3C standards. So developers must put little extra effort from the very beginning of there development.

  1. Always use a cross browser compatible javascript library for your DOM methods.
    - YUI (http://developer.yahoo.com/yui/event/)
    - JQuery (http://jquery.com/)

  2. Separate the view of the application (HTML) from its behavior (JavaScript).

  3. Always be extra careful when dealing with dynamic event handlers.
    Ex:(YUI is used in the following example and it outlines a practice example of the above three)
    The html file (test.html) 


    <html>

    <head>

        <!-- Uncomment these lines if you want to keep YUI localy 

        <script type="text/javascript" src="yui/build/yahoo/yahoo-min.js"></script>

        <script type="text/javascript" src="yui/build/event/event-min.js"></script>

        <script type="text/javascript" src="yui/build/connection/connection-min.js"></script>

        -->

     

        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>

        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js"></script>

        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>

    

        <!-- Source File -->

        <script type="text/javascript" src="ext.js"></script>

    

        <script type="text/javascript">

            //when the DOM is ready execute the methord

            YAHOO.util.Event.onDOMReady(init);

        </script>

        <title>Page Title</title>

    </head>

    <body>

    <div id="messageOut" style="display:none;"></div>

    <br /><br />

    <form>

    	<input type="text" id="messageIn" />

    	<input type="button" id="messageButton" value="Test Me" />

    </form>

    </body>

    </html>

    ext.js 

    function init(){

    	YAHOO.util.Event.addListener("messageButton", "click", showMessage);

    }

    function showMessage(){

    

    	var messageButton = document.getElementById('messageButton');

    	var messageIn = document.getElementById('messageIn');

    	var messageOut = document.getElementById('messageOut');

    	messageOut.style.display = "";

    	messageOut.innerHTML = messageIn.value;

    }

    Note:To run the above example, you only need to save the two files “test.html” and “ext.js”. The YUI library files will be picked from the online sever.

Comments

Anonymous said…
I like nike air max 90 shoes ,I like to buy the cheap nike shoes by the internet shop . the puma shoes and the adidas shoes (or addidas shoes) are more on internet shop .i can buy the cheap nike shoes and cheap puma shoes online. It’s really convenient.
September 23, 2009 at 5:14 AM
Anonymous said…
I like nike air max 90 shoes ,I like to buy the cheap nike shoes by the internet shop . the puma shoes and the adidas shoes (or addidas shoes) are more on internet shop .i can buy the cheap nike shoes and cheap puma shoes online. It’s really convenient.
September 23, 2009 at 5:43 AM
Post a Comment

Popular posts from this blog

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases. 1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type. To create a new asset type you need to login to the carbon console (username:admin, password:admin) https:// :9443/carbon/ Navigate to Extensions > Configure > Artifacts Click "Add new Artifact" link at the bottom of the page. By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type. Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets Create a folder with name "applications"    Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults   Since we are overriding the details page we need to...
Post a Comment
Read more

Simple client side validation library

  Client side validation has never been easy.. Include jQuery and the validator.js < script src = " http://code.jquery.com/jquery-1.11.3.min.js " ></ script > < script src = " ../validate.js " ></ script > Simple validation < form id = " myForm " > < label >User Name < span class = " red-star " >*</ span > </ label > < input type = " text " name = " userName " class = " validate-required " /> < br /> < label >Password < span class = " red-star " >*</ span ></ label > < input type = " password " name = " password " class = " validate-required " /> < br /> < input type = " submit " value = " Login " /> </ form > ...
1 comment
Read more

Projecting HTML Elements on a circle using Javascript

Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted. My solution has 5 files prototype.js This is a handy javascript framework. You can download the latest version from there website ( www.prototypejs.org/download ). I am using this to simply handle the onload event in the page. circle.html script.js node-main-left.gif node-sub-left.gif The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”. This is how the html file looks(circle.html). <html> <head> <script src="prototype.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> <script language="javascript" xml:space...
8 comments
Read more