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
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.
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
