Announcement

Collapse
No announcement yet.

Creating Pop Up Windows!

Collapse
This topic is closed.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Creating Pop Up Windows!

    Popup Windows: The Basics

    We'll begin the tutorial by creating a basic popup window. The technique described here addresses all the major issues in popups. The popup always comes to the front. Different links can target the same popup. The code is simple and easily modified. Everything for the rest of the turorial is a variation on the theme described here. The code in this page creates a popup that is opened from a link. In this section we'll show the code with just the minimal description you need to get it going.

    First, copy this script into the <HEAD> section of your page:

    HTML Code:
    <SCRIPT TYPE="text/javascript">
    <!--
    function popup(mylink, windowname)
    {
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
       href=mylink;
    else
       href=mylink.href;
    window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
    return false;
    }
    //-->
    </SCRIPT>
    For now we'll skip the details of how the script works, and move to the next step. The script above opens the popup, but something needs to run the script. The most common situation is that the script is run when the user clicks on a link. A link like the following would run the script:

    HTML Code:
    <A 
       HREF="popupbasic.html" 
       onClick="return popup(this, 'notes')">my popup</A>
    Most of the link is as usual. The URL of the page being linked to is in the HREF attribute. We've added an additional attribute called onClick. Copy the code as it is into your link, with only a small modification. The second argument of the popup() -- 'notes' -- indicates name of the popup window. Every popup window should have its own unique name. Be sure to put the name in single quotes (''). So if you want to name the popup 'stevie' then this would be the code:

    HTML Code:
    <A HREF="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</A>
    Read This Next Part Or You'll Go Insane Trying to Figure Out Why Your Popup Doesn't Work

    A small but crucial point is often overlooked. The command in onClick must begin with return or the script won't work. Be sure to start the command with return like this:
    HTML Code:
    onClick="return popup(this, 'notes')"
    And don't put a space in the page name between the single quotes. If you do, the link will act just like a regular link.

    Popup Windows: From an Image Map

    In our first variation we'll open the popup from an image map instead of from a regular anchor. We'll use the same script as from our first example. With that script, an <AREA ...> tag in an image map can be made to open a popup in exactly the same way as an <A ...> tag:

    HTML Code:
    <MAP NAME="index">
    <AREA 
       HREF="mypopup.html" ALT="My Popup"
       COORDS="10,10,120,120" SHAPE=RECT 
       onClick="return popup(this, 'gloss')">
    <AREA 
       SHAPE=RECT ALT="Your Popup"
       COORDS="140,10,180,50" HREF="yourpopup.html" 
       onClick="return popup(this, 'gloss')">
    
    <AREA SHAPE=DEFAULT NOHREF>
    </MAP>
    
    <IMG SRC="mymap.gif" HEIGHT=130 WIDTH=190 ALT="Image Map Example"
    BORDER="0" USEMAP="#index">
    Popup Windows: Opening Automatically

    In the first two examples (Popup Windows: The Basics and Popup Windows: From an Image Map) the popup is opened when the user clicks on something. In this example the popup opens automatically.

    We'll use the same script as in the first example. Copy this script in the <HEAD> section of your page:


    HTML Code:
    <SCRIPT TYPE="text/javascript">
    <!--
    function popup(mylink, windowname)
    {
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
       href=mylink;
    else
       href=mylink.href;
    window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
    return false;
    }
    //-->
    </SCRIPT>
    This time, instead of running the script from a link we'll run it from the onLoad attribute of the <BODY ...> tag.

    HTML Code:
    <BODY onLoad="popup('autopopup.html', 'ad')">
    The command in onLoad is run when the document is finished loading. Like in our previous example, the command runs popup(), but this time the first argument for popup() is a little different. In the previous example we put this, meaning the link itself, and the script got the URL from the link. In this case there is no link so we pass the actual URL to open. So in our example we put 'autopopup.html'.

    Popup Windows: From a Form

    For our next variation on the popup theme we're going to open the popup from a form. In this example we're going to change the script around. The following script is custom designed for opening a popup from a form. It works with forms that use both POST and GET. Copy the following script exactly as-is into the <HEAD> section of your document:

    HTML Code:
    <SCRIPT TYPE="text/javascript">
    <!--
    function popupform(myform, windowname)
    {
    if (! window.focus)return true;
    window.open('', windowname, 'height=200,width=400,scrollbars=yes');
    myform.target=windowname;
    return true;
    }
    //-->
    </SCRIPT>
    Now we'll add some code so that the popup opens when the user submits the form. Add an onSubmit attribute to <FORM ...> tag:

    HTML Code:
    <FORM METHOD=POST
       ACTION="../cgi-bin/mypopupcgi.pl"
       onSubmit="popupform(this, 'join')">
    The first argument for popupform() is always this, meaning the form itself. The second argument, 'join' in this case, is a unique name for the popup.

    Popup Windows: Targeting the Opener

    Once a popup window has been created, linking from the popup back to the main window (i.e. the window which opened the popup) is a little trickier than might be expected. The problem is that the main window doesn't have a "name" the way the popup window does. Fortunately, JavaScript provides an answer in the form of opener.

    To create links in the popup window that target back to the main window, first put this JavaScript in the <HEAD> of the popup page:


    HTML Code:
    <SCRIPT TYPE="text/javascript">
    <!--
    function targetopener(mylink, closeme, closeonly)
    {
    if (! (window.focus && window.opener))return true;
    window.opener.focus();
    if (! closeonly)window.opener.location.href=mylink.href;
    if (closeme)window.close();
    return false;
    }
    //-->
    </SCRIPT>
    A link that uses this script looks like this:

    HTML Code:
    <A 
       HREF="rbex.html" 
       onClick="return targetopener(this)">my page</A>
    Popup Windows: Closing When They Go to the Opener

    In the previous example the link in the popup targets the main page, but the popup stays open in the background after the user clicks on the link. In this page we'll set the link so that it closes the popup after the click.

    targetopener takes three parameters. The first is always this, meaning the link itself. The second and third parameters are optional and default to false. (Notice we don't use them in the example above, we'll get to them shortly.) The second parameter indicates if the popup should close. The third is if the link should actually send the opener to the linked resource, or if the opener should just get the focus regardless of what its current page is. The third parameter provides a safe way to close the popup after closing, but still having a link to an existing page if the window isn't actually a popup (such as if the user found the page through a search engine).

    When the user clicks on the link, targetopener checks if the browser has the focus command (a few older browsers don't) and if the current window was opened by another window. If these conditions are true, then the opener window gets the focus, the opener is directed to the referenced URL, and the script returns false. Because the function returns false, the link does not go on to the URL (the script has already done that). Note that the link which targets the opener is a little different than the link that opened the popup window to begin with. In this link, onClick says "return goOpener(this)"... the links on the previous pages did not use return.

    By default, the popup window stays open but is in the background. If you want the popup to close after going back to the opener, add a second parameter of true to the targetopener function call:


    HTML Code:
    <A 
       HREF="rbex.html" 
       onClick="return targetopener(this,true)">main page</A>

  • #2
    Popup Windows: Closing The Popup

    If you just want to close the popup without doing anything else, add another true. You should still link to a valid URL in case the user found the page without opening it as a popup.

    HTML Code:
    <A 
       HREF="rbex.html" 
       onClick="return targetopener(this,true,true)">close</A>
    Popup Window: Don't Reload

    In most situations the page in the popup should reload even if the popup was already open. In this page we'll look at a script in which the page in the popup does not reload if the window is already open. One popular use for this script is when the popup contains a piece of music that should continue uninterrupted as the user moves through the site.

    We'll begin by modifying the basic popup script from our first example. The following script is similar to the first example, but with one important difference: before directing the popup to a URL the script first checks if the popup is already at that URL. If the popup is already at the URL then no action is taken:


    HTML Code:
    <SCRIPT TYPE="text/javascript">
    <!--
    function popupnr(mylink, windowname, refocus)
    {
    var mywin, href;
    
    if (typeof(mylink) == 'string')
       href=mylink;
    else
       href=mylink.href;
    mywin = window.open('', windowname, 'width=400,height=200,scrollbars=yes');
    
    // if we just opened the window
    if (
       mywin.closed || 
       (! mywin.document.URL) || 
       (mywin.document.URL.indexOf("about") == 0)
       )
       mywin.location=href;
    else if (refocus)
       mywin.focus();
    return false;
    
    }
    //-->
    </SCRIPT>
    Use this script in the same way as in our first example. Call popupnr() in the onClick attribute. The first argument is this, meaning the link object itself, and the second argument is a unique name for the popup. For example, this link opens a popup that plays some background music. The music keeps playing uninterrupted even when you click on the link several times:

    HTML Code:
    <A 
       HREF="nrl.html" 
       onClick="return popupnr(this, 'music')">music</A>
    External URLs
    Do not use this script if the page in the popup has a URL that is external to our site. For example, if your site is in the domain www.idocs.com, don't attempt to load a popup with a page from www.ninthwonder.com. For security reasons JavaScript cannot read the URL information for sites outside the domain of the current web site.

    Refocus

    Generally a popup that doesn't reload should also not refocus (i.e. come back to the front). If you do want the popup to come to the front add true as a third argument to popupnr():

    HTML Code:
    <A 
       HREF="nrl.html" 
       onClick="return popupnr(this, 'music',true)">music</A>
    You can also use this script to open popups automatically. Call popupnr() in the onLoad attribute in the same manner as with regular Popup Windows: Opening Automaticallyautomatic popups. The first argument is a unique name for the popup, the second argument is the URL of the popup:

    HTML Code:
    <BODY onLoad="return popupnr('nrl.html', 'music')">
    Popup Windows: width & height

    width and height are the only required properties for a popup window. This line in our popup script creates a popup that is 400 wide and 200 high:

    HTML Code:
    window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
    Popup Windows: left & top

    left and top set the position of the popup on the screen. If you don't put left and top the browser puts the popup where it wants. For example, this command in the popup script puts the popup left from the left of the screen and top from the top:

    HTML Code:
    window.open(href, windowname, 'width=250,height=150,left=50,top=100,scrollbars=yes');
    Popup Windows: toolbar
    toolbar indicates if there should be toolbar in the popup. The toolbar is the bar at the top of the window with buttons for going forward, back, home, and other major navigational tasks. By default the toolbar is not in the popup. To set a popup to have a toolbar set toolbar to yes.


    So, for example, this open() command in the popup script creates a popup with a toolbar:

    HTML Code:
    window.open(href, windowname, 'width=400,height=150,toolbar=yes,scrollbars=yes');
    Popup Windows: location

    The location bar is where the URL is displayed at the top of the window. By default popups don't have location bars. To configure the popup so that it has a location bar set location to yes in the open() command.

    So, for example, this command in the popup script opens a popup with a location bar:

    HTML Code:
    window.open(href, windowname, 'width=400,height=150,location=yes,scrollbars=yes');
    Popup Windows: directories

    The directories bar holds a set of buttons for your favorite web sites. By default the directories bar is not in the popup window. To set the popup with a directories bar set directories to yes.

    So, for example, this open() command in the popup script sets the popup with a directories bar:

    HTML Code:
    window.open(href, windowname, 'width=400,height=150,directories=yes,scrollbars=yes');
    Popup Windows: status

    The status bar is where the browser displays messages for the user. For example, most browsers display the URL of a link when the mouse passes over the link. By default popups don't have status bars. To set a popup with a status bar set status to yes in the open() command. For example, this command in the popup script creates a popup that has a status bar:

    HTML Code:
    window.open(href, windowname, 'width=400,height=150,status=yes,scrollbars=yes');
    Popup Windows: menubar

    The menu bar is the menu for the popup window. By default popups don't have menu bars. You can configure the popup to have a menu by setting menubar to yes in the open() command. So, for example, this open() command in the popup script configures the popup to have a menu bar:

    HTML Code:
    window.open(href, windowname, 'width=400,height=150,menubar=yes,scrollbars=yes');

    Comment


    • #3
      Popup Windows: scrollbars

      By default popups don't have scroll bars. This is a problem if the content of the popup takes up more space than the first page. It's usually a good idea to set the popup with scroll bars. Set the popup with scroll bars by setting the scrollbars property to yes.

      So, for example, this open() command in the popup script opens a popup with scrollbars:

      HTML Code:
      window.open(href, windowname, 'width=400,height=150,scrollbars=yes');
      In situations where a scrollbar isn't actually needed because the content doesn't fill up even a single window, MSIE and Netscape handle things a little differently. MSIE puts a greyed out scroll bar, Netscape doesn't put any scroll bar at all. Neither of them puts a horizontal scroll bar in the window if it is not needed.

      Popup Windows: resizable

      By default popups cannot be resized by the user. This is usually not a problem... most popups just contain small notes or ads. If your popup contains a lot of information, however, it's a nice touch to let the user resize the window to something more convenient. Set the popup to resizable by setting the resizable property to yes in the open() command. For example, this command in the popup script opens a resizable popup:

      HTML Code:
      window.open(href, windowname, 'width=400,height=150,resizable=yes,scrollbars=yes');
      Popup Windows: dependent

      A "dependent" popup, a concept only recognized by Netscape, means that the popup closes when its opener window closes. Make the popup dependent by setting the dependent property to yes in the open() command. For example, the following command in the popup script creates a dependent popup. If you use Netscape, try opening the popup, then closing this window.

      HTML Code:
      window.open(href, windowname, 'width=400,height=150,dependent=yes,scrollbars=yes');
      In Netscape for Windows, when a popup is dependent it does not get an icon in the task bar (the strip along the bottom of the screen).

      Popup Windows: Full Screen

      A popular variation on the theme of popup windows is opening a window in full screen mode. Full screen means that the window is the full size of the screen and provides as much display area for the page as possible. MSIE and Netscape take different parameters for full screen windows, but you can use both versions. In the open() command put type=fullWindow for Netscape, and fullscreen (without any value) for MSIE. So, for example, this command in popup script opens a full screen window:

      HTML Code:
      window.open(href, windowname, ',type=fullWindow,fullscreen,scrollbars=yes');
      Notice that in the open() command there is no height or width properties. Leave those properties out or Netscape won't open the window in full screen mode.

      In MSIE there are only two ways to close the full screen window. Most people don't know the first (press ALT+F4) so you need to provide the second, which is done with Javascript. The easiest way to provide a close button is to use our script for referring back to the opener. Copy that script into the full screen page, then use the script in a link like this:


      HTML Code:
      <A HREF="linking_famsupp_87.html" onClick="return targetopener(this,true,true)">close</A>
      The link in this example closes the full screen window and gives the focus to the opener, but only if the window actually is full screen and was opened from another window. If those conditions aren't true (and they wouldn't be if, for example, the user found the page through an external search engine), then the current window goes to the linked resource.

      Popup Windows: channelmode

      Channel mode, which is only applicable to MSIE, is quite similar to full screen mode, with the difference being that in channel mode the window has some of the standard browser window stuff such as a close box and a menu. It also has an annoying channel bar on the left side that pops out whenever the mouse touches the left side of the screen. To set the popup to channel mode set the channelmode property to yes in the open() command.

      For example, this command in the popup script opens a window in channel mode:

      HTML Code:
      window.open(href, windowname, 'width=400,height=150,channelmode=yes,scrollbars=yes');
      You can indicate both MSIE's channel mode and Netscape's full screen mode in the same open() command. For example, this command in the popup script opens a window in full screen in Netscape and channel mode in MSIE:

      HTML Code:
      window.open(href, windowname, 'channelmode=yes,type=fullWindow,scrollbars=yes');

      Comment

      Working...
      X