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

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

Making of my Fist Game ( Angry Wives )

My Fist Game !!! Finally I was able to finish it. It's been two and half years since I start investing my extra time on this. It all started with a joke. My current working place is a real fun place to work. We usually hangout on teatime and through out any thing we got on each other. We use to sit on a circle and pick a subject and laugh the guts out. Ones we were talking about a particular slow server, we thought about letting the users play a game while it loads. Game like Angry Birds. Then an idea came to modify the Angry Birds game to something like Angry Babes. So instead of this birds there are hot hot girls flying and killing dudes inside building blocks. Then I started wondering, " What if this can be done for real? " "How practical is this?" "Can a single person do this?" I think I have done a research on mobile game purchase statistics, it turns out to be IOS users have more trend over buying stuff than Android users. So IOS wa
Post a Comment
Read more

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