spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column78

Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

Netscape 6, Part VII: Object-Oriented DOCJSLIB 3.1

Application Listing

<HTML>
<HEAD>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript" SRC="browserSniffer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="docjslibSuperClass.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="createTheProperSubClass.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var classSelectionObj = new createTheProperSubClass();
var myBrowserAPIObj = classSelectionObj.getTheProperSubClass();
// -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function rowComplete() {
  var lastPlayedBy = grid[1][1];
  if ((lastPlayedBy != "") &&
      (grid[2][1] == lastPlayedBy) &&
      (grid[3][1] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][2];
  if ((lastPlayedBy != "") && 
      (grid[2][2] == lastPlayedBy) &&
      (grid[3][2] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][3];
  if ((lastPlayedBy != "") && 
      (grid[2][3] == lastPlayedBy) &&
      (grid[3][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][1];
  if ((lastPlayedBy != "") && 
      (grid[1][2] == lastPlayedBy) &&
      (grid[1][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[2][1];
  if ((lastPlayedBy != "") && 
      (grid[2][2] == lastPlayedBy) &&
      (grid[2][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[3][1];
  if ((lastPlayedBy != "") && 
      (grid[3][2] == lastPlayedBy) &&
      (grid[3][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][1];
  if ((lastPlayedBy != "") && 
      (grid[2][2] == lastPlayedBy) &&
      (grid[3][3] == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][3];
  if ((lastPlayedBy != "") && 
      (grid[2][2] == lastPlayedBy) &&
      (grid[3][1] == lastPlayedBy)) return(true);
}

function itsAtie() {
  for( var i = 1; i <= 3; i++)
    for( var j = 1; j <= 3; j++)
      if (grid[i][j] == "") return(false);
  return(true);
}

function handleImageClick(id, param1, param2) {
    if (myBrowserAPIObj.getSrc(id + "img").indexOf('initialbutton.gif') < 0) return;  
    if (lastPlayedBy == "o") {
      myBrowserAPIObj.setSrc(id + "img", "xbutton.gif");
      lastPlayedBy = "x";
    } 
    else {  // lastPlayedBy = "x"
      myBrowserAPIObj.setSrc(id + "img", "obutton.gif");
      lastPlayedBy = "o";
    }
    grid[param1][param2] = lastPlayedBy;
    if (rowComplete()) {
      alert("The " + lastPlayedBy + " wins");
      window.location.reload();
    }
    else if (itsAtie()) {
           alert("It's a tie");
           window.location.reload();
         }
}

var lastPlayedBy = "o";
var grid = new Array();
grid[1] = new Array();
grid[2] = new Array();
grid[3] = new Array();

for (var i = 1; i <= 3; i++)
  for (var j = 1; j <= 3; j++)
    grid[i][j] = "";
 

var xBase = 8;
var yBase = 8;
for (var i = 1; i <= 3; i++) {
  for (var j = 1; j <= 3; j++) {
    myBrowserAPIObj.makeImage("box" + i + "" + j,          // id
              "initialbutton.gif",         // URL
              100,                         // height
              100,                         // width
              "game box",                  // alternative
               xBase + (i-1) * 108,        // position from left
               yBase + (j-1) * 108,        // position from top
               i,                          // parameter passed to onclick handler
               j);                         // parameter passed to onclick handler
  }
}


// -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var maxZ = 1;
function popout(id, posY, width) {
  this.id = id; // the element's name (and the variable's name)
  this.posY = posY; // the element's top property
  this.width = width; // the element's width
  this.show = false; // do not show the element
  this.makeImage = makeImage; // constructs the image's tab
  this.makeElement = makeElement; // constructs the content box
  this.showElement = showElement; // sets the element's visibility
}

function makeImage(id, imgURL, imgHeight, imgWidth, imgAlt, yPosition) {
  document.write(
    '<STYLE TYPE="text/css">',
    '#', id, 'img {',
      'position: absolute;',
      'left: 0; top: ', yPosition, ';',
      'width: ', imgWidth, ';',
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', id, 'img">',
    '<A HREF="javascript:', id, '.showElement()">',
    '<IMG SRC="', imgURL, '" ALT="', imgAlt, '" BORDER="0" ',
    'HEIGHT="', imgHeight, '" WIDTH="', imgWidth, '">',
    '</A></DIV>'
  );
}

function makeElement(id, boxBg, boxColor, boxCode, yPosition, boxWidth) {
  document.write(
    '<STYLE TYPE="text/css">',
    '#', id, 'box {',
      'position: absolute;',
      'left: 0; top: ', yPosition, ';',
      'width: ', boxWidth, ';',
      'layer-background-color: ', boxBg, ';',
      'background-color: ', boxBg, ';',
      'visibility: hidden;',
      'border-width: 2;',
      'border-style: solid;',
      'border-color: ', boxColor, ';',
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', id, 'box">',
    boxCode,
    '</DIV>'
  );
}

function showElement() {
  this.show = !this.show;
  var pos = (this.show) ? this.width : 0;
  var str = (this.show) ? 'show' : 'hide';
  myBrowserAPIObj.setPosFromLeft(this.id + 'img', pos);
  maxZ++;
  myBrowserAPIObj.setZposition(this.id + 'img', maxZ);
  myBrowserAPIObj.setZposition(this.id + 'box', maxZ);
  myBrowserAPIObj.setVisibility(this.id + 'box', this.show);
}

function init() {
  menu1 = new popout('menu1', 300, 90); // a global variable
  menu1.makeImage('menu1','columns.gif', 130, 18,
                  'JavaScript Columns', 300);
  menu1.makeElement('menu1', '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>',
	300,
	90);

  menu2 = new popout('menu2', 440, 200); // a global variable
  menu2.makeImage('menu2','examples.gif', 130, 18,
                  'JavaScript Examples', 440);
  menu2.makeElement('menu2', '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>',
	440,
	200);
}

init();

// -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var windowWidth= 0;
var windowHeight= 0;
var pageScrollLeft= 0;
var pageScrollTop= 0;
var imageWidth= 147;
var imageHeight= 17;
var rightSpacer= 17;
var bottomSpacer= 25;

function makeLinkedImage(imgID,    // given id
                   imgURL,         // image URL
                   linkURL,        // link URL
                   imgHeight,      // image height
                   imgWidth,       // image width
                   imgAlt,         // alternative image
                   posFromLeft,    // absolute position from left of window
                   posFromTop,     // absolute position from top of window
                   imgVisibility,  // image visibility  (true of false)
                   imgZindex)      // image Z index
  {
  var visibility = (imgVisibility) ? 'visible' : 'hidden';
  document.write(
    '<STYLE TYPE="text/css">',
    '#', imgID, ' {',
      'position: absolute;',
      'visibility: ', visibility, ';',
      'left: ', posFromLeft, ';',
      'top: ', posFromTop, ';',
      'width: ', imgWidth, ';',
      'z-index:', imgZindex,
    '}',
    '</STYLE>',
    '<DIV ID="', imgID, '">',
    '<A HREF="', linkURL, '">',
    '<IMG NAME="', imgID, 'img" ID="', imgID, 'img" SRC="', imgURL, '" ALT="', imgAlt, 
    '" BORDER="0" ', 'HEIGHT="', imgHeight, '" WIDTH="', imgWidth, '">',
    '</A></DIV>'
  );
}

function waterMark(){
    oldWindowWidth= windowWidth;
    oldWindowHeight= windowHeight;
    oldPageScrollLeft= pageScrollLeft;
    oldPageScrollTop= pageScrollTop;
    windowWidth = myBrowserAPIObj.getWindowWidth();
	windowHeight = myBrowserAPIObj.getWindowHeight();
    pageScrollLeft = myBrowserAPIObj.getPageScrollLeft();
    pageScrollTop = myBrowserAPIObj.getPageScrollTop();
    if ((windowHeight != oldWindowHeight)||(windowWidth != 
      oldWindowWidth)||(pageScrollLeft != oldPageScrollLeft)||
      (pageScrollTop != oldPageScrollTop)){

      myBrowserAPIObj.setPosFromTop("docjslib", windowHeight + pageScrollTop - 
                            (imageHeight + bottomSpacer));
      myBrowserAPIObj.setPosFromLeft("docjslib", windowWidth + pageScrollLeft - 
                            (imageWidth + rightSpacer));
      var topZ = myBrowserAPIObj.findHighestZ();
      myBrowserAPIObj.setZposition("docjslib", topZ);
    }
}

makeLinkedImage("docjslib",             // id
              "docjslib.gif",                    // image URL
              "http://www.webreference.com/js",  // link URL
              27,                                // height
              147,                               // width
              "Click here for all Doc JavaScript Columns",  // alternative
              1000,                           // position from left
              1000,                           // position from top
              true,                           // visibility
              0);                             // z index
             
myBrowserAPIObj.doThisCommandEveryIntervalMS("waterMark()", 100);
// -->
</SCRIPT>
</BODY>
</HTML>

Next: Browser-independent superclass object listing

More Resources from Doc JavaScript
Columns Popular Columns Tips Tools
Latest Columns
41-50 | 31-40 | 21-30
11-20 | 1-10
Working with Windows
JavaScript and Frames
Bookmarklets
Random Tips
Personalized Tips
RSS Channels
Menu Builder
Rollover Builder
Rotation Builder
Reference Tip Categories (want one?)
Links
For Your Site
Did you learn something? Do you like this site? Please link to us!

http://www.internet.com

webref The latest from WebReference.com Browse >
Professional Perl: The Subroutine Stack · DHTML Hierarchical Menus: Version 4.0.5 · New RSS Feeds from Java Boutique
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 


Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: February 26, 2001
Revised: February 26, 2001

URL: http://www.webreference.com/js/column78/6.html