Pop-out Elements: Initializing the Elements

Initializing the Elements

Adobe's Flash 10.1 Goes Mobile (Minus iPhone)

The script's init() function defines and initializes the pop-out elements:

function init() {
  if (!styleEnabled()) return;
  menu1 = new popout('menu1', 300, 90); // a global variable
  menu1.makeImage('columns.gif', 130, 18,
                  'JavaScript Columns');
  menu1.makeElement('beige', '#0000cc',
    '<A HREF="/js/column1/">Column 1</A><BR>' +
    '<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>'
  );
  menu2 = new popout('menu2', 440, 200); // a global variable
  menu2.makeImage('examples.gif', 130, 18,
                  'JavaScript Examples');
  menu2.makeElement('beige', '#0000cc',
    '<IMG SRC="/js/pharmacy/docjx.gif" WIDTH="55" ' +
    '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>'
  );
}

As you can see, the first statement of the function invokes another function, styleEnabled():

function styleEnabled() {
  return ((NS4 && document.test) || IE4);
}

styleEnabled() simply determines if style sheets are enabled by detecting the existance of a pre-defined element. You may recall that we installed a simple SPAN element before the script:

<SPAN ID="test" STYLE="position: absolute;"></SPAN>

The function returns true if IE4 is true, or if both NS4 and document.test evaluate to true. That is, if the user is running Navigator 4.0x, it checks if document.test exists. We do not need to check the existance of the element for Internet Explorer 4.0x, because Explorer cannot disable style sheets. The init() function terminates if the browser doesn't support style sheets.

Another important point in the init() function is that the instances of the popout object are defined as global variables. Their showElement() method is invoked as a deferred script (when the user clicks the tab), so these objects must be accessible. Therefore, they must be global variables.

And last, but not least important, the statement that calls the function:

init();

Why did we use a function, rather than global statements, to initialize the pop-out elements? The answer is very simple. The return statement terminates a function, so it is easy to stop the script if style sheets aren't enabled.