Wednesday, December 30, 2009

Create a popup webpage in Blogspot posting


In one of my previous post, I've already discussed that how to use JavaScript in a post.
(For your reference, we can use JavaScript directly in a post. Its very similar as we use HTML in a posting.)

In this posting, we will discuss how to create a pop-up window (of course, if user clicks at a button. I am well aware that how irretating a pop-up window could be), which can launch a webpage but without a toolbar.

For an example, click on this link. It should bring you google home page, but with restriction in size and is not having a toolbar associate with it.






Here we discuss that how to create such a button.
Here are the two blocks of code:
First one is a JavaScript function. It can be put either in the blogspot header and in that case, it will become global. All posts will be able to call this function programatically. Else in another case, you can also place it in the same post. The only condition is that funcition should be declared before it is being called.

Second block of code is just a use of html form/button, which calls JavaScript on clicking on it.

<!--1st piece of code. It is a JavaScript funtion. Place it either in header of blog or above user of 2nd piece of code in a posting.-->
<script LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=660,height=400,left = 390,top = 250');");
}
// End -->
</script>
<!--2nd piece of code. This will open a window, showing google.com home page-->
<form>
<input type=button value="Open the Popup Window" onClick="javascript:popUp('http://www.google.com')">
</form>

You must have noticed that in the first piece of code (JavaScript function), I have put value of scrollbars=1. Thus scrollbar appears in the wwindow. If you want to suppress it, put scrollbars=0.
Similarly, you can adjust other settings also.

That is it. Hope I explain it in lucid manner.

Regards,
B.O.


For Further Reading,

0 comments:

Post a Comment

 

Popular Posts

Popular Posts On EAB

Demo Donation
This demonstration will accept a fixed amount of $0.05.

Man Behind This Blog

My Blogs