Posted By

donkeykong on 07/15/08


Tagged

javascript resize drag Mike Hall


Versions (?)

javascript drag drop function


 / Published in: Other
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <!--************************************************************************-->
  3. <!--* Windows Demo *-->
  4. <!--* *-->
  5. <!--* Copyright 2001 by Mike Hall *-->
  6. <!--* Please see http://www.brainjar.com for terms of use. *-->
  7. <!--************************************************************************-->
  8. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  9. <head>
  10. <title>BrainJar.com: Windows Demo</title>
  11. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  12. <link href="/common/default.css" rel="stylesheet" type="text/css" />
  13. <style type="text/css">
  14. .lastLine {
  15. padding-left: 6em;
  16. }
  17. </style>
  18. <style type="text/css">
  19.  
  20. .window {
  21. background-color: #c0c0c0;
  22. border-color: #f0f0f0 #606060 #404040 #d0d0d0;
  23. border-style: solid;
  24. border-width: 2px;
  25. margin: 0px;
  26. padding: 2px;
  27. position: absolute;
  28. text-align: left;
  29. visibility: hidden;
  30. }
  31.  
  32. .titleBar {
  33. background-color: #008080;
  34. cursor: default;
  35. color: #ffffff;
  36. font-family: "MS Sans Serif", "Arial", "Helvetica", sans-serif;
  37. font-size: 8pt;
  38. font-weight: bold;
  39. margin: 0px;
  40. padding: 2px 2px 2px .5em;
  41. text-align: right;
  42. white-space: nowrap;
  43. }
  44.  
  45. .titleBarText {
  46. float: left;
  47. overflow: hidden;
  48. text-align: left;
  49. }
  50.  
  51. .titleBarButtons {
  52. border-style: none;
  53. border-width: 0px;
  54. vertical-align: middle;
  55. width: 50px;
  56. height: 14px;
  57. }
  58.  
  59. .clientArea {
  60. background-color: #ffffff;
  61. border-color: #404040 #e0e0e0 #f0f0f0 #505050;
  62. border-style: solid;
  63. border-width: 2px;
  64. color: #000000;
  65. font-family: "Arial", "Helvetica", sans-serif;
  66. font-size: 10pt;
  67. margin: 2px 0px 0px 0px;
  68. overflow: auto;
  69. padding: .5em;
  70. }
  71.  
  72. </style>
  73.  
  74. <script type="text/javascript">//<![CDATA[
  75.  
  76. //*****************************************************************************
  77. // Do not remove this notice.
  78. //
  79. // Copyright 2001 by Mike Hall.
  80. // See http://www.brainjar.com for terms of use.
  81. //*****************************************************************************
  82.  
  83. // Determine browser and version.
  84.  
  85. function Browser() {
  86.  
  87. var ua, s, i;
  88.  
  89. this.isIE = false; // Internet Explorer
  90. this.isNS = false; // Netscape
  91. this.version = null;
  92.  
  93. ua = navigator.userAgent;
  94.  
  95. s = "MSIE";
  96. if ((i = ua.indexOf(s)) >= 0) {
  97. this.isIE = true;
  98. this.version = parseFloat(ua.substr(i + s.length));
  99. return;
  100. }
  101.  
  102. s = "Netscape6/";
  103. if ((i = ua.indexOf(s)) >= 0) {
  104. this.isNS = true;
  105. this.version = parseFloat(ua.substr(i + s.length));
  106. return;
  107. }
  108.  
  109. // Treat any other "Gecko" browser as NS 6.1.
  110.  
  111. s = "Gecko";
  112. if ((i = ua.indexOf(s)) >= 0) {
  113. this.isNS = true;
  114. this.version = 6.1;
  115. return;
  116. }
  117. }
  118.  
  119. var browser = new Browser();
  120.  
  121. //=============================================================================
  122. // Window Object
  123. //=============================================================================
  124.  
  125. function Window(el) {
  126.  
  127. var i, mapList, mapName;
  128.  
  129. // Get window components.
  130.  
  131. this.frame = el;
  132. this.titleBar = winFindByClassName(el, "titleBar");
  133. this.titleBarText = winFindByClassName(el, "titleBarText");
  134. this.titleBarButtons = winFindByClassName(el, "titleBarButtons");
  135. this.clientArea = winFindByClassName(el, "clientArea");
  136.  
  137. // Find matching button image map.
  138.  
  139. mapName = this.titleBarButtons.useMap.substr(1);
  140. mapList = document.getElementsByTagName("MAP");
  141. for (i = 0; i < mapList.length; i++)
  142. if (mapList[i].name == mapName)
  143. this.titleBarMap = mapList[i];
  144.  
  145. // Save colors.
  146.  
  147. this.activeFrameBackgroundColor = this.frame.style.backgroundColor;
  148. this.activeFrameBorderColor = this.frame.style.borderColor;
  149. this.activeTitleBarColor = this.titleBar.style.backgroundColor;
  150. this.activeTitleTextColor = this.titleBar.style.color;
  151. this.activeClientAreaBorderColor = this.clientArea.style.borderColor;
  152. if (browser.isIE)
  153. this.activeClientAreaScrollbarColor = this.clientArea.style.scrollbarBaseColor;
  154.  
  155. // Save images.
  156.  
  157. this.activeButtonsImage = this.titleBarButtons.src;
  158. this.inactiveButtonsImage = this.titleBarButtons.longDesc;
  159.  
  160. // Set flags.
  161.  
  162. this.isOpen = false;
  163. this.isMinimized = false;
  164.  
  165. // Set methods.
  166.  
  167. this.open = winOpen;
  168. this.close = winClose;
  169. this.minimize = winMinimize;
  170. this.restore = winRestore;
  171. this.makeActive = winMakeActive;
  172.  
  173. // Set up event handling.
  174.  
  175. this.frame.parentWindow = this;
  176. this.frame.onmousemove = winResizeCursorSet;
  177. this.frame.onmouseout = winResizeCursorRestore;
  178. this.frame.onmousedown = winResizeDragStart;
  179.  
  180. this.titleBar.parentWindow = this;
  181. this.titleBar.onmousedown = winMoveDragStart;
  182.  
  183. this.clientArea.parentWindow = this;
  184. this.clientArea.onclick = winClientAreaClick;
  185.  
  186. for (i = 0; i < this.titleBarMap.childNodes.length; i++)
  187. if (this.titleBarMap.childNodes[i].tagName == "AREA")
  188. this.titleBarMap.childNodes[i].parentWindow = this;
  189.  
  190. // Calculate the minimum width and height values for resizing
  191. // and fix any initial display problems.
  192.  
  193. var initLt, initWd, w, dw;
  194.  
  195. // Save the inital frame width and position, then reposition
  196. // the window.
  197.  
  198. initLt = this.frame.style.left;
  199. initWd = parseInt(this.frame.style.width);
  200. this.frame.style.left = -this.titleBarText.offsetWidth + "px";
  201.  
  202. // For IE, start calculating the value to use when setting
  203. // the client area width based on the frame width.
  204.  
  205. if (browser.isIE) {
  206. this.titleBarText.style.display = "none";
  207. w = this.clientArea.offsetWidth;
  208. this.widthDiff = this.frame.offsetWidth - w;
  209. this.clientArea.style.width = w + "px";
  210. dw = this.clientArea.offsetWidth - w;
  211. w -= dw;
  212. this.widthDiff += dw;
  213. this.titleBarText.style.display = "";
  214. }
  215.  
  216. // Find the difference between the frame's style and offset
  217. // widths. For IE, adjust the client area/frame width
  218. // difference accordingly.
  219.  
  220. w = this.frame.offsetWidth;
  221. this.frame.style.width = w + "px";
  222. dw = this.frame.offsetWidth - w;
  223. w -= dw;
  224. this.frame.style.width = w + "px";
  225. if (browser.isIE)
  226. this.widthDiff -= dw;
  227.  
  228. // Find the minimum width for resize.
  229.  
  230. this.isOpen = true; // Flag as open so minimize call will work.
  231. this.minimize();
  232. // Get the minimum width.
  233. if (browser.isNS && browser.version >= 1.2)
  234. // For later versions of Gecko.
  235. this.minimumWidth = this.frame.offsetWidth;
  236. else
  237. // For all others.
  238. this.minimumWidth = this.frame.offsetWidth - dw;
  239.  
  240. // Find the frame width at which or below the title bar text will
  241. // need to be clipped.
  242.  
  243. this.titleBarText.style.width = "";
  244. this.clipTextMinimumWidth = this.frame.offsetWidth - dw;
  245.  
  246. // Set the minimum height.
  247.  
  248. this.minimumHeight = 1;
  249.  
  250. // Restore window. For IE, set client area width.
  251.  
  252. this.restore();
  253. this.isOpen = false; // Reset flag.
  254. initWd = Math.max(initWd, this.minimumWidth);
  255. this.frame.style.width = initWd + "px";
  256. if (browser.isIE)
  257. this.clientArea.style.width = (initWd - this.widthDiff) + "px";
  258.  
  259. // Clip the title bar text if needed.
  260.  
  261. if (this.clipTextMinimumWidth >= this.minimumWidth)
  262. this.titleBarText.style.width = (winCtrl.minimizedTextWidth + initWd - this.minimumWidth) + "px";
  263.  
  264. // Restore the window to its original position.
  265.  
  266. this.frame.style.left = initLt;
  267. }
  268.  
  269. //=============================================================================
  270. // Window Methods
  271. //=============================================================================
  272.  
  273. function winOpen() {
  274.  
  275. if (this.isOpen)
  276. return;
  277.  
  278. // Restore the window and make it visible.
  279.  
  280. this.makeActive();
  281. this.isOpen = true;
  282. if (this.isMinimized)
  283. this.restore();
  284. this.frame.style.visibility = "visible";
  285. }
  286.  
  287. function winClose() {
  288.  
  289. // Hide the window.
  290.  
  291. this.frame.style.visibility = "hidden";
  292. this.isOpen = false;
  293. }
  294.  
  295. function winMinimize() {
  296.  
  297. if (!this.isOpen || this.isMinimized)
  298. return;
  299.  
  300. this.makeActive();
  301.  
  302. // Save current frame and title bar text widths.
  303.  
  304. this.restoreFrameWidth = this.frame.style.width;
  305. this.restoreTextWidth = this.titleBarText.style.width;
  306.  
  307. // Disable client area display.
  308.  
  309. this.clientArea.style.display = "none";
  310.  
  311. // Minimize frame and title bar text widths.
  312.  
  313. if (this.minimumWidth)
  314. this.frame.style.width = this.minimumWidth + "px";
  315. else
  316. this.frame.style.width = "";
  317. this.titleBarText.style.width = winCtrl.minimizedTextWidth + "px";
  318.  
  319. this.isMinimized = true;
  320. }
  321.  
  322. function winRestore() {
  323.  
  324. if (!this.isOpen || !this.isMinimized)
  325. return;
  326.  
  327. this.makeActive();
  328.  
  329. // Enable client area display.
  330.  
  331. this.clientArea.style.display = "";
  332.  
  333. // Restore frame and title bar text widths.
  334.  
  335. this.frame.style.width = this.restoreFrameWidth;
  336. this.titleBarText.style.width = this.restoreTextWidth;
  337.  
  338. this.isMinimized = false;
  339. }
  340.  
  341. function winMakeActive() {
  342.  
  343. if (winCtrl.active == this)
  344. return;
  345.  
  346. // Inactivate the currently active window.
  347.  
  348. if (winCtrl.active) {
  349. winCtrl.active.frame.style.backgroundColor = winCtrl.inactiveFrameBackgroundColor;
  350. winCtrl.active.frame.style.borderColor = winCtrl.inactiveFrameBorderColor;
  351. winCtrl.active.titleBar.style.backgroundColor = winCtrl.inactiveTitleBarColor;
  352. winCtrl.active.titleBar.style.color = winCtrl.inactiveTitleTextColor;
  353. winCtrl.active.clientArea.style.borderColor = winCtrl.inactiveClientAreaBorderColor;
  354. if (browser.isIE)
  355. winCtrl.active.clientArea.style.scrollbarBaseColor = winCtrl.inactiveClientAreaScrollbarColor;
  356. if (browser.isNS && browser.version < 6.1)
  357. winCtrl.active.clientArea.style.overflow = "hidden";
  358. if (winCtrl.active.inactiveButtonsImage)
  359. winCtrl.active.titleBarButtons.src = winCtrl.active.inactiveButtonsImage;
  360. }
  361.  
  362. // Activate this window.
  363.  
  364. this.frame.style.backgroundColor = this.activeFrameBackgroundColor;
  365. this.frame.style.borderColor = this.activeFrameBorderColor;
  366. this.titleBar.style.backgroundColor = this.activeTitleBarColor;
  367. this.titleBar.style.color = this.activeTitleTextColor;
  368. this.clientArea.style.borderColor = this.activeClientAreaBorderColor;
  369. if (browser.isIE)
  370. this.clientArea.style.scrollbarBaseColor = this.activeClientAreaScrollbarColor;
  371. if (browser.isNS && browser.version < 6.1)
  372. this.clientArea.style.overflow = "auto";
  373. if (this.inactiveButtonsImage)
  374. this.titleBarButtons.src = this.activeButtonsImage;
  375. this.frame.style.zIndex = ++winCtrl.maxzIndex;
  376. winCtrl.active = this;
  377. }
  378.  
  379. //=============================================================================
  380. // Event handlers.
  381. //=============================================================================
  382.  
  383. function winClientAreaClick(event) {
  384.  
  385. // Make this window the active one.
  386.  
  387. this.parentWindow.makeActive();
  388. }
  389.  
  390. //-----------------------------------------------------------------------------
  391. // Window dragging.
  392. //-----------------------------------------------------------------------------
  393.  
  394. function winMoveDragStart(event) {
  395.  
  396. var target;
  397. var x, y;
  398.  
  399. if (browser.isIE)
  400. target = window.event.srcElement.tagName;
  401. if (browser.isNS)
  402. target = event.target.tagName;
  403.  
  404. if (target == "AREA")
  405. return;
  406.  
  407. this.parentWindow.makeActive();
  408.  
  409. // Get cursor offset from window frame.
  410.  
  411. if (browser.isIE) {
  412. x = window.event.x;
  413. y = window.event.y;
  414. }
  415. if (browser.isNS) {
  416. x = event.pageX;
  417. y = event.pageY;
  418. }
  419. winCtrl.xOffset = winCtrl.active.frame.offsetLeft - x;
  420. winCtrl.yOffset = winCtrl.active.frame.offsetTop - y;
  421.  
  422. // Set document to capture mousemove and mouseup events.
  423.  
  424. if (browser.isIE) {
  425. document.onmousemove = winMoveDragGo;
  426. document.onmouseup = winMoveDragStop;
  427. }
  428. if (browser.isNS) {
  429. document.addEventListener("mousemove", winMoveDragGo, true);
  430. document.addEventListener("mouseup", winMoveDragStop, true);
  431. event.preventDefault();
  432. }
  433.  
  434. winCtrl.inMoveDrag = true;
  435. }
  436.  
  437. function winMoveDragGo(event) {
  438.  
  439. var x, y;
  440.  
  441. if (!winCtrl.inMoveDrag)
  442. return;
  443.  
  444. // Get cursor position.
  445.  
  446. if (browser.isIE) {
  447. x = window.event.x;
  448. y = window.event.y;
  449. window.event.cancelBubble = true;
  450. window.event.returnValue = false;
  451. }
  452. if (browser.isNS) {
  453. x = event.pageX;
  454. y = event.pageY;
  455. event.preventDefault();
  456. }
  457.  
  458. // Move window frame based on offset from cursor.
  459.  
  460. winCtrl.active.frame.style.left = (x + winCtrl.xOffset) + "px";
  461. winCtrl.active.frame.style.top = (y + winCtrl.yOffset) + "px";
  462. }
  463.  
  464. function winMoveDragStop(event) {
  465.  
  466. winCtrl.inMoveDrag = false;
  467.  
  468. // Remove mousemove and mouseup event captures on document.
  469.  
  470. if (browser.isIE) {
  471. document.onmousemove = null;
  472. document.onmouseup = null;
  473. }
  474. if (browser.isNS) {
  475. document.removeEventListener("mousemove", winMoveDragGo, true);
  476. document.removeEventListener("mouseup", winMoveDragStop, true);
  477. }
  478. }
  479.  
  480. //-----------------------------------------------------------------------------
  481. // Window resizing.
  482. //-----------------------------------------------------------------------------
  483.  
  484. function winResizeCursorSet(event) {
  485.  
  486. var target;
  487. var xOff, yOff;
  488.  
  489. if (this.parentWindow.isMinimized || winCtrl.inResizeDrag)
  490. return;
  491.  
  492. // If not on window frame, restore cursor and exit.
  493.  
  494. if (browser.isIE)
  495. target = window.event.srcElement;
  496. if (browser.isNS)
  497. target = event.target;
  498. if (target != this.parentWindow.frame)
  499. return;
  500.  
  501. // Find resize direction.
  502.  
  503. if (browser.isIE) {
  504. xOff = window.event.offsetX;
  505. yOff = window.event.offsetY;
  506. }
  507. if (browser.isNS) {
  508. xOff = event.layerX;
  509. yOff = event.layerY;
  510. }
  511. winCtrl.resizeDirection = ""
  512. if (yOff <= winCtrl.resizeCornerSize)
  513. winCtrl.resizeDirection += "n";
  514. else if (yOff >= this.parentWindow.frame.offsetHeight - winCtrl.resizeCornerSize)
  515. winCtrl.resizeDirection += "s";
  516. if (xOff <= winCtrl.resizeCornerSize)
  517. winCtrl.resizeDirection += "w";
  518. else if (xOff >= this.parentWindow.frame.offsetWidth - winCtrl.resizeCornerSize)
  519. winCtrl.resizeDirection += "e";
  520.  
  521. // If not on window edge, restore cursor and exit.
  522.  
  523. if (winCtrl.resizeDirection == "") {
  524. this.onmouseout(event);
  525. return;
  526. }
  527.  
  528. // Change cursor.
  529.  
  530. if (browser.isIE)
  531. document.body.style.cursor = winCtrl.resizeDirection + "-resize";
  532. if (browser.isNS)
  533. this.parentWindow.frame.style.cursor = winCtrl.resizeDirection + "-resize";
  534. }
  535.  
  536. function winResizeCursorRestore(event) {
  537.  
  538. if (winCtrl.inResizeDrag)
  539. return;
  540.  
  541. // Restore cursor.
  542.  
  543. if (browser.isIE)
  544. document.body.style.cursor = "";
  545. if (browser.isNS)
  546. this.parentWindow.frame.style.cursor = "";
  547. }
  548.  
  549. function winResizeDragStart(event) {
  550.  
  551. var target;
  552.  
  553. // Make sure the event is on the window frame.
  554.  
  555. if (browser.isIE)
  556. target = window.event.srcElement;
  557. if (browser.isNS)
  558. target = event.target;
  559. if (target != this.parentWindow.frame)
  560. return;
  561.  
  562. this.parentWindow.makeActive();
  563.  
  564. if (this.parentWindow.isMinimized)
  565. return;
  566.  
  567. // Save cursor position.
  568.  
  569. if (browser.isIE) {
  570. winCtrl.xPosition = window.event.x;
  571. winCtrl.yPosition = window.event.y;
  572. }
  573. if (browser.isNS) {
  574. winCtrl.xPosition = event.pageX;
  575. winCtrl.yPosition = event.pageY;
  576. }
  577.  
  578. // Save window frame position and current window size.
  579.  
  580. winCtrl.oldLeft = parseInt(this.parentWindow.frame.style.left, 10);
  581. winCtrl.oldTop = parseInt(this.parentWindow.frame.style.top, 10);
  582. winCtrl.oldWidth = parseInt(this.parentWindow.frame.style.width, 10);
  583. winCtrl.oldHeight = parseInt(this.parentWindow.clientArea.style.height, 10);
  584.  
  585. // Set document to capture mousemove and mouseup events.
  586.  
  587. if (browser.isIE) {
  588. document.onmousemove = winResizeDragGo;
  589. document.onmouseup = winResizeDragStop;
  590. }
  591. if (browser.isNS) {
  592. document.addEventListener("mousemove", winResizeDragGo, true);
  593. document.addEventListener("mouseup" , winResizeDragStop, true);
  594. event.preventDefault();
  595. }
  596.  
  597. winCtrl.inResizeDrag = true;
  598. }
  599.  
  600. function winResizeDragGo(event) {
  601.  
  602. var north, south, east, west;
  603. var dx, dy;
  604. var w, h;
  605.  
  606. if (!winCtrl.inResizeDrag)
  607. return;
  608.  
  609. // Set direction flags based on original resize direction.
  610.  
  611. north = false;
  612. south = false;
  613. east = false;
  614. west = false;
  615. if (winCtrl.resizeDirection.charAt(0) == "n")
  616. north = true;
  617. if (winCtrl.resizeDirection.charAt(0) == "s")
  618. south = true;
  619. if (winCtrl.resizeDirection.charAt(0) == "e" || winCtrl.resizeDirection.charAt(1) == "e")
  620. east = true;
  621. if (winCtrl.resizeDirection.charAt(0) == "w" || winCtrl.resizeDirection.charAt(1) == "w")
  622. west = true;
  623.  
  624. // Find change in cursor position.
  625.  
  626. if (browser.isIE) {
  627. dx = window.event.x - winCtrl.xPosition;
  628. dy = window.event.y - winCtrl.yPosition;
  629. }
  630. if (browser.isNS) {
  631. dx = event.pageX - winCtrl.xPosition;
  632. dy = event.pageY - winCtrl.yPosition;
  633. }
  634.  
  635. // If resizing north or west, reverse corresponding amount.
  636.  
  637. if (west)
  638. dx = -dx;
  639. if (north)
  640. dy = -dy;
  641.  
  642. // Check new size.
  643.  
  644. w = winCtrl.oldWidth + dx;
  645. h = winCtrl.oldHeight + dy;
  646. if (w <= winCtrl.active.minimumWidth) {
  647. w = winCtrl.active.minimumWidth;
  648. dx = w - winCtrl.oldWidth;
  649. }
  650. if (h <= winCtrl.active.minimumHeight) {
  651. h = winCtrl.active.minimumHeight;
  652. dy = h - winCtrl.oldHeight;
  653. }
  654.  
  655. // Resize the window. For IE, keep client area and frame widths in synch.
  656.  
  657. if (east || west) {
  658. winCtrl.active.frame.style.width = w + "px";
  659. if (browser.isIE)
  660. winCtrl.active.clientArea.style.width = (w - winCtrl.active.widthDiff) + "px";
  661. }
  662. if (north || south)
  663. winCtrl.active.clientArea.style.height = h + "px";
  664.  
  665. // Clip the title bar text, if necessary.
  666.  
  667. if (east || west) {
  668. if (w < winCtrl.active.clipTextMinimumWidth)
  669. winCtrl.active.titleBarText.style.width = (winCtrl.minimizedTextWidth + w - winCtrl.active.minimumWidth) + "px";
  670. else
  671. winCtrl.active.titleBarText.style.width = "";
  672. }
  673.  
  674. // For a north or west resize, move the window.
  675.  
  676. if (west)
  677. winCtrl.active.frame.style.left = (winCtrl.oldLeft - dx) + "px";
  678. if (north)
  679. winCtrl.active.frame.style.top = (winCtrl.oldTop - dy) + "px";
  680.  
  681. if (browser.isIE) {
  682. window.event.cancelBubble = true;
  683. window.event.returnValue = false;
  684. }
  685. if (browser.isNS)
  686. event.preventDefault();
  687. }
  688.  
  689. function winResizeDragStop(event) {
  690.  
  691. winCtrl.inResizeDrag = false;
  692.  
  693. // Remove mousemove and mouseup event captures on document.
  694.  
  695. if (browser.isIE) {
  696. document.onmousemove = null;
  697. document.onmouseup = null;
  698. }
  699. if (browser.isNS) {
  700. document.removeEventListener("mousemove", winResizeDragGo, true);
  701. document.removeEventListener("mouseup" , winResizeDragStop, true);
  702. }
  703. }
  704.  
  705. //=============================================================================
  706. // Utility functions.
  707. //=============================================================================
  708.  
  709. function winFindByClassName(el, className) {
  710.  
  711. var i, tmp;
  712.  
  713. if (el.className == className)
  714. return el;
  715.  
  716. // Search for a descendant element assigned the given class.
  717.  
  718. for (i = 0; i < el.childNodes.length; i++) {
  719. tmp = winFindByClassName(el.childNodes[i], className);
  720. if (tmp != null)
  721. return tmp;
  722. }
  723.  
  724. return null;
  725. }
  726.  
  727. //=============================================================================
  728. // Initialization code.
  729. //=============================================================================
  730.  
  731. var winList = new Array();
  732. var winCtrl = new Object();
  733.  
  734. function winInit() {
  735.  
  736. var elList;
  737.  
  738. // Initialize window control object.
  739.  
  740. winCtrl.maxzIndex = 0;
  741. winCtrl.resizeCornerSize = 16;
  742. winCtrl.minimizedTextWidth = 100;
  743. winCtrl.inactiveFrameBackgroundColor = "#c0c0c0";
  744. winCtrl.inactiveFrameBorderColor = "#f0f0f0 #505050 #404040 #e0e0e0";
  745. winCtrl.inactiveTitleBarColor = "#808080";
  746. winCtrl.inactiveTitleTextColor = "#c0c0c0";
  747. winCtrl.inactiveClientAreaBorderColor = "#404040 #e0e0e0 #f0f0f0 #505050";
  748. winCtrl.inactiveClientAreaScrollbarColor = "";
  749. winCtrl.inMoveDrag = false;
  750. winCtrl.inResizeDrag = false;
  751.  
  752. // Initialize windows and build list.
  753.  
  754. elList = document.getElementsByTagName("DIV");
  755. for (var i = 0; i < elList.length; i++)
  756. if (elList[i].className == "window")
  757. winList[elList[i].id] = new Window(elList[i]);
  758. }
  759.  
  760. window.onload = winInit; // run initialization code after page loads.
  761.  
  762. //]]></script>
  763. </head>
  764. <body>
  765.  
  766. <!-- Normal page content. -->
  767.  
  768. <div id="demoBox">
  769.  
  770. <h3>Windows Demo</h3>
  771.  
  772. <p>This page contains three sample windows which can be opened using the links
  773. below.</p>
  774.  
  775. <p>
  776. <a href="" onclick="if (winList['sample1']) winList['sample1'].open(); return false;">Window 1</a>
  777.  
  778. |
  779. <a href="" onclick="if (winList['sample2']) winList['sample2'].open(); return false;">Window 2</a>
  780. |
  781. <a href="" onclick="if (winList['sample3']) winList['sample3'].open(); return false;">Window 3</a>
  782. </p>
  783.  
  784. <p>The first two use the default window style while the third demonstrates how
  785. an individual window can be customized. Use your browser's
  786. <code>View Source</code> option to see the full source code.</p>
  787.  
  788. </div>
  789.  
  790. <!-- Sample Window 1 -->
  791.  
  792. <div id="sample1" class="window" style="left:50px;top:150px;width:480px;">
  793. <div class="titleBar">
  794. <span class="titleBarText">The Raven</span>
  795. <img class="titleBarButtons" alt="" src="graphics/buttons.gif" usemap="#sampleMap1" width="50" height="14" />
  796. <map id="sampleMap1" name="sampleMap1">
  797. <area shape="rect" coords="0,0,15,13" href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" />
  798. <area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore" onclick="this.parentWindow.restore();return false;" />
  799. <area shape="rect" coords="34,0,49,13" href="" alt="" title="Close" onclick="this.parentWindow.close();return false;" />
  800.  
  801. </map>
  802. </div>
  803. <div class="clientArea" style="height:200px;">
  804.  
  805. <h3>The Raven</h3>
  806.  
  807. <p>Once upon a midnight dreary, while I pondered, weak and weary<br />
  808. Over many a quaint and curious volume of forgotten lore-<br />
  809.  
  810. While I nodded, nearly napping, suddenly there came a tapping<br />
  811. As of some one gently rapping, rapping at my chamber door<br />
  812. "'T is some visitor," I muttered, "tapping at my chamber door-<br />
  813. <span class="lastLine">Only this and nothing more."</span></p>
  814.  
  815. <p>Ah, distinctly I remember it was in the bleak December;<br />
  816. And each separate dying ember wrought its ghost upon the floor.<br />
  817.  
  818. Eagerly I wished the morrow;-vainly I had sought to borrow<br />
  819. From my books surcease of sorrow-sorrow for the lost Lenore-<br />
  820. For the rare and radiant maiden whom the angels name Lenore-<br />
  821. <span class="lastLine">Nameless here for evermore.</span></p>
  822.  
  823. <p>Then the silken, sad, uncertain rustling of each purple curtain<br />
  824. Thrilled me-filled me with fantastic terrors never felt before;<br />
  825.  
  826. So that now, to still the beating of my heart, I stood repeating,<br />
  827. "'T is some visitor entreating entrance at my chamber door-<br />
  828. Some late visitor entreating entrance at my chamber door;-<br />
  829. <span class="lastLine">This it is and nothing more."</span></p>
  830.  
  831. <p>Presently my soul grew stronger; hesitating then no longer,<br />
  832. "Sir," said I, "or Madam, truly your forgiveness I implore;<br />
  833.  
  834. But the fact is I was napping, and so gently you came rapping,<br />
  835. And so faintly you came tapping, tapping at my chamber door,<br />
  836. That I scarce was sure I heard you"-here I opened wide the door;-<br />
  837. <span class="lastLine">Darkness there and nothing more."</span></p>
  838.  
  839. <p>Deep into that darkness peering, long I stood there wondering, fearing,<br />
  840. Doubting, dreaming dreams no mortal ever dared to dream before;<br />
  841.  
  842. But the silence was unbroken, and the stillness gave no token,<br />
  843. And the only word there spoken was the whispered word, "Lenore?"<br />
  844. This I whispered, and an echo murmured back the word, "Lenore!"<br />
  845. <span class="lastLine">Merely this and nothing more.</span></p>
  846.  
  847. <p>Back into the chamber turning, all my soul within me burning,<br />
  848. Soon again I heard a tapping somewhat louder than before.<br />
  849.  
  850. "Surely," said I, "surely that is something at my window lattice;<br />
  851. Let me see, then, what thereat is, and this mystery explore-<br />
  852. Let my heart be still a moment and this mystery explore;-<br />
  853. <span class="lastLine">'T is the wind and nothing more!"</span></p>
  854.  
  855. <p>Open here I flung the shutter, when, with many a flirt and flutter,<br />
  856. In there stepped a stately Raven of the saintly days of yore;<br />
  857.  
  858. Not the least obeisance made he; not a minute stopped or stayed he;<br />
  859. But, with mien of lord or lady, perched above my chamber door-<br />
  860. Perched upon a bust of Pallas just above my chamber door-<br />
  861. <span class="lastLine">Perched, and sat, and nothing more.</span></p>
  862.  
  863. <p>Then this ebony bird beguiling my sad fancy into smiling,<br />
  864. By the grave and stern decorum of the countenance it wore,<br />
  865.  
  866. "Though thy crest be shorn and shaven, thou," I said,"art sure no craven,<br />
  867. Ghastly grim and ancient Raven wandering from the Nightly shore-<br />
  868. Tell me what they lordly name is on the Night's Plutonian shore!"<br />
  869. <span class="lastLine">Quoth the Raven, "Nevermore."</span></p>
  870.  
  871. <p>Much I marvelled the ungainly fowl to hear discourse so plainly,<br />
  872. Though its answer little meaning-little relevancy bore;<br />
  873.  
  874. For we cannot help agreeing that no living human being<br />
  875. Ever yet was blessed with seeing bird above his chamber door-<br />
  876. Bird or beast upon the culptured bust above his chamber door,<br />
  877. <span class="lastLine">With such name as "Nevermore."</span></p>
  878.  
  879. <p>But the Raven, sitting lonely on the placid bust, spoke only<br />
  880. That one word, as if his soul in that one word he did outpour.<br />
  881.  
  882. Nothing farther then he uttered-not a feather then he fluttered-<br />
  883. Till I scarcely more than muttered, "Other friends have flown before-<br />
  884. On the morrow he will leave me, as my Hopes have flown before."<br />
  885. <span class="lastLine">Then the bird said, "Nevermore."</span></p>
  886.  
  887. <p>Startled at the stillness broken by reply so aptly spoken,<br />
  888. "Doubtless," said I, "what it utters is its only stock and store<br />
  889.  
  890. Caught from some unhappy master whom unmerciful Disaster<br />
  891. Followed fast and followed faster till his songs one burden bore-<br />
  892. Till the dirges of his Hope that melancholy burden more<br />
  893. <span class="lastLine">Of 'Never-nevermore.'"</span></p>
  894.  
  895. <p>But the Raven still beguiling my sad fancy into smiling,<br />
  896. Straight I wheeled a cushioned seat in front of bird and bust and door;<br />
  897.  
  898. Then, upon the velvet sinking, I betook myself to linking<br />
  899. Fancy unto fancy, thinking what this ominous bird of yore-<br />
  900. What this grim, ungainly, ghastly, gaunt, and ominous bird of yore<br />
  901. <span class="lastLine">Meant in croaking "Nevermore."</span></p>
  902.  
  903. <p>This I sat engaged in guessing, but no syllable expressing<br />
  904. To the fowl whose fiery eyes now burned into my bosom's core;<br />
  905.  
  906. This and more I sat divining, with my head at ease reclining<br />
  907. On the cushion's velvet lining that the lamp-light gloating o'er,<br />
  908. But whose velvet-violet lining with the lamp-light gloating o'er,<br />
  909. <span class="lastLine">She shall press, ah, nevermore!</span></p>
  910.  
  911. <p>Then, methought, the air grew denser, perfumed from an unseen censer<br />
  912. Swung by seraphim whose foot-falls tinkled on the tufted floor.<br />
  913.  
  914. "Wretch," I cried, "thy God hath lent thee-by these angels he hath sent thee<br />
  915. Respite-respite and nepenthe from thy memories of Lenore;<br />
  916. Quaff, oh, quaff this kind nepenthe and forget this lost Lenore!"<br />
  917. <span class="lastLine">Quoth the Raven, "Nevermore."</span></p>
  918.  
  919. <p>"Prophet!" said I, "thing of evil!-prophet still, if bird or devil!-<br />
  920. By that Heaven that bends above us-by that God we both adore-<br />
  921.  
  922. Tell this soul with sorrow laden if, within the distant<br />
  923. Aidenn, It shall clasp a sainted maiden whom the angels name Lenore-<br />
  924. Clasp a rare and radiant maiden whom the angels name Lenore."<br />
  925. <span class="lastLine">Quoth the Raven, "Nevermore."</span></p>
  926.  
  927. <p>"Be that word our sign of parting, bird or fiend!" I shrieked, upstarting-<br />
  928. "Get thee back into the tempest and the Night's Plutonian shore!<br />
  929.  
  930. Leave no black plume as a token of that lie thy soul hath spoken!<br />
  931. Leave my loneliness unbroken!-quit the bust above my door!<br />
  932. Take thy beak from out my heart, and take thy form from off my door!"<br />
  933. <span class="lastLine">Quoth the Raven, "Nevermore."</span></p>
  934.  
  935. <p>And the Raven, never flitting, still is sitting, still is sitting<br />
  936. On the pallid bust of Pallas just above my chamber door;<br />
  937.  
  938. And his eyes have all the seeming of a demon's that is dreaming,<br />
  939. And the lamp-light o'er him streaming throws his shadow on the floor;<br />
  940. And my soul from out that shadow that lies floating on the floor<br />
  941. <span class="lastLine">Shall be lifted-nevermore!</span></p>
  942.  
  943. <p><cite>Edgar Allan Poe</cite></p>
  944.  
  945. </div>
  946. </div>
  947.  
  948. <!-- Sample Window 2 -->
  949.  
  950. <div id="sample2" class="window" style="left:200px;top:100px;width:280px;">
  951. <div class="titleBar">
  952. <span class="titleBarText">The Conqueror Worm</span>
  953. <img class="titleBarButtons" alt="" src="graphics/buttons.gif" usemap="#sampleMap2" width="50" height="14" />
  954. <map id="sampleMap2" name="sampleMap2">
  955. <area shape="rect" coords="0,0,15,13" href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" />
  956.  
  957. <area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore" onclick="this.parentWindow.restore();return false;" />
  958. <area shape="rect" coords="34,0,49,13" href="" alt="" title="Close" onclick="this.parentWindow.close();return false;" />
  959. </map>
  960. </div>
  961. <div class="clientArea" style="height:175px;">
  962.  
  963. <h3>The Conqueror Worm</h3>
  964.  
  965. <p>Lo! 'tis a gala night<br />
  966.  
  967. Within the lonesome latter years!<br />
  968. An angel throng, bewinged, bedight<br />
  969. In veils, and drowned in tears,<br />
  970. Sit in a theatre, to see<br />
  971. A play of hopes and fears,<br />
  972. While the orchestra breathes fitfully<br />
  973.  
  974. The music of the spheres.</p>
  975.  
  976. <p>Mimes, in the form of God on high,<br />
  977. Mutter and mumble low,<br />
  978. And hither and thither fly-<br />
  979. Mere puppets they, who come and go<br />
  980. At bidding of vast formless things<br />
  981.  
  982. That shift the scenery to and fro,<br />
  983. Flapping from out their Condor wings<br />
  984. Invisible Woe!</p>
  985.  
  986. <p>That motley drama- oh, be sure<br />
  987. It shall not be forgot!<br />
  988. With its Phantom chased for evermore,<br />
  989.  
  990. By a crowd that seize it not,<br />
  991. Through a circle that ever returneth in<br />
  992. To the self-same spot,<br />
  993. And much of Madness, and more of Sin,<br />
  994. And Horror the soul of the plot.</p>
  995.  
  996. <p>But see, amid the mimic rout<br />
  997.  
  998. A crawling shape intrude!<br />
  999. A blood-red thing that writhes from out<br />
  1000. The scenic solitude!<br />
  1001. It writhes!- it writhes!- with mortal pangs<br />
  1002. The mimes become its food,<br />
  1003. And seraphs sob at vermin fangs<br />
  1004.  
  1005. In human gore imbued.</p>
  1006.  
  1007. <p>Out- out are the lights- out all!<br />
  1008. And, over each quivering form,<br />
  1009. The curtain, a funeral pall,<br />
  1010. Comes down with the rush of a storm,<br />
  1011. While the angels, all pallid and wan,<br />
  1012.  
  1013. Uprising, unveiling, affirm<br />
  1014. That the play is the tragedy, "Man,"<br />
  1015. And its hero the Conqueror Worm.</p>
  1016.  
  1017. <p><cite>Edgar Allan Poe</cite></p>
  1018.  
  1019. </div>
  1020. </div>
  1021.  
  1022. <!-- Sample Window 3 -->
  1023.  
  1024. <div id="sample3" class="window" style="left:350px;top:50px;width:300px;background-color:#f0c090;border-color:#ffe0b0 #a07040 #805020 #e0b080;">
  1025. <div class="titleBar" style="background-color:#c08060;color:#ffffcc;">
  1026. <span class="titleBarText">Spirits of the Dead</span>
  1027. <img class="titleBarButtons" alt="" src="graphics/altbuttons.gif" longdesc="graphics/altbuttonslow.gif" usemap="#sampleMap3" width="50" height="14" />
  1028. <map id="sampleMap3" name="sampleMap3">
  1029. <area shape="rect" coords="0,0,15,13" href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" />
  1030. <area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore" onclick="this.parentWindow.restore();return false;" />
  1031.  
  1032. <area shape="rect" coords="34,0,49,13" href="" alt="" title="Close" onclick="this.parentWindow.close();return false;" />
  1033. </map>
  1034. </div>
  1035. <div class="clientArea" style="height:150px;background-color:#ffffcc;color:#806040;border-color:#805020 #e0b080 #ffe0b0 #a07040;scrollbar-base-color:#f0c090;">
  1036.  
  1037. <h3>Spirits of the Dead</h3>
  1038.  
  1039. <p>Thy soul shall find itself alone<br />
  1040. 'Mid dark thoughts of the grey tomb-stone;<br />
  1041.  
  1042. Not one, of all the crowd, to pry<br />
  1043. Into thine hour of secrecy.</p>
  1044.  
  1045. <p>Be silent in that solitude,<br />
  1046. Which is not loneliness- for then<br />
  1047. The spirits of the dead, who stood<br />
  1048. In life before thee, are again<br />
  1049.  
  1050. In death around thee, and their will<br />
  1051. Shall overshadow thee; be still.</p>
  1052.  
  1053. <p>The night, though clear, shall frown,<br />
  1054. And the stars shall not look down<br />
  1055. From their high thrones in the Heaven<br />
  1056. With light like hope to mortals given,<br />
  1057.  
  1058. But their red orbs, without beam,<br />
  1059. To thy weariness shall seem<br />
  1060. As a burning and a fever<br />
  1061. Which would cling to thee for ever.</p>
  1062.  
  1063. <p>Now are thoughts thou shalt not banish,<br />
  1064. Now are visions ne'er to vanish;<br />
  1065.  
  1066. From thy spirit shall they pass<br />
  1067. No more, like dew-drop from the grass.</p>
  1068.  
  1069. <p>The breeze, the breath of God, is still,<br />
  1070. And the mist upon the hill<br />
  1071. Shadowy, shadowy, yet unbroken,<br />
  1072. Is a symbol and a token.<br />
  1073.  
  1074. How it hangs upon the trees,<br />
  1075. A mystery of mysteries!</p>
  1076.  
  1077. <p><cite>Edgar Allan Poe</cite></p>
  1078.  
  1079. </div>
  1080. </div>
  1081.  
  1082. </body>
  1083. </html>

Report this snippet  

You need to login to post a comment.