Introducing DOCJSLIB Version 2.0: Writing the Popout Elements - Doc JavaScript | WebReference

Introducing DOCJSLIB Version 2.0: Writing the Popout Elements - Doc JavaScript


Writing the Pop-out Elements Application

Our main application consists of just four calls, one call per every element positioned on the page. Let's place the columns image first. We do it by calling the makeImage()

DOCJSLIB function, with the appropriate arguments:

  makeImage("columns",             // given id
            "columns.gif",         // image URL
            130,                   // image height
            18,                    // image width
            "JavaScript Columns",  // alternative image
            0,                     // absolute position from left of window
            200,                   // absolute position from top of window
            0,                     // parameter passed to "onclick" handler
            0);                    // parameter passed to "onclick" handler

The arguments above are mostly self explanatory:

Let's position the columns box now. We do it by calling the makeBox()DOCJSLIB function:

makeBox("columnsBox",            // given id
          '<A HREF="/js/column1/">Column 1</A><BR>' +     // HTML filler
          '<A HREF="/js/column2/">Column 2</A><BR>' +
          '<A HREF="/js/column3/">Column 3</A><BR>' +
          '<A HREF="/js/column4/">Column 4</A><BR>' +
          '<A HREF="/js/column5/">Column 5</A><BR>' +
          '<A HREF="/js/column6/">Column 6</A><BR>' +
          '<A HREF="/js/column7/">Column 7</A><BR>' +
          '<A HREF="/js/column8/">Column 8</A><BR>' +
          '<A HREF="/js/column9/">Column 9</A><BR>' +
          '<A HREF="/js/column10/">Column 10</A><BR>' +
          '<A HREF="/js/column11/">Column 11</A><BR>' +
          '<A HREF="/js/column12/">Column 12</A><BR>' +
          '<A HREF="/js/column13/">Column 13</A>',
          90,                      // box width
          0,                       // absolute position from left of window
          200,                     // absolute position from top of window
          'beige',                 // box background color
          '#0000cc',               // html filler text color
          false);                  // visibility

The arguments are fairly obvious. Worth emphasizing again is the "columnsBox" ID, which is a concatenation of "columns" and "Box". The second argument is the filler of the box. In this case, we fill the box with links to our first thirteen columns. Also notice the last argument, which is the initial visibility. We set it to false, because the box is initially hidden.

We position the examples image similarly to the previous one, only in different location:

  makeImage("examples",             // given id
            "examples.gif",        // image URL
            130,                   // image height
            18,                    // image width
            "JavaScript Examples", // alternative image
            0,                     // absolute position from left of window
            340,                   // absolute position from top of window
            0,                     // parameter passed to "onclick" handler
            0);                    // parameter passed to "onclick" handler

We position the examples box in a similar way that we position the columns box:

 makeBox("examplesBox",            // given ID
          '<IMG SRC="docjx.gif" WIDTH="55" ' +     // HTML filler
          'HEIGHT="60" HSPACE="2" ALIGN="right">' +
          '<A HREF="/js/pharmacy/menu.html">A Popup Menu</A><BR>' +
          '<A HREF="/js/pharmacy/date.html">A Text Date</A><BR>' +
          '<A HREF="/js/pharmacy/form.html">A Feedback Form</A><BR>' +
          '<A HREF="/js/pharmacy/tbanner.html">A T-banner</A><BR>' +
          '<A HREF="/js/pharmacy/counter.html">A Personal Counter</A><BR>' +
          '<A HREF="/js/pharmacy/password.html">A Password Protector</A><BR>' +
          '<A HREF="/js/pharmacy/frames.html">A Frames Destroyer</A><BR>' +
          '<A HREF="/js/pharmacy/countdown.html">A Date Countdown</A>',
          200,                     // box width
          0,                       // absolute position from left of window
          340,                     // absolute position from top of window
          'beige',                 // box background color
          '#0000cc',               // html filler text color
          false);                  // visibility

Again, we chose the element ID ("examplesBox") to be derived automatically from its corresponding image's ID ("examples").

http://www.internet.com


Created: October 26, 1998
Revised: October 26, 1998

URL: http://www.webreference.com/js/column28/caller.html