RSS RSS feed | Atom Atom feed

Conditionally including javascript and css files

how to include/inject css or javascript on demand from within body of the docuement

Normally external javascript and css files are supposed to be included in the header of a web page. But, at times we come across situations when we need to include some javascript or css file when we are into the body of the page (that is head portion has already been written).

To include the javascript and css resources you can use the following two methods.


function injectJS (fileName, jsbase){
    var src = jsbase + '/' + fileName + '.js';
    var ipts = document.getElementsByTagName("script");
    var found = false;
    for (i=0; i < ipts.length; i++){
        var type = ipts[i].src;
        if (type.indexOf(fileName) != -1){
                    found = true;
        }
      }
     if (!found){
    var headID = document.getElementsByTagName("head")[0];        
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = src;
    headID.appendChild(newScript);           
    }
 }   
 
 
 function injectCSS (fileName, cssbase){
    var ipts = document.getElementsByTagName("link");
    var found = false;
    for (i=0; i < ipts.length; i++){
        if ( ipts[i].rel != 'stylesheet') continue;
        var type = ipts[i].href;
        if (type.indexOf(fileName) != -1){
                    found = true;
        }
      }
     if (!found){
        var headID = document.getElementsByTagName("head")[0];        
        var c = document.createElement('link');
        c.type = 'text/css';
        c.rel = 'stylesheet';
        c.href = cssbase + '/' + fileName + '.css';
        headID.appendChild(c);           
    }
 }   


Note that the fileName should not contain the .js or .css extension.
The methods can be called from anywhere in the body of the html page (from inside standard script tags/block).

Above methods make sure that the resource being injected is not included more than once. Feel free to use the code and modify it to suit your heart's content. No strings attached!


  

Required to claim my blog!

I had no option but to write this post so that I cam claim my Blog! At least technorati says so.. Technorati Profile

NetBeans 6 Preview is quite stable.

Today, I downloaded and tested NetBeans 6 Preview release (M9). It seems to be stable enough for production work as well. We were waiting for some stable release of Net Beans IDE version 6 for quite some time. This was since we had decided to use unified EL in new version of our web application framework 'netForce'. Tomcat 5.x does not support unified EL; and NetBeans 5.x does not support Tomcat 6. So we had no option but to wait for the release of version of NetBeans IDE that can support Tomcat 6. NetBeans 6 is scheduled to be released in last quarter of 2007 but the preview release seems to be stable and promising enough to encourage us to use this IDE for active development of new version of our applications. Kudos to the NetBeans team. We are also impressed with other overall improvements in IDE. Most of our work is done using NetBeans IDE. The only exception being reporting, for which we have to use Eclipse since we are using BIRT reporting engine. BIRT being an open source software, I wonder if someday we will have a NetBeans module providing support for BIRT.

Tags :

Falling in love with jQuery

A while back I was looking for a JavaScript library that can make writing javascript easy for our web applications. One of my goals was to find something that does its job unobtrusively. It was important since I believe that even if the browser can not support javascript, our application should be able to provide basic functionality to the user using plain vanilla HTML interface. All our requirements were fulfilled in jQuery. It's small, fast and let's you do things in less lines of codes. jQuery is all about finding stuff and doing things. For example it let's you find all the <a> tags that have class attribute value of popup. Then you can attach events to show them in popup!  The good thing is that in case the browser does not support javascript your link tag will show up as plain vanilla link tag. So users will be able to at least browse to the page pointed by the link.

So if you are looking for a great javascript library, go for jQuery. It's at jQuery.com

For me, I confess I have fallen i love with jQuery.



Legal Disclaimer | Privacy Statment