javascript drag drop function


/ Published in: Other
Save to your folder(s)



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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.