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

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

APIM 3.0 - populate multiple apis - bash script

Created a bash script to create, tag and publish multiple APIs. This is useful to populate data for the landing page. #!/bin/bash # get the URL consumer key clientId=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientId') clientSecret=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientSecret') echo $clientId echo $clientSecret encoded=$(echo -ne $clientId:$clientSecret | base64) echo $encoded # get access token accessToken=$(curl -k -d "grant_type=password&username=admin&password=admin&scope=apim:api_view,apim:api_create" -H "Authorization: Basic $encoded" https://localhost:9443/oauth2/token | jq -r '.access_token'...
Post a Comment
Read more

Flying to the light

I just had a thought about humans and this whole wold. The technology is growing so fast. During the last century most of the advanced technologies came in to existence. Now I can simply video chat with my friend in USA, send him photos, sync with him and work on same task., and do so many things with the current technologies. Within another century we might be able to contact other lifeforms in the universe if we were able to develop our technologies like this. Shouldn't we be happy about that and be energetic. I don't think so.. Y? There are 100 to 200 billion galaxies in the Universe, each of which has hundreds of billions of stars. There has to be billions of civilizations out there. If the technology can be sustainably develop in to such a state that we are able to travel through Universe and contact other life forms, there has to be some one trying to contact us right now. But there aren't any.. So what does that tells us? It simply says we can't ...
Post a Comment
Read more