home *** CD-ROM | disk | FTP | other *** search
/ PC World 2001 March / PCWorld_2001-03_cd.bin / KOMUNIK / progweb / progweb.exe / phpnuke / html / scroller.js < prev    next >
Encoding:
JavaScript  |  2000-12-05  |  10.2 KB  |  384 lines
  1. /******************************************************************************
  2. * scroller.js                                                                 *
  3. *                                                                             *
  4. * Copyright 1999 by Mike Hall.                                                *
  5. * Web address: http://www.brainjar.com                                        *
  6. * Last update: March 21, 2000.                                                *
  7. *                                                                             *
  8. * Allows you to create scrolling displays on a page. Multiple scrollers can   *
  9. * be defined, each with it's own parameters and list of items. Item text can  *
  10. * include basic HTML tags, including links and images.                        *
  11. * Note: requires dhtmllib.js.                                                 *
  12. ******************************************************************************/
  13.  
  14. //*****************************************************************************
  15. // Scroller constructor.
  16. //*****************************************************************************
  17.  
  18. function Scroller(x, y, width, height, border, padding) {
  19.  
  20.   this.x = x;
  21.   this.y = y;
  22.   this.width = width;
  23.   this.height = height;
  24.   this.border = border;
  25.   this.padding = padding;
  26.  
  27.   this.items = new Array();
  28.   this.created = false;
  29.  
  30.   // Set default colors.
  31.  
  32.   this.fgColor = "#000000";
  33.   this.bgColor = "#ffffff";
  34.   this.bdColor = "#000000";
  35.  
  36.   // Set default font.
  37.  
  38.   this.fontFace = "Arial,Helvetica";
  39.   this.fontSize = "2";
  40.  
  41.   // Set default scroll timing values.
  42.  
  43.   this.speed = 50;
  44.   this.pauseTime = 2000;
  45.  
  46.   // Define methods.
  47.  
  48.   this.setColors = scrollerSetColors;
  49.   this.setFont = scrollerSetFont;
  50.   this.setSpeed = scrollerSetSpeed;
  51.   this.setPause = scrollersetPause;
  52.   this.addItem = scrollerAddItem;
  53.   this.create = scrollerCreate;
  54.   this.show = scrollerShow;
  55.   this.hide = scrollerHide;
  56.   this.moveTo = scrollerMoveTo;
  57.   this.moveBy = scrollerMoveBy;
  58.   this.getzIndex = scrollerGetzIndex;
  59.   this.setzIndex = scrollerSetzIndex;
  60.   this.stop = scrollerStop;
  61.   this.start = scrollerStart;
  62. }
  63.  
  64. //*****************************************************************************
  65. // Scroller methods.
  66. //*****************************************************************************
  67.  
  68. function scrollerSetColors(fgcolor, bgcolor, bdcolor) {
  69.  
  70.   if (!this.created) {
  71.     this.fgColor = fgcolor;
  72.     this.bgColor = bgcolor;
  73.     this.bdColor = bdcolor;
  74.   }
  75. }
  76.  
  77. function scrollerSetFont(face, size) {
  78.  
  79.   if (!this.created) {
  80.     this.fontFace = face;
  81.     this.fontSize = size;
  82.   }
  83. }
  84.  
  85. function scrollerSetSpeed(pps) {
  86.  
  87.   if (!this.created)
  88.     this.speed = pps;
  89. }
  90.  
  91. function scrollersetPause(ms) {
  92.  
  93.   if (!this.created)
  94.     this.pauseTime = ms;
  95. }
  96.  
  97. function scrollerAddItem(str) {
  98.  
  99.   if (!this.created)
  100.     this.items[this.items.length] = str;
  101. }
  102.  
  103. function scrollerCreate() {
  104.  
  105.   var start, end;
  106.   var str;
  107.   var i, j;
  108.   var x, y;
  109.  
  110.   if (!isMinNS4 && !isMinIE4)
  111.     return;
  112.  
  113.   // On first scroller, start interval timer.
  114.  
  115.   if (scrollerList.length == 0)
  116.     setInterval('scrollerGo()', scrollerInterval);
  117.  
  118.   // Create the scroller only once.
  119.  
  120.   if (this.created)
  121.     return;
  122.   this.created = true;
  123.  
  124.   // Copy first item to the end of the list, this lets us scroll from the last
  125.   // defined item to the first without jumping.
  126.  
  127.   this.items[this.items.length] = this.items[0];
  128.  
  129.   // Set up HTML code for item text.
  130.  
  131.   start = '<table border=0'
  132.         + ' cellpadding=' + (this.padding + this.border) + ' cellspacing=0'
  133.         + ' width=' + this.width + ' height=' + this.height + '>'
  134.         + '<tr><td>'
  135.         + '<font color="' + this.fgColor + '" face="' + this.fontFace + '"'
  136.         + ' size=' + this.fontSize + '>';
  137.   end   = '</font></td></tr></table>';
  138.  
  139.   // Build the layers.
  140.  
  141.   if (isMinNS4) {
  142.     this.baseLayer = new Layer(this.width);
  143.     this.scrollLayer = new Layer(this.width, this.baseLayer);
  144.     this.scrollLayer.visibility = "inherit";
  145.     this.itemLayers = new Array();
  146.     for (i = 0; i < this.items.length; i++) {
  147.       this.itemLayers[i] = new Layer(this.width, this.scrollLayer);
  148.       this.itemLayers[i].document.open();
  149.       this.itemLayers[i].document.writeln(start + this.items[i] + end);
  150.       this.itemLayers[i].document.close();
  151.       this.itemLayers[i].visibility = "inherit";
  152.     }
  153.  
  154.     // Set background colors.
  155.  
  156.     setBgColor(this.baseLayer, this.bdColor);
  157.     setBgColor(this.scrollLayer, this.bgColor);
  158.   }
  159.  
  160.   if (isMinIE4) {
  161.     i = scrollerList.length;
  162.     str = '<div id="scroller' + i + '_baseLayer"'
  163.         + ' style="position:absolute;'
  164.         + 'left:0px; top:0px;'
  165.         + 'background-color:' + this.bdColor + ';'
  166.         + 'width:' + this.width + 'px;'
  167.         + 'height:' + this.height + 'px;'
  168.         + 'overflow:hidden;'
  169.         + 'visibility:hidden;">\n'
  170.         + '<div id="scroller' + i + '_scrollLayer"'
  171.         + ' style="position:absolute;'
  172.         + 'background-color: ' + this.bgColor + ';'
  173.         + 'width:' + this.width + 'px;'
  174.         + 'height:' + (this.height * this.items.length) + 'px;'
  175.         + 'visibility:inherit;">\n';
  176.     for (j = 0; j < this.items.length; j++) {
  177.       str += '<div id="scroller' + i + '_itemLayer' + j + '"'
  178.           +  ' style="position:absolute;'
  179.           +  'width:' + this.width + 'px;'
  180.           +  'height:' + this.height + 'px;'
  181.           +  'visibility:inherit;">\n'
  182.           +  start + this.items[j] + end
  183.           +  '</div>\n';
  184.     }
  185.     str += '</div>\n'
  186.         +  '</div>\n';
  187.  
  188.     // Insert HTML code at end of page. For IE4, need to scroll window to
  189.     // end of page, insert and scroll back to correct bug.
  190.  
  191.     if (!isMinIE5) {
  192.       x = getPageScrollX();
  193.       y = getPageScrollY();
  194.       window.scrollTo(getPageWidth(), getPageHeight());
  195.     }
  196.     document.body.insertAdjacentHTML("beforeEnd", str);
  197.     if (!isMinIE5)
  198.       window.scrollTo(x, y);
  199.  
  200.     // Get handles to each layer.
  201.  
  202.     this.baseLayer = getLayer("scroller" + i + "_baseLayer");
  203.     this.scrollLayer = getLayer("scroller" + i + "_scrollLayer");
  204.     this.itemLayers = new Array();
  205.     for (j = 0; j < this.items.length; j++)
  206.       this.itemLayers[j] = getLayer("scroller" + i + "_itemLayer" + j);
  207.   }
  208.  
  209.   // Position and clip base and scroll layers.
  210.  
  211.   moveLayerTo(this.baseLayer, this.x, this.y);
  212.   clipLayer(this.baseLayer, 0, 0, this.width, this.height);
  213.   moveLayerTo(this.scrollLayer, this.border, this.border);
  214.   clipLayer(this.scrollLayer, 0, 0,
  215.             this.width - 2 * this.border, this.height - 2 * this.border);
  216.  
  217.   // Position and clip each item layer.
  218.  
  219.   x = 0;
  220.   y = 0;
  221.   for (i = 0; i < this.items.length; i++) {
  222.     moveLayerTo(this.itemLayers[i], x, y);
  223.     clipLayer(this.itemLayers[i], 0, 0, this.width, this.height);
  224.     y += this.height;
  225.   }
  226.  
  227.   // Set up scrolling parameters.
  228.  
  229.   this.stopped = false;
  230.   this.currentY = 0;
  231.   this.stepY = this.speed / (1000 / scrollerInterval);
  232.   this.stepY = Math.min(this.height, this.stepY);
  233.   this.nextY = this.height;
  234.   this.maxY = this.height * (this.items.length - 1);
  235.   this.paused = true;
  236.   this.counter = 0;
  237.  
  238.   // Add to global list.
  239.  
  240.   scrollerList[scrollerList.length] = this;
  241.  
  242.   // Display it.
  243.  
  244.   showLayer(this.baseLayer);
  245. }
  246.  
  247. function scrollerShow() {
  248.  
  249.   if (this.created)
  250.     showLayer(this.baseLayer);
  251. }
  252.  
  253. function scrollerHide() {
  254.  
  255.   if (this.created)
  256.     hideLayer(this.baseLayer);
  257. }
  258.  
  259. function scrollerMoveTo(x, y) {
  260.  
  261.   if (this.created)
  262.     moveLayerTo(this.baseLayer, x, y);
  263. }
  264.  
  265. function scrollerMoveBy(dx, dy) {
  266.  
  267.   if (this.created)
  268.     moveLayerBy(this.baseLayer, dx, dy);
  269. }
  270.  
  271. function scrollerGetzIndex() {
  272.  
  273.   if (this.created)
  274.     return(getzIndex(this.baseLayer));
  275.   else
  276.     return(0);
  277. }
  278.  
  279. function scrollerSetzIndex(z) {
  280.  
  281.   if (this.created)
  282.     setzIndex(this.baseLayer, z);
  283. }
  284.  
  285. function scrollerStart() {
  286.  
  287.   this.stopped = false;
  288. }
  289.  
  290. function scrollerStop() {
  291.  
  292.   this.stopped = true;
  293. }
  294.  
  295. //*****************************************************************************
  296. // Code for scrolling.
  297. //*****************************************************************************
  298.  
  299. // An array is used to hold a pointer to each scroller that is defined. The
  300. // scrollerGo() function runs at regular intervals and updates each scroller
  301. // in this list.
  302.  
  303. var scrollerList     = new Array();
  304. var scrollerInterval = 20;
  305.  
  306. function scrollerGo() {
  307.  
  308.   var i;
  309.  
  310.   // Update each scroller object in the list.
  311.  
  312.   for (i = 0; i < scrollerList.length; i++) {
  313.  
  314.     // If stopped, skip.
  315.  
  316.     if (scrollerList[i].stopped);
  317.  
  318.     // If paused, update counter.
  319.  
  320.     else if (scrollerList[i].paused) {
  321.       scrollerList[i].counter += scrollerInterval;
  322.       if (scrollerList[i].counter > scrollerList[i].pauseTime)
  323.         scrollerList[i].paused = false;
  324.     }
  325.  
  326.     // Scroll it.
  327.  
  328.     else {
  329.       scrollerList[i].currentY += scrollerList[i].stepY;
  330.  
  331.       // Pause it if the next item has scrolled into view.
  332.  
  333.       if (scrollerList[i].currentY >= scrollerList[i].nextY) {
  334.         scrollerList[i].paused = true;
  335.         scrollerList[i].counter = 0;
  336.         scrollerList[i].currentY = scrollerList[i].nextY;
  337.         scrollerList[i].nextY += scrollerList[i].height;
  338.       }
  339.  
  340.       // When we reach the end, start over.
  341.  
  342.       if (scrollerList[i].currentY >= scrollerList[i].maxY) {
  343.         scrollerList[i].currentY -= scrollerList[i].maxY;
  344.         scrollerList[i].nextY = scrollerList[i].height;
  345.       }
  346.       scrollLayerTo(scrollerList[i].scrollLayer,
  347.                     0, Math.round(scrollerList[i].currentY),
  348.                     false);
  349.     }
  350.   }
  351. }
  352.  
  353. //*****************************************************************************
  354. // Code to handle a window resize.
  355. //*****************************************************************************
  356.  
  357. // These variables are used to determine if a resize event is a true one in
  358. // older releases of NS4.
  359.  
  360. var origWidth;
  361. var origHeight;
  362.  
  363. // Reload page in case of a browser resize.
  364.  
  365. if (isMinNS4) {
  366.   origWidth  = window.innerWidth;
  367.   origHeight = window.innerHeight;
  368. }
  369. window.onresize = scrollerReload;
  370.  
  371. function scrollerReload() {
  372.  
  373.   if (isMinNS4 && origWidth == window.innerWidth && origHeight == window.innerHeight)
  374.     return;
  375.  
  376.   // For IE, reload on a timer in case the Windows 'Show window contents while
  377.   // dragging' display option is on.
  378.  
  379.   if (isMinIE4)
  380.     setTimeout('window.location.href = window.location.href', 2000);
  381.   else
  382.     window.location.href = window.location.href;
  383. }
  384.