Allow the User to Suppress all Popups
Return to the Index
I want the user to be able to turn off the popups on a page, if they get too annoying for him.
You can allow the user to turn the popups OFF or ON using either a link or a button. As a convenience to the user, the CURRENT state of the toggle may be displayed:
  • In the Status bar - semi-permanently unless something else needs it, and/or
  • In a separate little popup before the user clicks the link or button.
Click the button and watch the Status Bar.
OR   Toggle popups (with a link)

MOUSEOVER this link to test to see if the popups are toggling  Mouseover and watch the Status Bar. You may CLICK THIS link at any time to get the next page. In this tutorial, it will be a dummy page.

First, we make the toggle work
  • In the <head> of the page, declare a global variable
      <script language=javascript>
      var OKtoPopup=true;
      </script>
  • In your copy of overlib.js, add one line. First locate the line function overlib(){. Then add this line immediately below it.
      function overlib(){
         if ( typeof OKtoPopup != 'undefined' && ! OKtoPopup) { return true;};
      See explanation #1 below
  • In your main page, add a BUTTON
      <form name=xx>
      <input type=button onclick="OKtoPopup=!OKtoPopup;" value="Toggle popups">
      </form>
      See explanation #2 below
  • OR add a LINK
      <a href="javascript:void(0)" onClick="OKtoPopup=!OKtoPopup;">Toggle popups</a>
  • And here is the TEST LINK, which is a prototype for your real links
      <a href="whatever.html"
         onmouseover="window.status='AnyWord';
         return overlib('Popups are certainly on. Click the link.', TEXTSIZE,2);"
         onmouseout="nd()"
      ><b>MOUSEOVER</b>this link to <b>test</b> to see if the popups are toggling</a>
  • Done. Now some explanations
    1. if ( typeof OKtoPopup != 'undefined' && ! OKtoPopup) { return true;};
      This overlib.js file might be used for all the pages on your website, including pages that do not employ toggling. Only the pages with toggling need modification. A non-toggling page won't have the declaration var OKtoPopup=true;. We don't want overlib to complain if it can't find the variable it is supposed to test.
      So we test "does the variable exist?" and then we test "is it set false?".
      If it exists and is false, overlib() returns immediately and does not popup.
      If the variable does not exist, then this must be an unmodified page. Act normally.
      If the variable exists and is true, act normally.
    2. The BUTTON is a form element and must be inside <form> tags. (It will work without <form> tags in IE, but you must use the <form> tags if you expect this feature to work in Netscape 4 browsers.) The <form> tag introduces it's own rules - such as extra line-breaks before and after, so you may have difficulty putting the BUTTON in-line. The <a> tag is more flexible to locate.

Then we dress it up by adding the Status Bar control to the toggle button or link

  • In the <head> of the page, add a short function to set window.defaultStatus
      <script language=javascript>
      var OKtoPopup=true;
      function setStatusBar(){
         window.defaultStatus='The Popups are now '+
            (OKtoPopup?'being displayed':'suppressed');
      };
      setStatusBar();       This line causes the function to execute once when the page loads in order to initialize the Status Bar.
      </script>
  • In your main page, add to the BUTTON
      <form name=xx>
      <input type=button onclick="OKtoPopup=!OKtoPopup ; setStatusBar();" value="Toggle popups">
      </form>
  • OR add to the LINK
      <a href="javascript:void(0)"
         onClick="OKtoPopup=!OKtoPopup ; setStatusBar();">Toggle popups</a>

Extra credit. Manage the Status Bar DURING the mouseover of the test link.

  • Make these additions to the test link you built above.
      <a href="javascript:open1();"
         onmouseover="window.status='If you click the toggle button (or link), you will see a popup over this link.' ;
         return overlib('Popups are certainly on. Click the link.', TEXTSIZE,2,STATUS, 'You are seeing a popup');"
         onmouseout="nd()"
      ><b>MOUSEOVER</b>this link to <b>test</b> to see if the popups are toggling</a>
  • If popups are ON, then OverLIB will display the STATUS message 'You are seeing a popup'
  • If popups are OFF, the browser will display the WINDOW.STATUS message 'If you click the toggle button (or link), you will see a popup over this link', and the STATUS message in the overlib arg list will be ignored because overlib itself is aborted by the OKtoPopup flag.

OR we can dress it up by adding an informational popup to the toggle control

  • In the <head> of the page, add a short function to set window.defaultStatus
      <script language=javascript>
      var OKtoPopup=true;
      function setStatusBar(){
         window.defaultStatus='The Popups are now '+(OKtoPopup?'being displayed':'suppressed');
      };
      setStatusBar();
      function ShowToggleInAPopup(){
         VisiWord = OKtoPopup?'<font color=green>on</font>':'<font color=red>off</font>';
         savePopToggle=OKtoPopup; OKtoPopup=true;
         overlib('The Popups are currently switched '+VisiWord,
            TEXTSIZE,2,STATUS,'Flip the popup flag'      ,any other args you like);
         OKtoPopup=savePopToggle;
         return true;
      };
      </script>
      savePopToggle is needed because there is no way to show this status popup if the toggle is OFF. What we do is capture the toggle variable OKtoPopup, temporarily set it to true, call overlib(), then restore it to its previous value.
  • In your main page, add to the BUTTON (This extra popup won't show in Netscape 4. I can't remember why. No big deal. It's extraneous.)
      <form name=xx>
      <input type=button onmouseover="return ShowToggleInAPopup();"
         onmouseout="nd()"       onclick="OKtoPopup=!OKtoPopup; nd();"
         value="Toggle popups">
      </form>
  • OR add to the LINK
      <a href="javascript:void(0)" onmouseover="return ShowToggleInAPopup();"
         onmouseout="nd()"       onclick="OKtoPopup=!OKtoPopup; nd();"
      >Toggle popups</a>
  • There is an extra nd() added in the onClick. Why? As soon as you click, the toggle variable OKtoPopup is flipped, but the popup remains lit with the old value until you move the mouse off the button/link. To avoid confusion, this nd() is inserted to kill the popup as soon as the button is clicked.

You can combine all these status effects (as we did in the demo at the top of the page). Just pile everything into onclick.

    onclick="OKtoPopup=!OKtoPopup; setStatusBar(); nd();"
Please let me know if you encounter problems.Modified by REB,June 1, 2004