Simple Sample/Test of "OVERLIB.IH"!

This is a test/sample page for my "OVERLIB.IH" ppwizard add-on, the actual javascript is open source and available from "http://www.bosrup.com/web/overlib/".

Place your mouse over any of the test paragraphs below to see the tooltips (of course you must have JavaScript enabled for this to work). There is also an example of a simple right click context menu.


Test "tooltips"

Tooltip Test #1

Tooltip Test #2

Tooltip Test #3

Tooltip Test #4

Tooltip Test #5, thin tooltip (note that this shows up a "OverLib.JS" bug because the browser increases the size from "1", this shows up as tootip getting chopped at the edge of a window - not positioned correctly)


Right Click Context Menu

Right click here to bring up a simple context menu.


This pages Source Code

The complete source code for this page is shown below:

    ;----------------------------------------------------------------------------
    ;     MODULE NAME:   OVERLIB.IT
    ;
    ;     DESCRIPTION:   This is a sample file which demonstrates how the
    ;                    "OVERLIB.IH" file can be used.
    ;
    ;                    You can generate the html at any time by (windows):
    ;
    ;                        regina ppwizard OVERLIB.it
    ;
    ;----------------------------------------------------------------------------
    
    ;--- Start HTML -------------------------------------------------------------
    #define PageTitle    Simple Sample/Test of "OVERLIB.IH"!
    #define OverLibHome  http://www.bosrup.com/web/overlib/
    <HTML>
    <HEAD>
       <TITLE><$PageTitle></TITLE>
       <STYLE>
         <!--
           .ContextMenu A:visited {COLOR:blue; TEXT-DECORATION:none}
           .ContextMenu A:link    {COLOR:blue; TEXT-DECORATION:none}
           .ContextMenu A:hover   {COLOR:black; TEXT-DECORATION:underline; BACKGROUND:antiquewhite}
         -->
       </STYLE>
    </HEAD>
    <BODY>
    
    ;--- Load tooltip support (generates code to load javascript support) -------
    ;#define  TT_USE_HTML_TITLE_ATTRIBUTE_INSTEAD Y
    #include "OVERLIB.IH"
    
    ;--- Heading + First para ---------------------------------------------------
    #(
       <$DivTT 'My package basically simplifies the use of the JavaScript,
               however it can also be configured to generate normal HTML
               "TITLE" based tooltips.'
           TITLE=^OVERLIB.IT^
       >
    #)
    <CENTER><H1><$PageTitle></H1></CENTER>
    <P>This is a test/sample page for my "OVERLIB.IH" ppwizard add-on, the
    actual javascript is open source and available from
    "<a href="<$OverLibHome>" target="_blank"><$OverLibHome></a>".
    
    ;--- Second para ------------------------------------------------------------
    <P>Place your mouse over any of the test paragraphs below to see the
    tooltips (of course you must have JavaScript enabled for this to work).
    There is also an example of a simple right click context menu.
    </div>
    
    
    ;============================================================================
    ;============================================================================
    ;============================================================================
    
    <P><HR COLOR="red" size="1">
    <CENTER><H1>Test "tooltips"</H1></CENTER>
    
    
    ;--- Test -------------------------------------------------------------------
    <P <$TT "Simple Test of Tooltip for paragraph">>
       Tooltip Test #1
    </P>
    
    ;--- Test -------------------------------------------------------------------
    <span <$TT =^Test of "my" 'TT' macro (text contains both single and double quotes)^>>
    <P>Tooltip Test #2</P>
    </span>
    
    ;--- Test -------------------------------------------------------------------
    <$SpanTT 'test of my SpanTT macro.'>
    <P>Tooltip Test #3</P>
    </span>
    
    ;--- Test -------------------------------------------------------------------
    <P>
    <$SpanTT 'Test of my SpanTT macro with a title (which contains both single and double quotes)!' TITLE=^'A' "TITLE"^>
       Tooltip Test #4
    </span>
    
    ;--- Test -------------------------------------------------------------------
    <$SpanTT 'Thin red tooltip!' PARMS=^WIDTH, 1, TEXTCOLOR, 'red'^>
    <P>Tooltip Test #5, thin tooltip (note that this shows up a "OverLib.JS" bug because the
    browser increases the size from "1", this shows up as tootip getting chopped
    at the edge of a window - not positioned correctly)
    </span>
    
    
    
    ;============================================================================
    ;============================================================================
    ;============================================================================
    
    
    ;--- Now try a right click context menu -------------------------------------
    <div ID="TryContextMenuDivision">
    <P><HR COLOR="red" size="1">
    <CENTER><H1>Right Click Context Menu</H1></CENTER>
    <p>Right click here to bring up a simple context menu.
    </div>
    
    ;--- Define how to "transform" HTML into JS code to add to variable ---------
    #DefineRexx ADD2_THEHTML
           FileLine = ReplaceString(FileLine, '"', '\"');         ;;Handle double quotes
           FileLine = 'TheHtml = TheHtml + "' || FileLine || '";' ;;Wrap in JS code to add the to "TheHtml" variable
    #DefineRexx
    
    ;--- Create a couple of aliases to hopefully make code self explanatory -----
    #define Add2TheHtml    \
            #Transform ADD2_THEHTML
    #define /Add2TheHtml   \
            #Transform
    
    <script language="JavaScript1.2">
    ;############################################################################
    function CloseContextMenu()
    ;
    ; This function "knows" how to remove the context menu.
    ; You may wish to call this if the user clicks outside of the context menu
    ; or in other circumstances.
    ;############################################################################
    {
       hideObject(over);
    }
    
    ;############################################################################
    function Option1()
    ;
    ; The first option on our right click context menu, called when user chooses
    ; this action.
    ;############################################################################
    {
       ;--- Do something --------------------------------------------------------
       alert(" Option 1 - Context menu still visible");
    
       ;--- Remove the menu (if you wish) ---------------------------------------
       CloseContextMenu();
       return(false);
    }
    
    ;############################################################################
    function Option2()
    ;
    ; The second option on our right click context menu, called when user chooses
    ; this action.
    ;############################################################################
    {
       ;--- Remove the menu (if you wish) ---------------------------------------
       CloseContextMenu();
    
       ;--- Do something --------------------------------------------------------
       alert(" Option 2 - Context menu removed");
       return(false);
    }
    
    
    ;############################################################################
    function Option3()
    ;
    ; The third option on our right click context menu, called when user chooses
    ; this action.
    ;############################################################################
    {
       ;--- Do something --------------------------------------------------------
       alert(" Option 3 - Context menu stays up");
       return(false);
    }
    
    
    ;############################################################################
    function RightClickMenu()
    ;
    ; Note that the context menu should not try to do "overlib" tooltips as this
    ; will cause the menu to be removed (a restriction). If you want "tooltips"
    ; for these use the HTML "TITLE" attribute.
    ;############################################################################
    {
       ;--- JavaScript Code to generate HTML in "TheHtml" variable --------------
       #define EXPLAIN Unfortunately "overlib" can not be used for tooltips within the context menu...
       var TheHtml = "";
       <$Add2TheHtml>
           <div class="ContextMenu">
             <ol>
               ;--- I would normally create a macro for something as repetitive as this... ---
               <li><a href="" title='Tooltip for Option 1! <$EXPLAIN>' onclick='return Option1()'>Options #1</a>
               <li><a href="" title='Tooltip for Option 2! <$EXPLAIN>' onclick='return Option2()'>Options #2</a>
               <li><a href="" title='Tooltip for Option 3! <$EXPLAIN>' onclick='return Option3()'>Options #3</a>
             </ol>
           </div>
       <$/Add2TheHtml>
    
       ;--- Display the HTML generated above in the context menu ----------------
       overlib(TheHtml, STICKY, CAPTION, "Context Menu");
    
       ;--- Prevent the event "bubbling" ----------------------------------------
       event.cancelBubble = true;
       event.returnValue  = false;
       return(false);
    }
    TryContextMenuDivision.oncontextmenu = RightClickMenu
    </script>
    
    
    ;============================================================================
    ;============================================================================
    ;============================================================================
    
    
    ;--- If user has downloaded the header then show the source code ------------
    #if    FindFile("HTMLPRE.IH") <> ''
           ;--- Header available ------------------------------------------------
           <P><HR COLOR="red" size="1">
           #(
               <$DivTT 'I have kept the code relatively simple so as not to be
                        too confusing to ppwizard beginners.
                        This means I did not always do things the "best" way.'
                   TITLE=^OVERLIB.IT^
               >
           #)
           <CENTER><H1>This pages Source Code</H1></CENTER>
           <P>The complete source code for this page is shown below:
           #include "HTMLPRE.IH"               ;;Load "smart" PRE support (takes care of unsafe chars etc)
           <$ExampleFile FILE="OVERLIB.IT" STATE="REMEMBER">
           </div>
    #endif
    
    
    ;============================================================================
    ;============================================================================
    ;============================================================================
    
    
    ;--- Load standard "where do ya get it?" ------------------------------------
    #if    FindFile("ppwaddon.ih") <> ''
           ;--- This file won't be around on YOUR machine! ----------------------
           #define  PPWADDON_PAGE   OVERLIB.IH
           #include "ppwaddon.ih"
    #endif
    
    ;--- End of HTML ------------------------------------------------------------
    </BODY>
    </HTML>
    

Where can PPWIZARD & It's Headers be found?

In case you got here via a search engine or a link from another site you can download the header file used in this sample page ("OVERLIB.IH") and ppwizard itself (my free html preprocessor) from the ppwizard download page at:

PPWIZARD can be thought of as a "Super SSI", it can include external files and do most of the things that server side includes can (and heaps more) but do them in a simpler manner and have no impact or requirements on the server.

PPWIZARD is the most powerful mechanism available for code reuse and automation of common tasks. See the PPWIZARD pages for more details.


Saturday October 27 2001 at 8:43am
(This is the generated output from sample PPWIZARD based source code making use of the "OVERLIB.IH" header file)