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:

"columns" - The image ID. Chosen arbitrarily.
"columns.gif" - The URL of the image's GIF file.
130 - The image's height. If it is different than the GIF height, image will be distorted.
18 - The image's width. If it is different than the GIF width, image will be distorted.
"JavaScript Columns" - The alternative text that will be displayed until GIF is loaded.
0 - Absolute distance in pixels from the left edge of the window. The 0 value means that the image will be aligned with the left edge of the window.
200 - Absolute distance in pixels from the top of the window.
0 - Value passed to the onClick event handler. Not used in this application.
0 - Value passed to the onClick event handler. Not used in this application.

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").

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

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

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

Writing the Pop-out Elements Application

Find a programming school near you