Thursday, October 18, 2012

Custom Widget using Jquery and Javascript

hi All,

Today my blog post is all about writing custom widget using jquery and javascript. I thought of developing something like skype call buttons where you only include a single js file and it shows button as well as its features. Here, you dont give complete code to the user, you just ask him to include a js file on his page and when he runs, everything shows up.

Below example will display my blog page is jquery  color box, you only have to include PopUpBlog.js file in your html file and it all does the job

Lets begin with writing the html file first where you will include PopUpBlog.js file.

Example.html

<html>
    <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    
    </head>
    <body>
    </body>
</html>
<script src="PopUpBlog.js")" type="text/javascript"></script>


In above code we only include our custom widget js file, we are not writing any code related to color box window or jquery. Below is the code for js file.

(function () {
    var globalUrl = "";
    var navigatingBookingUrl = "http://ujjwalbsoni.blogspot.com";
    // Localize jQuery variable
    var jQuery;

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.3') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
            "http://code.jquery.com/jquery-latest.min.js");


        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler();
                }
            };
        } else {
            script_tag.onload = scriptLoadHandler;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

    } else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        //main();
    }

    /******** Called once jQuery has loaded ******/
    function scriptLoadHandler() {
      
        jQuery = window.jQuery;
      


        //Load Color Box Script
        script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");

        script_tag.setAttribute("src",
            "jquery.colorbox-min.js");

        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

        //Load Color Box CSS 
        var css_link = document.createElement('link');
        css_link.setAttribute("type", "text/css");
        css_link.setAttribute("rel", "stylesheet");
        css_link.setAttribute("href", "colorbox.css");

        document.getElementsByTagName("head")[0].appendChild(css_link);
        /////
        // Get Body Element
        var b = document.getElementsByTagName('body')[0];
        //Create Div
        var el = document.createElement('div');
        el.id = 'BookingButton';
        //Create Href Link
        var ahref = "<a class='lnkBooking' href='"+ navigatingBookingUrl+"' target='_self'>View my blog</a>";
        b.appendChild(el);
        jQuery('#BookingButton').append(ahref);
        //Attach Booking Event
        jQuery(".lnkBooking").click(function (e) {
            jQuery(".lnkBooking").colorbox({ href: navigatingBookingUrl, iframe: true, innerWidth: 900, innerHeight: 500 });
        });
    }
})();     



Above code will find out head part in your html code and integrate color box over there, rest i have commented in js contents. If you face any difficulty then you can email me.

For source code queries, email me at ujjwalbsoni20032003@gmail.com

You can download the source code from below link


Source Code

Thanks,

Ujjwal soni