Home arrow Design Usability arrow Page 4 - Building Friendly Pop-up Windows
DESIGN USABILITY

Building Friendly Pop-up Windows


A pop-up window is simply another resource for displaying content. Many advertisers abuse them, however, thus giving pop-up windows a bad reputation. They can be implemented in a friendly fashion that won't make your visitors angry -- and they can be very useful in certain circumstances, such as on an intranet. Alejandro Gervasio explains.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 48
February 02, 2005
TABLE OF CONTENTS:
  1. · Building Friendly Pop-up Windows
  2. · Addressing the problems with pop-up windows
  3. · The JavaScript function
  4. · Adding style to pop-up close links

print this article
SEARCH DEVARTICLES

Building Friendly Pop-up Windows - Adding style to pop-up close links
(Page 4 of 4 )

In order to properly understand how we can add a CSS style to the close link, let’s first show the final version of our JavaScript function, and then explain what the code does:

<script language="javascript">

createPopUp=function(){

    if(!window.opener){

          var as,i,popwin;

          as=document.getElementsByTagName('a');

          for(i=0;i<as.length;i++){

               if(as[i].target=='_blank'){

                    popwin=function(){

                          var winAttributes='scrollbars=0,location=0,left=0,
top=0,width=500,height=400';

                          window.open(this.href,'',winAttributes);

                          return false;

                          }

                    as[i].onclick=popwin;

                    as[i].onkeypress=popwin;

               }

          }

    }

    else {

          var closePar,closeLink,closeText,closeId;

          closeId='closewindow';

          closeLink=document.createElement('a');

          closeText=document.createTextNode('Close Window');

          closeLink.href='#';

          closeLink.appendChild(closeText);

          closeLink.onclick=function()
{self.close();};

          closeLink.onkeypress=function(){self.close();};

          if(document.getElementById(closeId)){

               document.getElementById(closeId).appendChild(closeLink);

          }

          else{

               closePar=document.createElement('p'),

               closePar.id=closeId;

               closePar.appendChild(closeLink);

               document.body.insertBefore(closePar,document.body.firstChild);

          }

    }

}

window.onload=createPopUp;

</script>

As we can appreciate, the script is nearly identical to the previous one. We’ve just added the code needed to apply a style to the close link. First, we define an ID to be applied to the link, by declaring the "closeId" variable. Having defined the ID, we check whether there is an existing HTML element with that ID. If there is an element that already has that ID, we simply insert the close link inside this containing element, using the "appendChild()" method. The following lines do that:

if(document.getElementById(closeId)){

               document.getElementById(closeId).appendChild(closeLink);

          }

If we don’t already have an element with that ID, we create a new paragraph and assign the ID to it. Finally we add the link to the paragraph and insert it as the first element of the pop-up window, utilizing the "insertBefore()" method. This is done with the lines listed below:

closePar=document.createElement('p'),

closePar.id=closeId;

closePar.appendChild(closeLink);

document.body.insertBefore(closePar,document.body.firstChild);

The full code, including the HTML code is listed here:

<html>

<head>

<title>FRIENDLY POP-UP WINDOWS</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript">

createPopUp=function(){

    if(!window.opener){

          var as,i,popwin;

          as=document.getElementsByTagName('a');

          for(i=0;i<as.length;i++){

               if(as[i].target=='_blank'){

                    popwin=function(){

                          var winAttributes='scrollbars=0,location=0,left=0,
top=0,width=500,height=400';

                          window.open(this.href,'',winAttributes);

                          return false;

                    }

                    as[i].onclick=popwin;

                    as[i].onkeypress=popwin;

               }

          }

    }

    else {

          var closePar,closeLink,closeText,closeId;

          closeId='closewindow';

          closeLink=document.createElement('a');

          closeText=document.createTextNode('Close Window');

          closeLink.href='#';

          closeLink.appendChild(closeText);

          closeLink.onclick=function()
{self.close();};

          closeLink.onkeypress=function(){self.close();};

          if(document.getElementById(closeId)){

               document.getElementById(closeId).appendChild(closeLink);

          }

          else{

               closePar=document.createElement('p'),

               closePar.id=closeId;

               closePar.appendChild(closeLink);

               document.body.insertBefore(closePar,document.body.firstChild);

          }

    }

}

window.onload=createPopUp;

</script>

</head>

<body>

<a href="file.htm" target="_blank">This link opens a pop-up window(if possible)</a>

<a href="file.htm">This link opens the page in a normal window</a>

</body>

</html>

That’s all we need in the HTML code for making pop-ups work. Now we have two links. One of them has its target attribute set to "_blank", which will open the link in a pop-up window, if it’s possible. The other link will simply open the page in a normal window. Surely you’ll agree that this is very simple, right?

Whew, that’s all. Using the handy methods provided by the DOM to manipulate Web documents, we have a useful script to implement efficient pop-up windows. The whole function should be included in a .js file for being added to the documents. 

We could expand the function's capabilities by adding some other features, such as giving users the ability to open the pop-ups with predefined styles, including size, position, toolbars, and so on. Using form checkboxes within opener pages would do the job nicely, and style settings would be stored in a cookie. Also, since most pop-ups are opened with their toolbars removed, we should add a link or icon to print the page, significantly increasing their accessibility. Adding your own features to the presented solution is left as an exercise for the student.

Conclusion

Hopefully, this article has demonstrated that pop-up windows can be accessible, search-engine friendly and non-invasive, when they’re properly implemented. However, as with each part of a Web project, we need to deeply analyze if we really need a pop-up window link in our documents. It’s a sensitive issue to be evaluated when we’re planning applications. One final point to note is that pop-ups should always be presented as an option if they’re going to be used in websites. Don't force your visitors to deal with pop-ups. This might be a significantly different situation with intranet applications, where users work with predefined and well-known design processes. After all, a pop-up window is yet another resource for displaying content and must be adequately considered in this light.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials