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

Using javascript to Include a html file inside another html file

When there is no server side functionality needed we create the whole site in plain html. Usually these sites have left/right side menu, top header, footer etc.. If the site grows in to 20, 30 pages, it will be a headache to do a simple change like changing footer text. We will have to change each page. If we were using a server side technology like PHP, JSP, etc.., we will have the chance to keep the common areas in the site in different pages and include these parts in each page using a “include” statements. We can do the same thing with the plain old html and javascript. But how? First you need to create the site main layout using divs and give them unique ids. <html> <title>HTML Includes</title> <script language="javascript" src="js/main.js"></script> <script src="js/prototype.js" type="text/javascript"></script> <script language="javascript" xml:space="preserve"> // <...
6 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

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