Wednesday, 3 August 2011

JavaScript: the good old (with a trick)


The JavaScript method is one of most used in web sites. To be honest, it has been a little bit overused in the past and today lightbox effects are preferred. However I still use it, especially when displaying a large image.
In this article I will show you how to open a new window and resize it appropriately.

The opening
First of all, we have to decide which element will open a new window. Imagine we want to open a new window when the user clicks on an image. The window will contain a larger image. Our small picture will be something like:
<a href="javascript:void(popupImg('images/gallery/big/01.jpg'))"><img src="images/gallery/small/01.jpg" alt=""></a>
When the user clicks on the image, the popupImg function will be called.
If you prefer, we can use the onClick event:
<img src="images/gallery/small/01.jpg" alt="" onClick="popupImg('images/gallery/big/01.jpg')">

The function
The open() method has a simple syntax. We are talking about a method applied to the window object: (URL, windowName[, windowFeatures])
URL is the URL of the page to be opened;
windowName  is the name or target of the new window. It can be:
    _blank  -  a new window;
    _parent  -  the URL is loaded in the parent window;
    _self  -  the URL replaces the window;
    _top  -  the URL replaces the frame set;
    name - the name of the window;
windowFeatures  are features assigned to the new window. Those features can be:
    status  -  can be yes, no, 0 or 1 (default is yes) - display the status bar;
    titlebar  -  can be yes, no, 0 or 1 (default is yes) - display the title bar;
    toolbar  -  can be yes, no, 0 or 1 (default is yes) - display the tool bar;
    menubar  -  can be yes, no, 0 or 1 (default is yes) - display the menu bar;
    height  -  in pixels - determine the height;
    width  -   in pixels - determine the width;
    top  -   in pixels - determine the top position;
    left  -  in pixels - determine the left position;
    location  -  can be yes, no, 0 or 1 (default is yes) - display the address bar;
    fullscreen  -  can be yes, no, 0 or 1 (default is no) - display in full screen or not;
    channelmode  -  can be yes, no, 0 or 1 (default is no and for IE only) - display in theater mode or not;
    directories  -  can be yes, no, 0 or 1 (default is yes and for IE only) - display directories button or not.

We are going to use some of those optional features.

The popupImg function
Let's see the function:
function popupImg(url)
The function has a parameter: the url we passed when the function is called ("images/gallery/big/01.jpg" in our example). That's where we get the content of the new window.
    prev ="","_blank","resizable=no,scrollbars=no,location=no,menubar=no,status=no,toolbar=no");;
We open the new window using the open() method and pass just a few optional parameters. What we basically do is open a new blank window, with "_blank". This will make open a new and empty window.
    prev.document.writeln("<body bottommargin=0 leftmargin=0 marginheight=0 marginwidth=0 rightmargin=0 topmargin=0>");
Then we start writing inside the new window inserting the <head> and <title>. We open the <body> tag and give it a few parameters.
    prev.document.writeln("<script type='text/javascript'>");
    prev.document.writeln("function completeImg() {");
    prev.document.writeln("i = document.getElementById(\"imm\");");
    prev.document.writeln("window.resizeTo(i.width + 6, i.height + 80);");
    prev.document.writeln("window.moveTo((screen.width - i.width) / 2, (screen.height - i.height) / 2);");
The previous part is inserting a JavaScript script, with a function called completeImg. The function will resize the window and move it to the center of the screen, once the image is completely loaded.
    prev.document.writeln("<a href=\"javascript:window.close();\">");
    prev.document.writeln("<img src=\""+url+"\" hspace=\"0\" vspace=\"0\" border=\"0\" alt=\"\" id=\"imm\" name=\"imm\" onload=\"return completeImg();\">");
The previous part is inserting the image surrounded by an <a> tag so that when the user click the image, the new window will close. Then there's the completeImg function called when the image is loaded (onLoad).
Finally we close everything.

The example shown should be considered as an exercise. I actually use it sometimes and it works very well. You should check the part which resizes and centers the new window, because you may need to adjust it a bit, considering the size of your image.

Hope you find it useful.

0 thoughts:

Post a Comment

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.