Update of /cvsroot/easystruts/easystruts-website/lib/x-cbe/x3151_cbe4191_z4/cross-browser.com/x/examples In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv435/lib/x-cbe/x3151_cbe4191_z4/cross-browser.com/x/examples Added Files: popup.html floater.html tooltips3.html layout1.html bookmarklets.html layout1x.css x_3col_fm.css layout1.js x_3col_fm.html slideouts.html tooltips.html arrowkeys.html layout1d.css popup2.html popup1.html walktree.html bargraph.html drag1.html Log Message: Added new web site sources and data --- NEW FILE: layout1.html --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>X Layout Example 1</title> <meta name='description' content='A DHTML Layout example from Cross-Browser.com'> <link rel='stylesheet' type='text/css' href='layout1d.css'> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'> xInclude('layout1x.css', '../x_core.js', '../x_event.js', 'layout1.js'); </script> </head> <body> <div id='header'> <h4>X Layout Example 1</h4> </div> <div id='menu'> <h4>Menu</h4> <p><a href=''>item</a></p> <p><a href=''>item</a></p> <p><a href=''>item</a></p> <p><a href=''>item</a></p> </div> <div id='what'> <h3>What</h3> <p>This is an example of a dynamic, downgradable DHTML layout.</p> <p>Disable javascript and reload this page to see it in its 'downgrade mode'. You can also downgrade based on the absence of certain browser objects.</p> <p>I'm having problems with this in IE4... but I'll have to deal with that later ;-)</p> <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div id='endOfWhat' class='marker'>.</div> </div> <div id='how'> <h3>How</h3> <p>Six files are required by this page:</p> <ol> <li><a href='layout1.html'>layout1.html</a> - the HTML for the page.</li> <li><a href='layout1.js'>layout1.js</a> - the javascript that sizes and positions all major container elements on the page.</li> <li><a href='layout1d.css'>layout1d.css</a> - the default styles for the page, which are also the 'downgrade mode' styles. </li> <li><a href='layout1x.css'>layout1x.css</a> - styles which over-ride the default styles (non-downgrade). This file only gets included if javascript is enabled.</li> <li>'x_core.js' and 'x_event.js' - the DHTML library files used by the code in <i>layout.js</i>. These files only get included if javascript is enabled.</li> </ol> <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui do<a href="http://lipsum.com/" title="Read about Lorem Ipsum at lipsum.com">lorem ipsum</a> quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> </div> <div id='footer'> <a href='http://cross-browser.com/'>Cross-Browser.com</a> </div> </body> </html> --- NEW FILE: popup.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>DHTML Popup/Timer Demo</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <link rel='stylesheet' type='text/css' href='../../css/s6.css' /> <style type='text/css'> h3 { margin:20px 0 20px 0; } .popupStyle { width:150px; height:150px; border:1px solid #330; border-top:4px solid #330; margin:0; padding:0; } </style> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'> xInclude('../x_core.js', '../x_slide.js', '../x_popup.js', '../x_timer.js'); var pop1, pop2; window.onload = function() { pop1 = new xPopup( 'timeout', // timer type 10000, // timeout in ms 'cen', // position 'popupStyle', // style class name 'popup1', // id 'popup1.html'); // popup url pop2 = new xPopup( 'interval', 5000, 'se', 'popupStyle', 'popup2', 'popup2.html'); } // end onload </script> </head> <body> <div id='header'> <h1>Cross-Browser.com</h1> <div class='subtitle'>DHTML Popup/Timer Demo</div> </div> <!-- end header --> <div id='rightColumn' class='column'> <div class='rightContent'> <h2>Intro</h2> <p><b>xPopup</b> is a simple alternative to pop-up windows. It uses dynamically created iFrames.</p> <p>The implementation of xPopup demonstrates the use of the <b>xTimer</b> object.</p> </div> <!-- end rightContent --> </div> <!-- end rightColumn --> <div id='leftColumn' class='column'> <div class='leftContent'> <h3>Application</h3> <p>xPopup is a simple alternative to pop-up windows. It uses dynamically created iFrames. Here's how to use it.</p> <p> </p> <pre> <style type='text/css'> .popupStyle { width:150px; height:150px; border:1px solid #330; border-top:4px solid #330; margin:0; padding:0; } </style> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'> xInclude('../x_core.js', '../x_slide.js', '../x_popup.js', '../x_timer.js'); var pop1, pop2; window.onload = function() { pop1 = new xPopup( 'timeout', // timer type 10000, // timeout in ms 'cen', // position 'popupStyle', // style class name 'popup1', // id 'popup1.html'); // popup url pop2 = new xPopup( 'interval', 5000, 'se', 'popupStyle', 'popup2', 'popup2.html'); } // end onload </script> </pre> <h3>xPopup Implementation</h3> <p>The implementation of xPopup demonstrates the use of the xTimer object.</p> <p> </p> <pre> // sTmrType: 'timeout' or 'interval' function xPopup(sTmrType, uTimeout, sPosition, sStyle, sId, sUrl) { if (document.getElementById && document.createElement && document.body && document.body.appendChild) { // create popup element var e = document.createElement('IFRAME'); this.ele = e; e.id = sId; e.style.position = 'absolute'; e.className = sStyle; e.src = sUrl document.body.appendChild(e); xShow(e); this.tmr = xTimer.set(sTmrType, this, sTmrType, uTimeout); // timer event listeners this.timeout = function() // hide popup { var e = this.ele; xSlideTo(e, -xWidth(e), -xHeight(e), this.slideTime); } this.interval = function() // size, position and show popup { var x=0, y=0, e = this.ele; var ew = xWidth(e), eh = xHeight(e); var cw = xClientWidth(), ch = xClientHeight(); switch (this.pos) { case 'e': x = cw - ew - this.margin; y = (ch - eh)/2; break; case 'se': x = cw - ew - this.margin; y = ch - eh - this.margin; break; case 'w': x = this.margin; y = (ch - eh)/2; break; case 'cen': default: x = (cw - ew)/2; y = (ch - eh)/2; break; } // end switch xSlideTo(e, xScrollLeft() + x, xScrollTop() + y, this.slideTime); } // init this.margin = 10; this.pos = sPosition; this.slideTime = 500; // slide time in ms this.interval(); } } // end xPopup </pre> </div> <!-- end leftContent --> <div class='leftContent'> For more <b>DHTML Toys</b> visit <a href='http://cross-browser.com/'>Cross-Browser.com</a>. </div> <!-- end leftContent --> </div> <!-- end leftColumn --> </body> </html> --- NEW FILE: layout1d.css --- /* layout1d.css mfoster, cross-browser.com */ html { margin:0; padding:0; } body { color:#000; background:#FED953; margin:0; padding:0; font-family:verdana,arial,sans-serif; font-size:12px; } h4 { margin:0; padding:0; } a { color:#666; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; } a:hover { color:#fff; background:#333; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; text-decoration:none; } .marker { position:relative; visibility:hidden; } #header { color:#000; background:#FFBA1E; margin:10px; padding:10px; } #menu { color:#000; background:#FED953; margin:10px; padding:10px; } #what { color:#000; background:#f90; margin:10px; padding:10px; } #how { color:#000; background:#fff; margin:10px; padding:10px; } #footer { color:#000; background:#2F3863; margin:10px; padding:10px; } --- NEW FILE: tooltips3.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>X Tooltips 3 Demo</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <meta name='description' content='Cross-Browser DHTML Libraries and Applications' /> <meta name='keywords' content='menu,dhtml,crossbrowser,layout,css,dom,api,library,demo,javascript,code' /> <link rel='stylesheet' type='text/css' href='../../css/s1.css' /> <style type='text/css'> /* Tooltip Groups - for elements which trigger tooltips */ .tipGrp1 { color:#666; border-bottom:1px dashed #000; cursor:default; } .tipGrp2 { color:#686; border-bottom:1px dashed #080; cursor:default; } .tipGrp3 { color:#866; border-bottom:1px dashed #800; } .tipGrp4 { color:#668; border-bottom:1px dashed #008; cursor:default; } /* Tooltip styles for each group */ .tipGrp1s { position:absolute; visibility:hidden; overflow:hidden; color:#000; background:#ccc; border:1px solid #000; font-size:10px; margin:0; padding:1px; width:180px; height:14px; } .tipGrp2s { position:absolute; visibility:hidden; overflow:hidden; color:#080; background:#ccc; border:1px solid #080; font-size:10px; margin:0; padding:1px; width:180px; height:14px; } .tipGrp3s { position:absolute; visibility:hidden; overflow:hidden; color:#800; background:#fcc; border:1px solid #800; font-size:10px; margin:0; padding:1px; width:180px; height:14px; } .tipGrp4s { position:absolute; visibility:hidden; overflow:hidden; color:#008; background:#ccf; border:1px solid #008; margin:0; padding:2px; width:180px; height:auto; } </style> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'> xInclude('../x_core.js', '../x_event.js', '../x_dom.js', '../x_tip.js'); window.onload = function() { new xTooltipGroup('tipGrp1', 'tipGrp1s', 'right', 4, 0); new xTooltipGroup('tipGrp2', 'tipGrp2s', 'top', 0, -2); new xTooltipGroup('tipGrp3', 'tipGrp3s', 'mouse', 20, -10); new xTooltipGroup(['p0','p1','p2','p3', 'p4','p5'], 'tipGrp4s', 'right', 4, 0, ["<p align='center'><b>X Tooltips</b></p><p align='center'>Demo 3</p>", "<p><b>grpClassOrIdList</b></p><p>The css class name which you add to any element you want to trigger a tooltip - Or - an array of id strings.</p>", "<p><b>tipClass</b></p><p>The css class name applied to the tooltip triggered by elements with the grpClass class name (or elements whose id is in the IdList)</p>", "<p><b>origin</b></p><p>One of 'right', 'top', or 'mouse'. For 'right' or 'top', the tooltip is positioned to the right (or top) of the trigger element. For 'mouse' the tooltip will follow the mouse. In all three cases the offsets are applied.</p>", "<p><b>xOffset, yOffset</b></p><p>The tooltip is positioned relative to the above origin, offset by these amounts</p>", "<p><b>textList</b></p><p>If grpClassOrIdList is an array of IDs, then textList provides the tooltip text for the corresponding array index. If grpClassOrIdList is a class name then textList is not needed (tooltip text is taken from the element's TITLE attribute).</p>"]); } </script> </head> <body> <h1>X Tooltips 3 Demo</h1> <h2>Intro</h2> <p>Tested on Win2K with Opera 7.23, Mozilla 1.5, and IE 4, 5 & 6.</p> <p><span class='tipGrp2' title='An X Toy From Cross-Browser.com'>xTooltipGroup</span> provides for multiple groups of tooltips. For each group you create two style classes. One is applied to all elements which will trigger the tooltip. The other specifies the tooltip style for the group. The tooltip takes its text from the element's TITLE attribute - or you provide an array of strings.</p> <p>There are four different tooltip groups on this demo page: <span class='tipGrp1' title="class='tipGrp1'">Group 1</span>, <span class='tipGrp2' title="class='tipGrp2'">Group 2</span>, <span class='tipGrp3' title="class='tipGrp3'">Group 3</span>, and <span id='p0' class='tipGrp4'>Group 4</span>. Tooltip size and styling is controlled by the <i>tipClass</i> argument. Tooltip positioning is controlled by the origin and offset arguments.</p> <h2>The xTooltipGroup Object</h2> <h3>Syntax</h3> <pre>new xTooltipGroup(grpClassOrIdList, tipClass, origin, xOffset, yOffset, textList)</pre> <h3>Parameters</h3> <p><i id='p1' class='tipGrp4'>grpClassOrIdList</i> - The css class name which you add to any element you want to trigger a tooltip - Or - an array of id strings.</p> <p><i id='p2' class='tipGrp4'>tipClass</i> - The css class name applied to the tooltip triggered by elements with the grpClass class name (or elements whose id is in the IdList).</p> <p><i id='p3' class='tipGrp4'>origin</i> - One of 'right', 'top', or 'mouse'. For 'right' or 'top', the tooltip is positioned to the right (or top) of the trigger element. For 'mouse' the tooltip will follow the mouse. In all three cases the following offsets are applied. <p><i id='p4' class='tipGrp4'>xOffset, yOffset</i> - The tooltip is positioned relative to the above origin, offset by these amounts.</p> <p><i id='p5' class='tipGrp4'>textList</i> - If grpClassOrIdList is an array of IDs, then textList provides the tooltip text for the corresponding array index. If grpClassOrIdList is a class name then textList is not needed (tooltip text is taken from the element's TITLE attribute).</p> <h3>Usage</h3> <p>The following shows how the four tooltip groups on this page are initialized.</p> <pre> window.onload = function() { new xTooltipGroup('tipGrp1', 'tipGrp1s', 'right', 4, 0); new xTooltipGroup('tipGrp2', 'tipGrp2s', 'top', 0, -2); new xTooltipGroup('tipGrp3', 'tipGrp3s', 'mouse', 20, -10); new xTooltipGroup(['p0','p1','p2','p3', 'p4','p5'], 'tipGrp4s', 'right', 4, 0, ["<p><b>heading</b></p><p>text</p>", "<p><b>heading</b></p><p>text</p>", "<p><b>heading</b></p><p>text</p>", "<p><b>heading</b></p><p>text</p>", "<p><b>heading</b></p><p>text</p>", "<p><b>heading</b></p><p>text</p>"]); } </pre> <h2>Sed ut perspiciatis...</h2> <p><span class='tipGrp1' title='But I must explain'>Sed ut perspiciatis</span> unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui do<a class='tipGrp3' href="http://lipsum.com/" title="Read about Lorem Ipsum at lipsum.com">lorem ipsum</a> quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <h2>But I must explain...</h2> <p><span class='tipGrp2' title='Sed ut perspiciatis'>But I must explain</span> to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p> <h2>At vero eos et...</h2> <p><span class='tipGrp1' title='On the other hand'>At vero eos et</span> accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> <h2>On the other hand...</h2> <p><span class='tipGrp2' title='At vero eos et'>On the other hand</span>, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.</p> <h2>Home...</h2> <p><a class='tipGrp3' href="http://cross-browser.com/" title="Cross-Browser DHTML Libraries">Cross-Browser.com</a></p> </body> </html> --- NEW FILE: floater.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>X Floater Demo</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <meta name='description' content='Cross-Browser DHTML Libraries and Applications' /> <meta name='keywords' content='menu,dhtml,crossbrowser,layout,css,dom,api,library,demo,javascript,code' /> <link rel='stylesheet' type='text/css' href='../../css/s1.css' /> <style type='text/css'> a.m { color:#008; background:transparent; text-decoration:none; margin:3px 0; padding:1px; display:block; width:100%; border:none; } a.m:hover { color:#fff; background:#008; text-decoration:none; margin:3px 0; padding:1px; display:block; width:100%; border:none; } .hidden { visibility:hidden; margin:0; padding:0; } .content { color:#000; background:#ccc; margin:20px 140px 20px 20px; padding:10px; } #content1 { border-top:3px solid #008; } #content2 { border-bottom:3px solid #008; } #floater { position:absolute; visibility:hidden; width:110px; height:auto; color:#000; background:#ccc; margin:0; padding:4px; border-top:3px solid #008; } </style> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'> xInclude('../x_core.js', '../x_event.js', '../x_slide.js', '../x_debug.js'); var slideTime = 700; var topMargin = 20; var myVar = null; window.onload = function() { topMargin = xPageY('content1'); winOnResize(); // set initial position xAddEventListener(window, 'resize', winOnResize, false); xAddEventListener(window, 'scroll', winOnScroll, false); return; /* alert(typeof(myVar)); return; var ele = xGetElementById('idBody'); alert( 'this: ' + xName(ele) + '\n' + 'offsetParent: ' + xName(ele.offsetParent) + '\n' + 'parentNode: ' + xName(ele.parentNode) + '\n' + 'parentElement: ' + xName(ele.parentElement) + '\n' + '' ); ele = ele.parentNode; alert( 'this: ' + xName(ele) + '\n' + 'offsetParent: ' + xName(ele.offsetParent) + '\n' + 'parentNode: ' + xName(ele.parentNode) + '\n' + 'parentElement: ' + xName(ele.parentElement) + '\n' + '' ); ele = ele.parentNode; alert( 'this: ' + xName(ele) + '\n' + 'offsetParent: ' + xName(ele.offsetParent) + '\n' + 'parentNode: ' + xName(ele.parentNode) + '\n' + 'parentElement: ' + xName(ele.parentElement) + '\n' + '' ); alert(xParentChain('floater')); return; */ test('floater'); xWidth('floater', 120); test('floater'); xHeight('floater', 200); test('floater'); } function test(sId) { var ele = xGetElementById(sId); alert( 'xClientWidth: ' + xClientWidth() + '\n' + 'xClientHeight: ' + xClientHeight() + '\n' + 'style.width('+sId+'): ' + ele.style.width + '\n' + 'xWidth('+sId+'): ' + xWidth(sId) + '\n' + 'style.height('+sId+'): ' + ele.style.height + '\n' + 'xHeight('+sId+'): ' + xHeight(sId) + '\n' + 'xScrollLeft: ' + xScrollLeft() + '\n' + 'xScrollTop: ' + xScrollTop() + '\n' + 'xPageX('+sId+'): ' + xPageX(sId) + '\n' + 'xPageY('+sId+'): ' + xPageY(sId) + '\n' + 'xLeft('+sId+'): ' + xLeft(sId) + '\n' + 'xTop('+sId+'): ' + xTop(sId) + '\n' ); } function winOnResize() { xMoveTo('floater', xClientWidth()-130, topMargin); xShow('floater'); winOnScroll(); // initial slide } function winOnScroll() { xSlideTo('floater', xLeft('floater'), xScrollTop() + topMargin, slideTime); } function setSlideTime(st) { st = parseInt(st); if (!isNaN(st)) slideTime = st; return false; } </script> </head> <body id='idBody'> <div id='content1' class='content'><!-- begin content1 --> <h1>X Floater Demo</h1> <p>Experiment with the floater's slide-time - the duration of the slide in milliseconds. The menu's movement on the page has a very psychological effect on the user. See for yourself by trying these values: <a href='javascript:void(setSlideTime(0))'>0</a>, <a href='javascript:void(setSlideTime(100))'>100</a>, <a href='javascript:void(setSlideTime(700))'>700</a>, <a href='javascript:void(setSlideTime(1000))'>1000</a>. Try your own values...</p> <form id='f1' onsubmit='return setSlideTime(this.st.value)' action=''> <input type='text' id='st' value='700' /> <input type='submit' value='Set' /> </form> <a name='std' class='hidden'>.</a> <h2>Standard Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a name='bime' class='hidden'>.</a> <h2>But I must explain...</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui do<a href="http://lipsum.com/" title="Read about Lorem Ipsum at lipsum.com">lorem ipsum</a> quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p> <a name='otoh' class='hidden'>.</a> <h2>On the other hand...</h2> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.</p> </div><!-- end content1 --> <div id='content2' class='content'><!-- begin content2 --> <p><b>X</b> is a cross-browser dhtml javascript library from <a href='http://cross-browser.com/'>Cross-Browser.com</a>.</p> <p>This demo was tested on Win98 with Opera 7.02, Mozilla 1.2.1, IE 6.0, and NN 4.75. It doesn't look too hot on NN4 but it works ;-)</p> </div><!-- end content2 --> <!-- begin absolutely positioned elements --> <div id='floater'><!-- begin floater --> <h3>Menu</h3> <a href='#std' class='m'>Lorem Ipsum</a> <a href='#bime' class='m'>Sed Ut Perspi</a> <a href='#otoh' class='m'>At Vero Eos</a> <a href='#idBody' class='m'>Top</a> </div><!-- end floater --> </body> </html> --- NEW FILE: bookmarklets.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Bookmarklets / Favelets</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <meta name='description' content='Experiments with bookmarklets/favelets.' /> <meta name='keywords' content='bookmarklets,favelets,menu,dhtml,crossbrowser,layout,css,dom,api,library,demo,javascript,code' /> <link rel='stylesheet' type='text/css' href='../../css/s5.css' /> <style type='text/css'> </style> <script type='text/javascript'> window.onload = function() { } </script> </head> <body> <h1>Experiments with Bookmarklets / Favelets</h1> <h2>Intro</h2> <p><span class='fw'>There's</span> nothing new here, this is just my first time to play around with bookmarklets, also called <em>favelets</em>. The focus of these bookmarklets is javascript debugging.</p> <p>I've tested this (quickly) on Win2K with the latest versions of Opera, Firebird, and IE. (21Nov03)</p> <h2>Bookmarklets</h2> <p><span class='fw'>Click</span> on a link to run it on this page. Save it as a bookmark to run it on other pages.</p> <p><a title='EvalTextArea' href="javascript:function xEvalTA_load(){var f=document.createElement('FORM');f.onsubmit='return false';var t=document.createElement('TEXTAREA');t.id='xDebugTA';t.name='xDebugTA';t.rows='20';t.cols='60';var b=document.createElement('INPUT');b.type='button';b.value='Evaluate';b.onclick=function(){eval(this.form.xDebugTA.value);};f.appendChild(t);f.appendChild(b);document.body.appendChild(f);}xEvalTA_load();void(0)">EvalTextArea</a> (410 bytes) - adds a form with a textarea and a button to the end of the document. Type expressions into the text area and click the button to evaluate them in the context of the current page.</p> <p><a title='xWalkTree' href="javascript:function xWalkTree(n,v){if(n){if(n.nodeType==1){v(n);}for(var c=n.firstChild;c;c=c.nextSibling){xWalkTree(c,v);}}}void(0)">xWalkTree</a> (132 bytes) - defines the function xWalkTree(), which can then be called from the EvalTextArea.</p> <p><a title='xLoadScript' href="javascript:function xLoadScript(url){var s=document.createElement('script');s.src=url;document.getElementsByTagName('head')[0].appendChild(s);}void(0)">xLoadScript</a> (150 bytes) - defines the function xLoadScript(), which can then be called from the EvalTextArea.</p> <h2 title='A few examples'>Usage</h2> <p><span class='fw'>You</span> can type any Javascript in the textarea and click the button to evaluate it within the context of the current page. Here's a few examples using xWalkTree. Click the EvalTextArea link. Click the xWalkTree link. Now copy one of the following, paste it into the textarea, and click 'Evaluate'.</p> <h3>Example 1</h3> <pre> function myVF(n) { if (n.tagName == 'P') n.style.border = '1px dotted red'; else if (n.tagName == 'DIV') n.style.border = '1px dotted blue'; else if (n.tagName == 'PRE') { n.style.color = '#369'; n.style.background = '#ccc'; } } xWalkTree(document.body, myVF); </pre> <h3>Example 2</h3> <pre> function myVF(n) { var t = n.getAttribute('title'); if (t && t.length) n.style.border = '2px solid #000'; } xWalkTree(document.body, myVF); </pre> <h3>Example 3</h3> <pre> function myVF(n) { if (n.tagName == 'H1') n.style.fontSize = '3em'; else if (n.tagName == 'H2') n.style.fontSize = '2em'; else if (n.tagName == 'H3') n.style.fontSize = '1em'; } xWalkTree(document.body, myVF); </pre> <h2>Bookmarklets' Source Code</h2> <h3>EvalTextArea</h3> <pre> function xEvalTA_load() { var f = document.createElement('FORM'); f.onsubmit = 'return false'; var t = document.createElement('TEXTAREA'); t.id='xDebugTA'; t.name='xDebugTA'; t.rows='20'; t.cols='60'; var b = document.createElement('INPUT'); b.type = 'button'; b.value = 'Evaluate'; b.onclick = function() {eval(this.form.xDebugTA.value);}; f.appendChild(t); f.appendChild(b); document.body.appendChild(f); } xEvalTA_load(); </pre> <h3>xWalkTree</h3> <pre> /* xWalkTree() Perform a preorder traversal on the subtree starting at node 'n' and pass each Element node to function 'v'. */ function xWalkTree(n, v) { if (n) { if (n.nodeType == 1) {v(n);} for (var c = n.firstChild; c; c = c.nextSibling) { xWalkTree(c, v); } } } </pre> <h3>xLoadScript</h3> <pre> function xLoadScript(url) { var s = document.createElement('script'); s.src = url; document.getElementsByTagName('head')[0].appendChild(s); } </pre> <hr /> <p><span class='fw'>For</span> more DHTML toys visit <a href='http://cross-browser.com/'>Cross-Browser.com</a></p> </body> </html> --- NEW FILE: popup1.html --- <html> <head> <title>popup 1</title> <style type='text/css'> body { color:#000; background:#cc9; margin:0; padding:2px; font-family:verdana,arial,sans-serif; font-size:14px; } a { color:#000; background:transparent; } </style> </head> <body> <p>This is a 'timeout popup'. It appears one time.</p> <p><a href='javascript:void(top.pop1.timeout())'>Close</a></p> </body> </html> --- NEW FILE: walktree.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>xWalkTree: Node Traversal Demo</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <meta name='description' content='Cross-Browser DHTML Libraries and Applications' /> <meta name='keywords' content='menu,dhtml,crossbrowser,layout,css,dom,api,library,demo,javascript,code' /> <link rel='stylesheet' type='text/css' href='../../css/s5.css' /> <style type='text/css'> #vfta { width:90%; } #leftColumn { width:30%; float:left; padding-right:1em; } #rightColumn { width:65%; float:left; padding-left:1em; border-left:1px dotted #999; } </style> <script type='text/javascript'> var node = null; window.onload = function() { /* First we see if the browser supports the methods and properties we will use. Then we walk the tree starting at document.body and visit each element with the visit function. */ var b = document.body; if (b.getAttribute && b.nodeType && b.firstChild) { xWalkTree(document.body, visit); } } // Apply js from textarea to node. function visit(node) { node = node; eval(document.getElementById('vfta').value); } /* xWalkTree() Perform a preorder traversal on the subtree starting at oNode and pass each Element node to fnVisit. */ function xWalkTree(oNode, fnVisit) { if (oNode) { if (oNode.nodeType == 1) {fnVisit(oNode);} for (var c = oNode.firstChild; c; c = c.nextSibling) { xWalkTree(c, fnVisit); } } } </script> </head> <body> <h1>Node Traversal Demo</h1> <div id='leftColumn'> <h2>Intro</h2> <p><span class='fw'>This</span> demonstrates how to traverse the nodes of a subtree of the document.</p> <p><span class='fw'>The</span> function <em>xWalkTree(oNode, fnVisit)</em> walks the subtree starting at oNode. It applies the fnVisit function to each Element node.</p> <p><span class='fw'>IE4</span> doesn't have 'firstChild' nor 'nextSibling'. Are there alternatives?</p> <p>For more dhtml toys visit<br /><a href='http://cross-browser.com/'>Cross-Browser.com</a>.</p> <hr /> <p><span class='fw'>Lorem ipsum</span> dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><span class='fw'>Ut enim</span> ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p><span class='fw' title='class=fw'>Duis aute irure</span> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <p><span class='fw' title=''>Excepteur</span> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id='rightColumn'> <h2>Visit Function</h2> <p>The following code is applied to every Element node in the document. Use the variable <em>node</em> as a reference to the current node in the traversal.</p> <form onsubmit='xWalkTree(document.body, visit); return false;'> <textarea id='vfta' rows='14'> var t = node.getAttribute('title'); if (t && t.length) { node.style.border = '1px dotted red'; node.parentNode.style.border = '1px dotted blue'; } </textarea> <input type='submit' value='Apply' /> </form> <h2>xWalkTree()</h2> <pre> /* xWalkTree() Perform a preorder traversal on the subtree starting at oNode and pass each Element node to fnVisit. */ function xWalkTree(oNode, fnVisit) { if (oNode) { if (oNode.nodeType == 1) {fnVisit(oNode);} for (var c = oNode.firstChild; c; c = c.nextSibling) { xWalkTree(c, fnVisit); } } } </pre> <h2>Sed ut perspiciatis...</h2> <p><span class='fw'>Sed ut perspiciatis</span> unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui do<a href="http://lipsum.com/" title="Read about Lorem Ipsum at lipsum.com">lorem ipsum</a> quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <h2>But I must explain...</h2> <p><span class='fw' title='class=fw'>But I must explain</span> to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p> <h2>At vero eos et...</h2> <p><span class='fw'>At vero eos et</span> accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> <h2>On the other hand...</h2> <p><span class='fw'>On the other hand</span>, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, <em>every pleasure is to be welcomed and <strong title='oh yes, avoid pain'>every pain</strong> avoided</em>. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.</p> </div> </body> </html> --- NEW FILE: slideouts.html --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>X Slideouts</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <meta name='description' content='Cross-Browser DHTML Libraries and Applications' /> <meta name='keywords' content='menu,dhtml,crossbrowser,layout,css,dom,api,library,demo,javascript,code' /> <link rel='stylesheet' type='text/css' href='../../css/s3.css' /> <style type='text/css'><!-- #header { margin:2px; padding:0; color:#000; font-family:verdana,arial,sans-serif,helvetica; font-size:14px; font-weight:normal; text-align:right; } #main { color:#000; background:#fff; margin:30px 100px 0 100px; padding:10px; font-family:verdana,arial,sans-serif,helvetica; font-size:12px; border:1px solid #666; } .term { color:#ccc; background:#639; padding:10px; font-family:verdana,arial,sans-serif,helvetica; font-size:12px; font-weight:bold; border:1px solid #ccc; } .definition { color:#000; background:#ccc; margin:2px; padding:2px; font-family:verdana,arial,sans-serif,helvetica; font-size:10px; border:1px solid #000; } #t1 { margin:0 0 40px 0px; } #t2 { margin:0 0 40px 70px; } #t3 { margin:0 0 40px 140px; } #t4 { margin:0 0 40px 210px; } #t5 { margin:0 0 40px 280px; } /* dhtml style over-rides */ /* should be dynamically included for down-gradeability */ .term { position:relative; left:0; top:0; width:150px; /* height:60px; */ } .definition { position:absolute; visibility:hidden; margin:0; width:200px; } --></style> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'><!-- xInclude('../x_core.js', '../x_event.js', '../x_slide.js'); var defOffset = 2; var defSlideTime = 200; var tnActive = 0; window.onload = function() { var i=1, t, d; t = xGetElementById('t1'); while (t) { t.termNumber = i; xZIndex(t, 2); d = 'd' + i; xHide(d); xZIndex(d, 1); xMoveTo(d, xPageX(t), xPageY(t)); t = xGetElementById('t' + ++i); } xAddEventListener(document, 'mousemove', docOnMousemove, false); } function docOnMousemove(evt) { var e = new xEvent(evt); var t = getTermEle(e.target); if (!tnActive) { // no def is active if (t) { // mouse is over a term, activate its def xShow('d'+t.termNumber); xSlideTo('d'+t.termNumber, xPageX(t)+xWidth(t)+defOffset, xPageY(t), defSlideTime); tnActive = t.termNumber; } } else { // a def is active if (!t) { // mouse is not over a term, deactivate active def xSlideTo('d'+tnActive, xPageX('t'+tnActive), xPageY('t'+tnActive), defSlideTime); setTimeout("xHide('d"+tnActive+"')", defSlideTime); tnActive = 0; } } } function getTermEle(ele) { //window.status = ele; while(ele && !ele.termNumber) { if (ele == document) return null; ele = xParent(ele); } return ele; } //--></script> </head> <body> <div id='header'> <a href='http://cross-browser.com/'>Cross-Browser.com</a><br> X Slideouts Demo </div> <div id='main'> <div id='t1' class='term'>Introduction</a></div> <div id='d1' class='definition'><b>X & CBE</b><br>Introduction to the <i>X Library</i> and the <i>CBE API</i></div> <div id='t2' class='term'>Menus</div> <div id='d2' class='definition'><b>Menus</b><br>horizontal, vertical, mouseover, floating, etc.</div> <div id='t3' class='term'>Interfaces</div> <div id='d3' class='definition'><b>Dynamic Interfaces</b><br>Page <i>templates</i> with pure DHTML layout that adjusts to the screen size</div> <div id='t4' class='term'>Examples</div> <div id='d4' class='definition'><b>Examples</b><br>learn how to use X and/or CBE with documented examples</div> <div id='t5' class='term'>Documentation</div> <div id='d5' class='definition'><b>Documentation</b><br>Extensive documentation for X and CBE including complete reference manuals</div> </div> <!-- end main --> </body> </html> --- NEW FILE: layout1.js --- // layout1.js // mfoster, cross-browser.com var pg = { hh:45, // header height mw:100, // menu width bm:45, // bottom margin rm:100, // right margin irm:100, // inner right margin fh:45 // footer height }; window.onload = function() { winOnResize(); // initial positioning xAddEventListener(window, 'resize', winOnResize, false); } function winOnResize() { var cw = xClientWidth(), ch = xClientHeight(); xResizeTo('header', cw, pg.hh); xMoveTo('header', 0, 0); xWidth('menu', pg.mw); xMoveTo('menu', 0, pg.hh); // set width to let text reflow xWidth('what', cw-pg.mw-pg.rm); xMoveTo('what', pg.mw, pg.hh); // set width to let text reflow xWidth('how', xWidth('what')-pg.irm); // marker's Y is end of text xMoveTo('how', pg.mw, xPageY('endOfWhat')); // after text reflows we can determine heights xHeight('what', xPageY('how')+xHeight('how')-xPageY('what')); xResizeTo('footer', cw, pg.fh); xMoveTo('footer', 0, xPageY('how')+xHeight('how')+pg.bm); // now show everything xShow('header'); xShow('menu'); xShow('what'); xShow('how'); xShow('footer'); } --- NEW FILE: arrowkeys.html --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>X ArrowKeys Demo</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <meta name='description' content='Cross-Browser DHTML Libraries and Applications' /> <meta name='keywords' content='menu,dhtml,crossbrowser,layout,css,dom,api,library,demo,javascript,code' /> <link rel='stylesheet' type='text/css' href='../../css/s1.css' /> <style type='text/css'><!-- a:link { color:#009; background:#ccc; text-decoration:none; padding:1px; } a:visited { color:#009; background:#ccc; text-decoration:none; padding:1px; } a:hover { color:#ccc; background:#009; text-decoration:none; padding:0; border-left:1px solid #ccc; border-top:1px solid #ccc; border-right:1px solid #333; border-bottom:1px solid #333; } a:active { color:#009; background:#ccc; text-decoration:none; } input { border:1px solid #333; color:#000; background:#eee; width:60px; } .clsX { position:absolute; margin:0; padding:0; } --></style> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'><!-- xInclude('../x_core.js', '../x_event.js'); var delta = 10; window.onload = function() { xResizeTo('id1', 200, 50); xMoveTo('id1', (xClientWidth()-200)/2, (xClientHeight()-50)/2); xShow('id1'); xAddEventListener(document, 'keypress', onKeypress, false); xAddEventListener(document, 'keyup', onKeyup, false); xAddEventListener(document, 'keydown', onKeydown, false); } function onKeypress(evt) { var e = new xEvent(evt); xGetElementById('kp').value = e.keyCode; } function onKeyup(evt) { var e = new xEvent(evt); xGetElementById('ku').value = e.keyCode; } function onKeydown(evt) { var e = new xEvent(evt); xGetElementById('kd').value = e.keyCode; /* var dbgMsg = 'type: ' + e.type + ', keyCode: ' + e.keyCode; if (xOp7) { window.opera.postError(dbgMsg); } else { window.status = dbgMsg; } */ switch (e.keyCode) { case 37: // IE and Moz case 57387: // Opera 7 xLeft('id1', xLeft('id1')-delta); // Left break; case 38: case 57385: xTop('id1', xTop('id1')-delta); // Up break; case 39: case 57388: xLeft('id1', xLeft('id1')+delta); // Right break; case 40: case 57386: xTop('id1', xTop('id1')+delta); // Down break; } } //--></script> </head> <body> <h1>X ArrowKeys Demo</h1> <p>Use the Arrow Keys to move the element</p> <p>Tested with Opera 7.11, IE 6.0, Mozilla 1.4, and Firebird 0.6.1. Does not work with NN4. All tests on Win98.</p> <form id='form1' onsubmit='return false'> <h2>Event keyCodes:</h2> <p>The following will show the keyCode for events <i>keypress</i>, <i>keydown</i>, and <i>keyup</i>.</p> <p><div>keypress</div><input type='text' id='kp'></p> <p><div>keydown</div><input type='text' id='kd'></p> <p><div>keyup</div><input type='text' id='ku'></p> </form> <div id='id1' class='clsX'> <a href='http://cross-browser.com/'>Cross-Browser.com</a> </div> </body> </html> --- NEW FILE: popup2.html --- <html> <head> <title>popup 2</title> <style type='text/css'> body { color:#000; background:#fff; margin:0; padding:2px; font-family:verdana,arial,sans-serif; font-size:14px; } a { color:#000; background:transparent; } </style> </head> <body> <p>This is an 'interval popup'. It appears at regular intervals.</p> <p><a href='javascript:void(top.pop2.timeout())'>Close</a></p> </body> </html> --- NEW FILE: x_3col_fm.html --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Collapsible 3-Column Layout</title> <link rel='stylesheet' type='text/css' href='x_3col_fm.css'/> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'> /* javascript by Mike Foster css and html structure by BlueRobot.com */ if (xInclude('../x_core.js', '../x_dom.js', '../x_debug.js')) { window.onload = xWinOnLoad; } var enabled = false; var alphaVisible = true; var betaVisible = true; function xWinOnLoad() { e = xGetElementById('navAlpha'); // if (e && typeof(e.style) != 'undefined' && document.getElementById && document.getElementsByTagName) { enabled = true; // } } function toggleAlpha() { if (!enabled) return; var d, m, e, a, i; if (alphaVisible) { d = 'none'; m = '0px'; } else { d = 'block'; m = '170px'; } e = xGetElementById('navAlpha'); e.style.display = d; a = xGetElementsByClassName('content'); for (i = 0; i < a.length; ++i) { a[i].style.marginLeft = m; } alphaVisible = !alphaVisible; } function toggleBeta() { if (!enabled) return; var d, m, e, a, i; if (betaVisible) { d = 'none'; m = '0px'; } else { d = 'block'; m = '210px'; } e = xGetElementById('navBeta'); e.style.display = d; a = xGetElementsByClassName('content'); for (i = 0; i < a.length; ++i) { a[i].style.marginRight = m; } betaVisible = !betaVisible; } </script> </head> <body> <div class="content"> <h1>Collapsible 3-Column Layout</h1> <p>This is an example of taking one of the popular three-column CSS layouts from <a href='http://bluerobot.com/'>BlueRobot.com</a> and adding a little javascript to enable collapsible left and right columns.</p> <p>The purpose of this exercise is to utilize a proven CSS layout without modifying the original CSS or original html structure.</p> <p>I'm sure I have not chosen the most efficient implementation. But I was able to implement this very quickly because I already had the function xGetElementsByClassName written.</p> <p>Enjoy,<br />Mike Foster</p> <button onclick='toggleAlpha()'>Toggle Alpha Column</button> <button onclick='toggleBeta()' style='margin-left:20px'>Toggle Beta Column</button> </div> <div class="content"> <h2>But I must explain...</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui do<a href="http://lipsum.com/" title="Read about Lorem Ipsum at lipsum.com">lorem ipsum</a> quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> </div> <div class="content"> <h2>On the other hand...</h2> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> </div> <div class="content"> Visit <a href='http://cross-browser.com/'>Cross-Browser.com</a> and <a href='http://bluerobot.com/'>BlueRobot.com</a> </div> <div id="navAlpha"> <h2>Links</h2> <p></p> <p><a href="http://cross-browser.com/">Cross-Browser.com</a></p> <p><a href="http://bluerobot.com/">BlueRobot.com</a></p> <p><a href="http://lipsum.com/">Lipsum.com</a></p> <hr /> <p><a href="http://sitepoint.com/forums/">SitePoint Forums</a></p> <p><a href="http://hftonline.com/">HFT Forums</a></p> <hr /> <p><a href='http://devedge.netscape.com/'>Netscape DevEdge</a></p> <p><a href='http://www.w3.org/'>World Wide Web Consortium</a></p> <p><a href='http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnanchor/html/anch_webdev.asp?frame=true'>MSDN Web Dev</a></p> </div> <div id="navBeta"> <h2>Sed ut perspiciatis...</h2> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p> </div> </body> </html> --- NEW FILE: tooltips.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>X Tooltips Demo</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <meta name='description' content='Cross-Browser DHTML Libraries and Applications' /> <meta name='keywords' content='menu,dhtml,crossbrowser,layout,css,dom,api,library,demo,javascript,code' /> <link rel='stylesheet' type='text/css' href='../../css/s1.css' /> <style type='text/css'> #xTooltip { position:absolute; visibility:hidden; } .tip1 { color:#666; border-bottom:1px dashed #ccc; } .tip2 { color:#66f; border-bottom:1px dashed #ccf; } .tip3 { } .xtip1 { position:absolute; visibility:hidden; overflow:hidden; color:#000; background:#ccc; border:1px solid #666; font-size:10px; margin:0; padding:1px; width:180px; height:14px; } .xtip2 { position:absolute; visibility:hidden; overflow:hidden; color:#008; background:#ccf; border:1px solid #008; font-size:10px; margin:0; padding:1px; width:180px; height:14px; } .xtip3 { position:absolute; visibility:hidden; overflow:hidden; color:#800; background:#fcc; border:1px solid #800; font-size:10px; margin:0; padding:1px; width:180px; height:14px; } </style> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'> xInclude('../x_core.js', '../x_event.js', '../x_dom.js', '../x_slide.js'); window.onload = function() { xInitTooltips(3); } function xInitTooltips(n) { var i, j, tips; for (i = 1; i <= n; ++i) { tips = xGetElementsByClassName('tip' + i); for (j = 0; j < tips.length; ++j) { tips[j].isTip = true; tips[j].onmouseover = xttOnMouseover; } } xAddEventListener(document, 'mousemove', xttOnMousemove, false); } function xttOnMouseover(e) { var tt = xGetElementById('xTooltip'); tt.className = ... [truncated message content] |
