JavaScript Goodies : This page contains small (tiny) JavaScript code snippets which you can use to enhance your web-site. You can also use some of these code snippets to get the user details so as to deliver the relevant information in the desired format. The code snippets are not intended to be full fledged JavaScript programs by any stretch of imaginations, they come here as useful tips/tricks to enhance the user experience of those who visit your web-site. This is an attempt to make the web-contents richer by embedding the power of JavaScript in them, which otherwise wouldn't have been possible by the ubiquitous HTML. All the code-snippets here discuss client side JavaScript only. All said and done, disclaimer  is implied, and feedback is most welcome. Yes, you can copy and/or modify any one of these scripts without any obligation. Happy coding and debugging ;-))

Detecting The Browser & Its Version -

This is perhaps the most imperative piece of JavaScript code that one would use, given the way in which the browsers, (moreover different versions of the same browser) render the same HTML page. The results could be amusing. If you can't come up with a (effectual and eye catching) design/code which has cross-browser compatibility, it is certainly advisable that you deliver the contents depending upon the browser and its version. The code here does just that, modify it to suit your requirement -

<script language="JavaScript">
<!--
        alert("You are using " + navigator.appName + " " + navigator.appVersion);
// -->
</script>
Top       

Detecting The Client Screen Resolution & Color -

This also could come in very handy while resizing the applet, displaying page in a certain layout, displaying an important image and likewise ...

<script language="JavaScript">
<!--
        var szColor = (screen.colorDepth ? screen.colorDepth : screen.pixelDepth);
        alert("Screen resolution of your monitor is : " + screen.width + " x " +screen.height);
        alert("The Color Depth of your screen is : " + szColor);
// -->
</script>
Top       

Document Last Updated Date -

If you don't like to manually write the date of updating of your web document, the script is for you. The script gets the modification date of the document from the web server and puts it in the document. Make sure your web server supports this, some web servers DO NOT.

<script language="JavaScript">
<!--
        document.write("Page last updated on " + document.lastModified)
// -->
</script>
Top      

Simple Date And Time Display -

This simple single line of script displays current date and time on your web-page, in its default format. However the display is static, so time won't be changing. Time and date are the local time and date of the machine on which the script executes. Code here gives a very basic display of time and date, it doesn't get any simpler!

<script language="JavaScript">
<!--
        var today = new Date();
        document.write(today + ".");		//YES! That's it.
                       // individual date realted methods
        document.write(today.getDate());	//for date of the month
        document.write(today.getDay());	 	//for 0 based day of the week
        document.write(today.getMonth());	//for 0 based month (0 to 11)
        document.write(today.getYear());	// 2 digit year
        document.write(today.getFullYear());	// 4 digit year(JS 1.3 only)
                       // individual time related methods
        document.write(today.getHours());	// Hours (0 to 23)
        document.write(today.getMinutes());	// Minutes (0 to 59)
        document.write(today.getSeconds());	// Seconds (0 to 59)
// -->
</script>
Top      

User Computer Details -

This code gives the user computer details such as the operating system, CPU type (e.g.. Intel Pentium III is x86) and platform. The values of platform are Win32, Win16, Mac68k, MacPPC and various Unix. You can combine this script with screen resolution, browser and get the details you need.

<script language="JavaScript">
<!--
        IE = document.all ? 1 : 0 ;
        szUserComp = "User navigator and operating system : " + navigator.userAgent;
        var szLanguage = IE ? navigator.browserLanguage : navigator.language;
        szUserComp += "\nBrowser Language : " + szLanguage;
        szUserComp += "\nPlatform : " + navigator.platform;
        szUserComp += "\nCPU Type : " + navigator.cpuClass;  //IE only
        alert(szUserComp);
// -->
</script>
Top      

Bookmark The Site (For IE only) -

This small script enables the user to bookmark your site by clicking a link. This function however works in Internet Explorer only, so you could put this link in a conditional block, so non IE users do not see this. You can display a polite "Please bookmark this site" message for them  instead.

<script language="JavaScript">
<!--
    function bookmarkSite()
    {
      if (document.all) //IE
        {window.external.addFavorite(window.location.href, "Your-site-title-here");}
      else
        {alert("To be used with IE only. \n In " + navigator.appName + " use CTRL + D to bookmark.");}
    }
    if(document.all) //IE
        { document.write('<a href="#" onClick="bookmarkSite()">Bookmark this site</a>'); }
// -->
</script>
Top      

Getting Query String Parameter From The URL -

Query String is a way passing Name-Value pairs of parameters separated by an ampersand (&) along with the URL itself. The query string is separated from the URL by a question mark (?). Usually a server side script/program (Sevelet, ASP, PERL, JSP...)  is used to get the values of these parameters. A typical URL with a query string looks like - http://www.xyz.com/process.asp?name=abc&email=abc@xyz.com . Customized contents can be served depending upon the values of the passed parameters. I have written a small script here which executes on the client side to get the query string parameters. Depending upon the value of the parameter passed, necessary processing can be done and relevant information can be served. Though this is not an efficient way as compared to server side processing, this proves very useful when your server does not support the script/technology that you are comfortable with; or worse, when you do not have script execution rights on the web server. Among many applications, this can be very useful to display an error page serving a customized, detailed error message depending upon the error ID passed to it.

The function getParam(szParam) gets the URL, and searches for the required parameter in it, if found the parameter value is returned, otherwise a null string ("") is returned. For each parameter this function should be called with the parameter name passed to it.

<script language="JavaScript">
<!--
            //prototype => String getParam(String szParam);
    function getParam(szParam)
    {
        var szValue = "";
        var szURL = document.location.href;
        szParam += "=";
        var arr = szURL.split(szParam);
        if(arr.length > 1)
        {
            var arr1 = arr[1].split("&");
            szValue = unescape(arr1[0]);
        }
        return szValue; //contains value of the parameter passed as szParam
    }
// -->
</script>
Top      


The scripts given above can be used with a little, or no modification to suit your requirements. I will keep adding to them as and when I come up with something useful and interesting. All the scripts have been used and tested before they appear here, however they could still have some bugs; if you come across the bugs and find a workaround, do with the details. For more information, documents, examples visit JavaScript Resources page. I am planning to add few more useful tips here soon, do come back.

Top