diff options
24 files changed, 0 insertions, 1259 deletions
diff --git a/javascript/examples/behaviour.js b/javascript/examples/behaviour.js deleted file mode 100644 index d86df13..0000000 --- a/javascript/examples/behaviour.js +++ /dev/null @@ -1,254 +0,0 @@ -/* - Behaviour v1.1 by Ben Nolan, June 2005. Based largely on the work - of Simon Willison (see comments by Simon below). - - Description: - - Uses css selectors to apply javascript behaviours to enable - unobtrusive javascript in html documents. - - Usage: - - var myrules = { - 'b.someclass' : function(element){ - element.onclick = function(){ - alert(this.innerHTML); - } - }, - '#someid u' : function(element){ - element.onmouseover = function(){ - this.innerHTML = "BLAH!"; - } - } - }; - - Behaviour.register(myrules); - - // Call Behaviour.apply() to re-apply the rules (if you - // update the dom, etc). - - License: - - This file is entirely BSD licensed. - - More information: - - http://ripcord.co.nz/behaviour/ - -*/ - -var Behaviour = { - list : new Array, - - register : function(sheet){ - Behaviour.list.push(sheet); - }, - - start : function(){ - Behaviour.addLoadEvent(function(){ - Behaviour.apply(); - }); - }, - - apply : function(){ - for (h=0;sheet=Behaviour.list[h];h++){ - for (selector in sheet){ - list = document.getElementsBySelector(selector); - - if (!list){ - continue; - } - - for (i=0;element=list[i];i++){ - sheet[selector](element); - } - } - } - }, - - addLoadEvent : function(func){ - var oldonload = window.onload; - - if (typeof window.onload != 'function') { - window.onload = func; - } else { - window.onload = function() { - oldonload(); - func(); - } - } - } -} - -Behaviour.start(); - -/* - The following code is Copyright (C) Simon Willison 2004. - - document.getElementsBySelector(selector) - - returns an array of element objects from the current document - matching the CSS selector. Selectors can contain element names, - class names and ids and can be nested. For example: - - elements = document.getElementsBySelect('div#main p a.external') - - Will return an array of all 'a' elements with 'external' in their - class attribute that are contained inside 'p' elements that are - contained inside the 'div' element which has id="main" - - New in version 0.4: Support for CSS2 and CSS3 attribute selectors: - See http://www.w3.org/TR/css3-selectors/#attribute-selectors - - Version 0.4 - Simon Willison, March 25th 2003 - -- Works in Phoenix 0.5, Mozilla 1.3, Opera 7, Internet Explorer 6, Internet Explorer 5 on Windows - -- Opera 7 fails -*/ - -function getAllChildren(e) { - // Returns all children of element. Workaround required for IE5/Windows. Ugh. - return e.all ? e.all : e.getElementsByTagName('*'); -} - -document.getElementsBySelector = function(selector) { - // Attempt to fail gracefully in lesser browsers - if (!document.getElementsByTagName) { - return new Array(); - } - // Split selector in to tokens - var tokens = selector.split(' '); - var currentContext = new Array(document); - for (var i = 0; i < tokens.length; i++) { - token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');; - if (token.indexOf('#') > -1) { - // Token is an ID selector - var bits = token.split('#'); - var tagName = bits[0]; - var id = bits[1]; - var element = document.getElementById(id); - if (tagName && element.nodeName.toLowerCase() != tagName) { - // tag with that ID not found, return false - return new Array(); - } - // Set currentContext to contain just this element - currentContext = new Array(element); - continue; // Skip to next token - } - if (token.indexOf('.') > -1) { - // Token contains a class selector - var bits = token.split('.'); - var tagName = bits[0]; - var className = bits[1]; - if (!tagName) { - tagName = '*'; - } - // Get elements matching tag, filter them for class selector - var found = new Array; - var foundCount = 0; - for (var h = 0; h < currentContext.length; h++) { - var elements; - if (tagName == '*') { - elements = getAllChildren(currentContext[h]); - } else { - elements = currentContext[h].getElementsByTagName(tagName); - } - for (var j = 0; j < elements.length; j++) { - found[foundCount++] = elements[j]; - } - } - currentContext = new Array; - var currentContextIndex = 0; - for (var k = 0; k < found.length; k++) { - if (found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b'))) { - currentContext[currentContextIndex++] = found[k]; - } - } - continue; // Skip to next token - } - // Code to deal with attribute selectors - if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) { - var tagName = RegExp.$1; - var attrName = RegExp.$2; - var attrOperator = RegExp.$3; - var attrValue = RegExp.$4; - if (!tagName) { - tagName = '*'; - } - // Grab all of the tagName elements within current context - var found = new Array; - var foundCount = 0; - for (var h = 0; h < currentContext.length; h++) { - var elements; - if (tagName == '*') { - elements = getAllChildren(currentContext[h]); - } else { - elements = currentContext[h].getElementsByTagName(tagName); - } - for (var j = 0; j < elements.length; j++) { - found[foundCount++] = elements[j]; - } - } - currentContext = new Array; - var currentContextIndex = 0; - var checkFunction; // This function will be used to filter the elements - switch (attrOperator) { - case '=': // Equality - checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); }; - break; - case '~': // Match one of space seperated words - checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); }; - break; - case '|': // Match start with value followed by optional hyphen - checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); }; - break; - case '^': // Match starts with value - checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); }; - break; - case '$': // Match ends with value - fails with "Warning" in Opera 7 - checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); }; - break; - case '*': // Match ends with value - checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); }; - break; - default : - // Just test for existence of attribute - checkFunction = function(e) { return e.getAttribute(attrName); }; - } - currentContext = new Array; - var currentContextIndex = 0; - for (var k = 0; k < found.length; k++) { - if (checkFunction(found[k])) { - currentContext[currentContextIndex++] = found[k]; - } - } - // alert('Attribute Selector: '+tagName+' '+attrName+' '+attrOperator+' '+attrValue); - continue; // Skip to next token - } - - if (!currentContext[0]){ - return; - } - - // If we get here, token is JUST an element (not a class or ID selector) - tagName = token; - var found = new Array; - var foundCount = 0; - for (var h = 0; h < currentContext.length; h++) { - var elements = currentContext[h].getElementsByTagName(tagName); - for (var j = 0; j < elements.length; j++) { - found[foundCount++] = elements[j]; - } - } - currentContext = found; - } - return currentContext; -} - -/* That revolting regular expression explained -/^(\w+)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/ - \---/ \---/\-------------/ \-------/ - | | | | - | | | The value - | | ~,|,^,$,* or = - | Attribute - Tag -*/ diff --git a/javascript/examples/close.gif b/javascript/examples/close.gif Binary files differdeleted file mode 100644 index 1c26bbc..0000000 --- a/javascript/examples/close.gif +++ /dev/null diff --git a/javascript/examples/distros.png b/javascript/examples/distros.png Binary files differdeleted file mode 100644 index 11186a7..0000000 --- a/javascript/examples/distros.png +++ /dev/null diff --git a/javascript/examples/example.css b/javascript/examples/example.css deleted file mode 100644 index 9b1f1eb..0000000 --- a/javascript/examples/example.css +++ /dev/null @@ -1,185 +0,0 @@ -/* Demo Site Styles */ -body { - margin: 0; - padding: 10px; -} - -a:link, a:visited, a:active { - font-family: Verdana, sans-serif; - font-size: 12px; - text-decoration: underline; - color: #000066; - font-weight: bold; -} - -a:hover { - text-decoration: none; -} - -p { - font-family: Verdana, sans-serif; - font-size: 12px; - margin: 0; - padding: 10px; -} - -p.small { - font-family: Verdana, sans-serif; - font-size: 10px; -} - -ol, li { - font-size: 12px; -} - -li { - margin-bottom: 5px; -} - -div.title { - color: #000066; - padding-left: 1px; - font-family: monospace; - letter-spacing: 2px; - font-size: 12px; - line-height: 9px; - height: 9px; - margin-bottom: 1px; -} - -div.main { - border: 1px solid #000066; -} - -/* Default DOM Tooltip Style */ -div.domTT { - border: 1px solid #333333; - background-color: #333333; -} -div.domTT .caption { - font-family: serif; - font-size: 12px; - font-weight: bold; - padding: 1px 2px; - color: #FFFFFF; -} -div.domTT .contents { - font-size: 12px; - font-family: sans-serif; - padding: 3px 2px; - background-color: #F1F1FF; -} - -/* Classic Style */ -div.domTTClassic { - border: 1px solid black; - background-color: InfoBackground; -} -div.domTTClassic .caption { - font-family: serif; - font-size: 13px; - _font-size: 12px; - font-weight: bold; - font-style: italic; - padding: 1px 2px; -} -div.domTTClassic .contents { - color: InfoText; - font-size: 13px; - _font-size: 12px; - font-family: Arial, sans-serif; - padding: 1px 2px; - _padding-bottom: 0; -} - -/* Win9x Style */ -div.domTTWin { - border: 2px outset #BFBFBF; - background-color: #808080 -} -div.domTTWin .caption { - border: 0px solid #BFBFBF; - border-width: 1px 1px 0px 1px; - background-color: #00007F; - padding: 2px; - font-size: 12px; - font-weight: bold; - font-family: sans-serif; - color: white; -} -div.domTTWin .contents { - border: 1px solid #BFBFBF; -} - -/* Overlib Style */ -div.domTTOverlib { - border: 1px solid #333366; - background-color: #333366; -} -div.domTTOverlib .caption { - font-family: Verdana, Helvetica; - font-size: 10px; - font-weight: bold; - color: #FFFFFF; -} -div.domTTOverlib .contents { - font-size: 10px; - font-family: Verdana, Helvetica; - padding: 2px; - background-color: #F1F1FF; -} - -/* Nicetitle Style */ -div.niceTitle -{ - background-color: #333333; - color: #FFFFFF; - font-weight: bold; - font-size: 13px; - font-family: "Trebuchet MS", sans-serif; - width: 250px; - left: 0; - top: 0; - padding: 4px; - position: absolute; - text-align: left; - z-index: 20; - -moz-border-radius: 0 10px 10px 10px; - filter: progid:DXImageTransform.Microsoft.Alpha(opacity=87); - -moz-opacity: .87; - -khtml-opacity: .87; - opacity: .87; -} -div.niceTitle .contents -{ - margin: 0; - padding: 0 3px; - filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); - -moz-opacity: 1; - -khtml-opacity: 1; - opacity: 1; -} -div.niceTitle p -{ - color: #D17E62; - font-size: 9px; - padding: 3px 0 0 0; - margin: 0; - text-align: left; - -moz-opacity: 1; -} - -/* Context Menu Style */ -div.domTTMenu { - width: 150px; - border: 2px outset #E6E6E6; -} -div.domTTMenu .caption { - font-size: 12px; - font-family: sans-serif; - background-color: #E6E6E6; -} -div.domTTMenu .contents { - padding: 1px 0; - background-color: #E6E6E6; -} diff --git a/javascript/examples/example1.html b/javascript/examples/example1.html deleted file mode 100644 index 573ab2b..0000000 --- a/javascript/examples/example1.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 1: Native Tooltips</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTTClassic'; - -// OPTIONAL: block events until page is fully loaded -// This is a workaround for the 'operation aborted' IE bug -var domTT_postponeActivation = true; -window.onload = function() { - domTT_documentLoaded = true; -} - </script> - </head> - <body> - <div class="title">Example 1: Native Tooltips</div> - <div class="main"> - <p>The first example demonstrates the most fundamental use of the tooltip library, as a replacement for native tooltips. In this example, we see how closely a DOM Tooltip can match the functionality of native browser tooltips. There are two links below. The link on the left uses the <em>title</em> attribute, which is interpreted by the browser as a tooltip command. The link on the right uses the DOM Tooltip library to generate the same tooltip.* The tooltip will even disappear after a 5 second delay, approximately the same delay the browser uses for its tooltips.**</p> - <p>It is not necessary to specify the width of the tooltip. The tooltip will expand to the available space if no width is specified.</p> - <p> - <a href="index.html" title="Our First Tooltip">Native Tooltip</a> - | - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'Our First Tooltip', 'lifetime', 5000);">DOM Tooltip</a> - </p> - <p class="small">* If you are using Opera 7, you may have a native tooltip popping up on the right link. It is necessary to navigate to your preferences and turn off tooltips (Preferences > Window > Show Tooltips).</p> - <p class="small">** In Opera 7, the native tooltip says until you mouseout.</p> - <p class="small">Note: The benefit which the DOM Tooltip has over the native tooltip is developer control. The DOM Tooltip settings allow you to modify how long before the tip shows up, the colors used, and a host of other options. Native tooltips are hard to rely on. Sometimes they just don't show up, in different browsers they have different colors and, if you hold your mouse still long enough, they eventually disappear while the mouse is still over the link.</p> - </div> - <div style="float: left;"><a href="toc.html">«TOC</a></div><div style="float: right;"><a href="example2.html">Example 2»</a></div> - </body> -</html> diff --git a/javascript/examples/example10.html b/javascript/examples/example10.html deleted file mode 100644 index 0d35f3d..0000000 --- a/javascript/examples/example10.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 10: Onload PopIn</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript" src="../domTT_drag.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTTWin'; -var domTT_draggable = true; -var domTT_closeLink = '<img src="close.gif" style="vertical-align: bottom;" width="16" height="14" />'; -window.onload = function(in_event) -{ - domTT_addPredefined('popup', 'caption', 'Welcome to my site', 'content', '<div style="text-align: justify; padding: 2px 5px; font-size: 13px; font-family: Arial; background-color: #FFFFFF;"><img src="penguin.gif" width="45" height="46" style="float: left; margin: 5px 3px 0 0;" /><span style="font-weight: bold;">Welcome to Mojavelinux.com!</span><br />Since this is your first visit, I wanted to welcome you personally to my site. Hopefully you will find that your time here will satify all your coding needs. If not, well, then I just hope that you enjoy yourself and have a good time.</div>', 'type', 'sticky'); - domTT_activate('popup1', null, 'predefined', 'popup', 'x', 400, 'y', 150, 'width', 260, 'delay', 1000); - domTT_activate('popup2', null, 'caption', 'Hello There!', 'content', '<div style="background-color: #FFFFFF; font-size: 13px; padding: 2px; font-family: Arial;">This is an example of a second popup tooltip onload. It has a delay twice as long as the first popup.<br /><a href="#void" onclick="domTT_close(this);">close me!</a></div>', 'x', 125, 'y', 300, 'width', 150, 'delay', 2000, 'type', 'sticky'); -} - </script> - </head> - <body> - <div class="title">Example 10: Onload PopIn</div> - <div class="main"> - <p>Okay, I know that some of you aren't going to like what you see in this example, but you have to admit, it is better than a popup window and can be used in a positive way without being too intrusive. So here is my introduction...</p> - <p>If you don't want to annoy users with a popup window, but you do want to alert the attention of your audience, this can be a nice middleground. Simply add the <strong>domTT_activate()</strong> call to the onload handler (or at any arbitrary time) and specify and 'x' and 'y' position for your tooltip (or else it will end up in the upper left corner). When creating tooltips that are not associated with a javascript event, the second parameter to <strong>domTT_activate()</strong> should be set to <code>null</code>.</p> - <p><a href="#void" onclick="domTT_closeAll();">Close windows</a></p> - <p class="small">* The second popup uses a custom close link in its content.</p> - </div> - <div style="float: left;"><a href="example9.html">«Example 9</a></div><div style="float: right;"><a href="example11.html">Example 11»</a></div> - </body> -</html> diff --git a/javascript/examples/example11.html b/javascript/examples/example11.html deleted file mode 100644 index fc3aac4..0000000 --- a/javascript/examples/example11.html +++ /dev/null @@ -1,19 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 11: Tooltip Inside IFrame</title> - <style> -@import url(example.css); - </style> - </head> - <body> - <div class="title">Example 11: Tooltip Inside IFrame</div> - <div class="main"> - <p>In this example, we demonstrate how the tooltip can be triggered from an element inside an iframe, but appear in the parent frame so that it is not confined within the iframe region.</p> - <p><iframe name="child" src="example11b.html" style="width: 300px; height: 100px;"></iframe></p> - <p class="small">Note: In order for this to work, the iframe must have a "name" attribute specified.</p> - </div> - <div style="float: left;"><a href="example10.html">«Example 10</a></div><div style="float: right;"><a href="example12.html">Example 12»</a></div> - </body> -</html> diff --git a/javascript/examples/example11b.html b/javascript/examples/example11b.html deleted file mode 100644 index 679ef99..0000000 --- a/javascript/examples/example11b.html +++ /dev/null @@ -1,18 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <style> -@import url(example.css); - </style> - <script language="javascript" src="../domLib.js"></script> - <script language="javascript" src="../domTT.js"></script> - </head> - <body> - <div class="title">Child Frame</div> - <div class="main"> - <p style="cursor: pointer; cursor: hand;" onmouseover="domTT_activate(this, event, 'content', 'This is an example of a tooltip which is fired from inside of an iframe', 'parent', window.parent.document.body, 'inframe', true, 'trail', true);">Would you like to know more about me? Fly over me to see</p> - <p class="small">Note: The way this works is that the event is fired from the element inside of the iframe but the tooltip is created in the parent frame and uses the event plus the offset of the iframe element in the parent document.</p> - </div> - </body> -</html> diff --git a/javascript/examples/example12.html b/javascript/examples/example12.html deleted file mode 100644 index bd396da..0000000 --- a/javascript/examples/example12.html +++ /dev/null @@ -1,61 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 12: Dynamic Tooltips</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTTClassic'; -var tooltipContentData = [ - 'No content yet. Click one of the links below.', - 'What would you like to do today?', - 'Implement tooltips on your site? <b>Excellent!</b>', - 'You should definitely consider using domTT.' -]; - -var tooltipContentIndex = 0; -function getTooltipContent() { - return tooltipContentData[tooltipContentIndex]; -} - -window.onload = function() { - var ttcontainer = document.createElement('div'); - ttcontainer.style.display = 'none'; - document.body.appendChild(ttcontainer); - - var content = document.createTextNode(new Date()); - var tooltipDiv = document.createElement('div'); - tooltipDiv.id = 'date'; - tooltipDiv.appendChild(content); - ttcontainer.appendChild(tooltipDiv); - setInterval('updateTime()', 1000); -} - -// emulating an ajax callback -function updateTime() { - document.getElementById('date').firstChild.nodeValue = (new Date()); -} - </script> - </head> - <body> - <div class="title">Example 12: Dynamic Tooltips</div> - <div class="main"> - <p>Many users have requested a way to dynamically update the tooltip content after first creation. Well, here it is! There are many ways to get this done, but the easiest is certainly by maintaining an external collection of content and then referencing this collection (or a pointer to this collection) from the domTT_activate() call. It is also possible to modify the existing tooltip, but it is much more difficult and requires DOM work.</p> - <p> - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', getTooltipContent, 'lifetime', 5000, 'closeAction', 'destroy');">Check the content</a> - | - <a href="index.html" onmouseout="domTT_mouseout(this, event); domTT_update('dynamicTip', tooltipContentData[3]);" onmouseover="domTT_activate(this, event, 'content', 'On mouseout, the content will be changed.', 'lifetime', 5000, 'id', 'dynamicTip');">Another dynamic tip</a> - | - <strong onmouseover="domTT_activate(this, event, 'content', document.getElementById('date'));">What time is it?</strong> - </p> - <p><a href="#void" onclick="tooltipContentIndex = 1;">toggle content 1</a> | <a href="#void" onclick="tooltipContentIndex = 2;">toggle content 2</a> | <a href="#void" onclick="tooltipContentIndex = 3;">toggle content 3</a></p> - <p class="small">* The first method requires the 'closeAction' option to be 'destroy' since the tip must be recreated each time. This technique does not work with fading tips because of how they are closed (never destroyed).</p> - <p class="small">* The second method uses the helper function domTT_update() to modify the content of an existing tip. The tip must exist for this to work.</p> - </div> - <div style="float: left;"><a href="example11.html">«Example 11</a></div><div style="float: right;"><a href="example13.html">Example 13»</a></div> - </body> -</html> diff --git a/javascript/examples/example13.html b/javascript/examples/example13.html deleted file mode 100644 index 8cf52b9..0000000 --- a/javascript/examples/example13.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 13: Nested Tooltips</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTTClassic'; - </script> - </head> - <body> - <div class="title">Example 13: Nested Tooltips</div> - <div class="main"> - <p>It is very possible to have a tooltip within a tooltip. In fact, it isn't really inside as must as it is on top. In this example, the large content in the first tooltip contains an element which shows a second tooltip. The second tooltip appears on top of the first.</p> - <p> - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', document.getElementById('content1'), 'type', 'velcro');">Nested within!</a> - </p> - <p class="small">* Obviously, you have to do some thinking about tooltip behavior to be able to navigate to the nested tooltip target.</p> - </div> - <div style="float: left;"><a href="example12.html">«Example 12</a></div><div style="float: right;"><a href="example14.html">Example 14»</a></div> - <div id="container" style="display: none;"> - <div id="content1"> - <p>This is a whole lot of content.</p> - <p>It is all inside the tooltip.</p> - <p>Smack in the <span style="text-decoration: underline;" onmouseover="domTT_activate(this, event, 'content', 'Do you like this?');">middle</span> of all of this, we have a tooltip.</p> - <p>That would mean that this tooltip is nested!</p> - </div> - </div> - </body> -</html> diff --git a/javascript/examples/example14.html b/javascript/examples/example14.html deleted file mode 100644 index 567bda3..0000000 --- a/javascript/examples/example14.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 14: Positioning</title> - <style> -@import url(example.css); -#target div { - float: right; -} -#target div.contents { - float: none; -} - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTTClassic'; - </script> - </head> - <body> - <div class="title">Example 14: Positioning</div> - <div class="main"> - <p>Here we will demonstrate fixed positioning of the tooltip relative to objects on the page. In this example, the matrix of distros is an image map which trigger tooltips to display the respective names. The two distros on the left use the "parent" option, which specifies a target area that will host the tooltip when it appears. Naturally the tooltip must be relatively positioned in this case to be taken in by its parent. The two distros on the right, however, calculate their position based on the position of the image using the <code>domLib_getOffsets()</code> function. It appears to be more work, but in the end, the second method offers the most flexibility.</p> - <p> - <table width="100%"> - <tr> - <td id="target" width="49%"></td> - <td width="2%"><img id="distros" src="distros.png" height="100" width="100" usemap="#distros" border="0" /></td> - <td width="49%"></td> - </table> - </p> - <p class="small">* While setting up this example I realized that domTT could use more flexibility in this area.</p> - <p class="small">** Keep in mind that because the tooltips are created using div tags, it is necessary to change the display style to 'inline' using the first technique to prevent them from displaying as fully expanded blocks.</p> - </div> - <div style="float: left;"><a href="example13.html">«Example 13</a></div><div style="float: right;"><a href="index.html">Index»</a></div> - <map name="distros"> - <area shape="rect" coords="0,0,50,50" onmouseover="domTT_activate(this, event, 'content', 'distro: Red Hat', 'parent', document.getElementById('target'), 'position', 'relative');" /> - <area shape="rect" coords="0,50,50,100" onmouseover="domTT_activate(this, event, 'content', 'Gentoo', 'caption', 'distro', 'parent', document.getElementById('target'), 'position', 'relative');" /> - <area shape="rect" coords="50,0,100,50" onmouseover="domTT_activate(this, event, 'content', 'FreeBSD', 'caption', 'distro', 'x', domLib_getOffsets(document.getElementById('distros')).get('left') + 100, 'y', domLib_getOffsets(document.getElementById('distros')).get('top') + 14);" /> - <area shape="rect" coords="50,50,100,100" onmouseover="domTT_activate(this, event, 'content', 'Debian', 'caption', 'distro', 'x', domLib_getOffsets(document.getElementById('distros')).get('left') + 100, 'y', domLib_getOffsets(document.getElementById('distros')).get('top') + 14)" /> - </map> - </body> -</html> diff --git a/javascript/examples/example2.html b/javascript/examples/example2.html deleted file mode 100644 index 6fdcee6..0000000 --- a/javascript/examples/example2.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 2: Basic Features</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTTClassic'; - </script> - </head> - <!-- add a domTT_deactivate to the body to prevent tooltip artifacts when - changing tabs or applications (demonstrate this feature) --> - <body onblur="domTT_deactivate(domTT_lastOpened);"> - <div class="title">Example 2: Basic Features</div> - <div class="main"> - <p>In the second example, some of the basic options are demonstrated. In the first link, the browser's status bar text is set while the mouse is flying over the link. This is done by adding the 'statusText' option to the domTT_activate() function.* The second link demonstrates the trailing option. The position of the tooltip follows the position of the mouse.** The third link changes the directionality of the tooltip by setting the 'direction' option to 'northeast'.</p> - <p> - <a href="index.html" onmouseover="return makeTrue(domTT_activate(this, event, 'content', 'Tooltip with status text', 'statusText', 'Help! I am stuck in this statusbar!'));">Status text</a> - | - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'This tooltip trails the mouse position.', 'trail', true);">Trailing tooltip</a> - | - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'I like it a bit better up here!', 'trail', true, 'direction', 'northeast');">Northeast tooltip</a> - </p> - <p class="small">* In order to get the status bar text to override the browser default when using domTT_activate() on a <u>link</u> tag, you must wrap the event call in <u>return makeTrue()</u> so that it intercepts this default from occuring (the default is to show the <em>href</em> value of the link). This is <strong>not</strong> necessary for any other tag, such as a span or div tag. Setting the status bar text has problems in some browsers.</p> - <p class="small">** Writing the the status bar is an uphill battle when dealing with links because the browser likes to display its own text here. Some workarounds must be used.</p> - <p class="small">Note: The mousemove event triggers very slowly in Mozilla when using a slower computer, so this constant update is not always very smooth. This is a limitation of Mozilla.</p> - </div> - <div style="float: left;"><a href="example1.html">«Example 1</a></div><div style="float: right;"><a href="example3.html">Example 3»</a></div> - </body> -</html> diff --git a/javascript/examples/example3.html b/javascript/examples/example3.html deleted file mode 100644 index 93825fc..0000000 --- a/javascript/examples/example3.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 3: Styled Tooltips</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTTOverlib'; - </script> - </head> - <body> - <div class="title">Example 3: Styled Tooltips</div> - <div class="main"> - <p>The third example demonstrates how easily DOM Tooltips can duplicate the styles of other tooltips found around the web. The first link uses the default <a href="http://www.bosrup.com/web/overlib/">overlib</a> style and appears without a delay. The second link adds an auto-generated caption to the tooltip and only trails the mouse on the 'x' axis. Getting a bit more fancy, the third link uses the more stylish <a href="http://www.kryogenix.org/code/browser/nicetitle/">nicetitles</a> style, using a calculated position and XHTML in the content rather than just plain text.*</p> - <p> - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'This tooltip uses the overlib style.', 'trail', true, 'delay', 0);">overlib style</a> - | - <a href="index.html" onmouseover="domTT_activate(this, event, 'caption', 'The caption goes here...', 'content', '...and the content goes here.', 'trail', 'x');">overlib style with caption</a> - | - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'Many weblogs are now sporting this look.<p>i.e. http://blog.codefront.net</p>', 'styleClass', 'niceTitle', 'x', this.offsetLeft + 5, 'y', this.offsetTop + 5);">nicetitles style</a> - </p> - <p class="small">* The nicetitle style is taking advantage of the transparency and curved border style provided in some of the newer browsers, such as Mozilla, to add to the sleak look. These settings will not be visible in all browsers.</p> - </div> - <div style="float: left;"><a href="example2.html">«Example 2</a></div><div style="float: right;"><a href="example4.html">Example 4»</a></div> - </body> -</html> diff --git a/javascript/examples/example4.html b/javascript/examples/example4.html deleted file mode 100644 index e90075b..0000000 --- a/javascript/examples/example4.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 4: Behavior Options</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript" src="../domTT_drag.js"></script> - <script> -var domTT_styleClass = 'domTTOverlib'; - </script> - </head> - <body> - <div class="title">Example 4: Behavior Options</div> - <div class="main"> - <p>This example demonstrates the different behaviors that can be assigned to the tips! The term 'sticky' simply means that the tooltip does not go away when the mouse moves away from the target or the tip. The previous examples used the 'greasy' setting. To close a sticky tooltip, you just click on the '[close]' dialog, which is auto-generated and set using the 'closeLink' option. The second target (<em>notice, not a link</em>) uses a custom link inside the contents using the <code>domTT_close()</code> method. The final link uses the 'velcro' setting, which causes the tip to disappear only when the mouse moves out of the tip itself.</p> - <p> - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'This tip stays put when active');" onclick="return makeFalse(domTT_activate(this, event, 'caption', 'I\'m Stuck & Draggable ', 'content', 'Go on, drag me around!', 'type', 'sticky', 'closeLink', '[close]', 'draggable', true));">Click to stick</a> - | - <strong onmouseover="domTT_activate(this, event, 'caption', 'Caption here...', 'content', '...and text here. [ <a href="#void" onclick="domTT_close(this);">x</a> ]', 'type', 'sticky', 'closeLink', '', 'draggable', true);">Custom close link</strong> - | - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'This tip will disappear on mouse out', 'type', 'velcro');">Velcro tooltip</a> - | - <strong>Name:</strong> <input type="text" onfocus="this.blur();" style="background-color: #EFEFEF; font-size: 10px;" name="fullname" onclick="domTT_deactivate(this.id);" onmouseover="domTT_activate(this, event, 'content', 'Sorry, this input is disabled!', 'lifetime', 30000);" /> - </p> - <p>This example also demonstrates another important feature. First, click on the left link. Then, before closing the tooltip tip, fly over the second target. Ah!...two tooltips can co-exist. Tips can either be on links or on plain text. Also, notice they are on top of each other. Well...go on, click and drag the caption part of the first two tips to move them around! You will see that the tip being dragged always goes on top of the stationary tip.</p> - <p>The example on the right demonstrates the use of tooltips on form fields. The onclick event makes a call to <code>domTT_deactivate(this.id)</code>, which deactivates the tooltip. <em>The id is always available on an element following domTT_active().</em> (Please note, disabed form fields do not have positions in the page. It is necessary to emulate a disabled field using the blur function.)</p> - </div> - <div style="float: left;"><a href="example3.html">«Example 3</a></div><div style="float: right;"><a href="example5.html">Example 5»</a></div> - </body> -</html> diff --git a/javascript/examples/example5.html b/javascript/examples/example5.html deleted file mode 100644 index 6142d41..0000000 --- a/javascript/examples/example5.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 5: Advanced Features</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../fadomatic.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script> -var domTT_styleClass = 'domTTOverlib'; -var domTT_oneOnly = true; - </script> - </head> - <body> - <div class="title">Example 5: Advanced Features</div> - <div class="main"> - <p>Now we are going to strut our stuff and show some advanced features. The first link adheres to a snap grid. The second link demonstrates alpha fading.* The last target has a tip which trails with a slight delay.</p> - <p> - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'I am trailing on a grid', 'trail', true, 'grid', 10);">Snap to grid</a> - | - <a href="index.html" onmouseover="this.style.color = '#D17E62'; domTT_activate(this, event, 'content', 'The Zepher Appears!<p>Thank you, but please hold the applause until the end of the show.</p>', 'trail', true, 'fade', 'both', 'fadeMax', 87, 'styleClass', 'niceTitle');" onmouseout="this.style.color = ''; domTT_mouseout(this, event);">Tooltip fading in</a> - | - <a href="index.html" onmouseover="domTT_activate(this, event, 'caption', 'Feeling Tipsy?', 'content', 'This tip should probably call a designated driver.', 'trail', true, 'lazy', true);">Lazy trailing</a> - | - <a href="index.html" onmouseover="domTT_activate(this, event, 'caption', false, 'content', 'This tip will close when any other tip is activated<br />The caption was set to <code>false</code> to prevent it from being created', 'type', 'sticky');">One tooltip only</a> - </p> - <p>Notice that the second <a href="http://www.google.com">link</a> changes color when the mouse passes over it. This demonstrates that other mouseover events can coexist with the activation of the tooltip.</p> - <p class="small">* The alpha fading does not work in all browsers.</p> - <p class="small">* The link directly below the "Tooltip fading in" target demonstrates that links previously covered by a tooltip are still active when the tooltip disappears.</p> - <p class="small"><strong>Help!</strong> Anyone know why I cannot get lazy trailing to work for Opera?</p> - </div> - <div style="float: left;"><a href="example4.html">«Example 4</a></div><div style="float: right;"><a href="example6.html">Example 6»</a></div> - <div id="pos"></div> - </body> -</html> diff --git a/javascript/examples/example6.html b/javascript/examples/example6.html deleted file mode 100644 index 6e093f9..0000000 --- a/javascript/examples/example6.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 6: XHTML Content</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript" src="../domTT_drag.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTTOverlib'; -var domTT_maxWidth = false; -try -{ - var winCloseButton = document.createElement('img'); - winCloseButton.src = 'close.gif'; - winCloseButton.style.verticalAlign = 'bottom'; -} -// permission denied -catch (e) -{ - var winCloseButton = 'X'; -} - </script> - </head> - <body> - <div class="title">Example 6: XHTML Content</div> - <div class="main"> - <p>In this example, the versatility of the tooltip content is demonstrated by using XHTML in the content. Including XHTML allows for embedding of markup, images, and even an <u>iframe</u>! The tooltip on the left contains an embedded image by referencing the content of an existing html element. The second link uses the same html, but includes it inline. The last link acts as an inline window, loading the Google homepage!*</p> - <p> - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', document.getElementById('prairedog'));">Take a look!</a> - | - <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'How adorable!<br /><img src="prairiedog.jpg" />');">Take another look!</a> - | - <a href="#void" onclick="return makeFalse(domTT_activate(this, event, 'id', 'local', 'caption', 'Relative URL', 'content', '<iframe src="inline.html" style="width: 400px; height: 200px;"></iframe>', 'type', 'sticky', 'styleClass', 'domTTWin', 'closeLink', winCloseButton, 'draggable', true, 'closeAction', 'destroy'));">Inline window (local)</a> - | - <a href="#void" onclick="return makeFalse(domTT_activate(this, event, 'caption', 'Google Search', 'content', '<iframe src="http://www.google.com/firefox" style="width: 600px; height: 400px;"></iframe>', 'statusText', 'Loading Google...', 'type', 'sticky', 'styleClass', 'domTTWin', 'closeLink', winCloseButton, 'draggable', true, 'closeAction', 'destroy'));">Inline window (external)</a> - </p> - <p class="small">Note: The first tooltip passes in a DOM object for the content. The content of this tip is placed in a hidden element and then moved into the tip when it becomes active.</p> - <p class="small">Note: Notice how the webpage in the <u>iframe</u> reload each time the tooltip is opened. This happens because the 'closeAction' option is set to 'destroy'. If we change 'closeAction' to 'hide', then the webpage will remain active when it is not visible. This option can be useful when the content in the webpage needs to be cleared after working with it, for instance if we wanted to clear the search we made each time and start fresh.</p> - <p class="small">Note: To load a secondary URL from an onclick event, as is the case in this iframe, it is necessary to cancel the click event by wrapping the call to 'domTT_activate()' in 'makeFalse()'.</p> - </div> - <div style="float: left;"><a href="example5.html">«Example 5</a></div><div style="float: right;"><a href="example7.html">Example 7»</a></div> - <div id="tooltipPool" style="display: none"> - <div id="prairedog"> - How adorable! - <br /> - <img src="prairiedog.jpg" height="148" width="135" /> - </div> - </div> - </body> -</html> diff --git a/javascript/examples/example7.html b/javascript/examples/example7.html deleted file mode 100644 index 0ebb219..0000000 --- a/javascript/examples/example7.html +++ /dev/null @@ -1,47 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 7: Object Detection</title> - <style> -@import url(example.css); -div.domTTOverlib -{ - max-width: 200px; -} - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTT'; -var domTT_maxWidth = 200; - </script> - </head> - <body> - <div class="title">Example 7: Object Detection</div> - <div class="main"> - <p>There are some elements that overlap the tooltips, such as select form elements and flash animations. DOM Tooltip can hunt down and hide these elements that cannot be overlapped.* The solution is somewhat crude, but necessary in order to ensure the tooltip remains visible.</p> - <p class="note">Note: The collection of elements to hide is cached in a variable <code>domLib_collisionElements</code> on the first tooltip activation. It is possible to flush the cache and force a new search by setting the global variable <code>domLib_collisionsCached</code> to <code>false</code>.</p> - <p> - <a href="index.html" onmouseover="return makeTrue(domTT_activate(this, event, 'caption', 'Where are the culprits?', 'content', 'I\'m out to hunt and destroy! <select><option>don\'t kill me!</option></select>', 'statusText', 'Where did they go??? Fly out again to find out.', 'trail', true, 'closeMethod', 'destroy'));">Hunt and destroy</a> - </p> - <p> - <select name="select1[]" multiple="multiple" size="2"> - <option value="0">I'm in the way</option> - <option value="1">I'm in the way</option> - <option value="2">I'm in the way</option> - <option value="3">I'm in the way</option> - <option value="4">I'm in the way</option> - <option value="5">I'm in the way</option> - <option value="6">I'm in the way</option> - </select> - <select style="vertical-align: top;"> - <option value="0">I'm in the way</option> - <option value="1">I'm in the way</option> - </select> - </p> - <p class="small">* This problem is very browser specific. In IE, <u>select</u> elements are drawn using the native window library widgets and are thus sitting on top of the html page layer. Therefore, no html element can go above these decorations.</p> - </div> - <div style="float: left;"><a href="example6.html">«Example 6</a></div><div style="float: right;"><a href="example8.html">Example 8»</a></div> - </body> -</html> diff --git a/javascript/examples/example8.html b/javascript/examples/example8.html deleted file mode 100644 index 8192cfc..0000000 --- a/javascript/examples/example8.html +++ /dev/null @@ -1,151 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 8: Custom Context Menu</title> - <style> -@import url(example.css); -table { - border-collapse: collapse; - background-color: #E6E6E6; - color: #000000; - border: 0; - width: 148px; - margin: 0 auto; -} -td { - padding: 2px 2px 2px 20px; - text-align: left; - font-size: 12px; - font-family: sans-serif; -} -td.hover { -} -td.hr { - padding: 2px; - height: 4px; -} -td.hr { - cursor: default; - background-color: #E6E6E6; -} -div.hr { - border: 1px inset #E6E6E6; - height: 0px; - font-size: 0px; -} - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'domTTMenu'; -try -{ - window.defaultStatus = 'Right click (or Ctrl+click) for menu'; -} -// permission denied -catch(e) {} -var menuId; -onload = function() -{ - var tmp_type = 'sticky'; - if (window.location.search == '?velcro') - { - tmp_type = 'velcro'; - } - - domTT_addPredefined('menu', 'content', document.getElementById('menu'), 'caption', false, 'type', tmp_type, 'statusText', 'Select Option...', 'clearMouse', false, 'offsetX', 0, 'offsetY', 0); - - document.oncontextmenu = function(in_event) - { - if (typeof(in_event) == 'undefined') - { - in_event = event; - } - - if (in_event.ctrlKey) - { - return; - } - - if (domTT_isActive(menuId)) - { - domTT_deactivate(menuId); - } - else - { - menuId = domTT_activate(this, in_event, 'predefined', 'menu'); - } - - return false; - }; - - document.onmousedown = function(in_event) - { - if (typeof(in_event) == 'undefined') - { - in_event = event; - } - - if (domLib_isOpera || domLib_isKonq) - { - if ((domLib_isKonq || in_event[domLib_eventButton] == 1) && domTT_isActive(menuId)) - { - domTT_deactivate(menuId); - } - else if (in_event.ctrlKey) - { - menuId = domTT_activate(this, in_event, 'predefined', 'menu'); - return false; - } - } - else - { - if (in_event[domLib_eventButton] == 1 && domTT_isActive(menuId)) - { - domTT_deactivate(menuId); - } - } - }; -} - -function HoverMe(in_this) -{ - in_this.style.backgroundColor = '#4C59A6'; - in_this.style.color = '#FFFFFF'; - in_this.style.cursor = domLib_isIE ? 'hand' : 'pointer'; -} - -function UnhoverMe(in_this) -{ - in_this.style.backgroundColor = ''; - in_this.style.color = ''; - in_this.style.cursor = ''; -} - </script> - </head> - <body> - <div class="title">Example 8: Custom Context Menu</div> - <div class="main"> - <p>This example thinks way outside the box, replacing the context menu with a custom tooltip. Right click on the page to see a custom context menu. (If you are on Opera 7 or Konqueror, use CTRL+click). Hold down control key to get a regular context menu (If you are on Opera 7 or Konqueror, get the context menu with a right click).</p> - <p>To try out the <em>velcro</em> tooltip for this menu, <a href="example8.html?velcro">reload</a> the page with the 'type' option set to 'velcro'. Notice when you mouse out of the tip, it destroys itself. No need to click somewhere on the page to kill the menu.</p> - </div> - <div style="float: left;"><a href="example7.html">«Example 7</a></div><div style="float: right;"><a href="example9.html">Example 9»</a></div> - <div style="display: none;" id="tooltipPool"> - <table id="menu" onselectstart="return false;"> - <tr> - <td onmouseover="HoverMe(this);" onmouseout="UnhoverMe(this);">Custom Item</td> - </tr> - <tr> - <td onmouseover="HoverMe(this);" onmouseout="UnhoverMe(this);">Another Item</td> - </tr> - <tr> - <td class="hr"><div class="hr"></div></td> - </tr> - <tr> - <td onmouseover="HoverMe(this);" onmouseout="UnhoverMe(this);">New Section</td> - </tr> - </table> - </div> - </body> -</html> diff --git a/javascript/examples/example9.html b/javascript/examples/example9.html deleted file mode 100644 index 4135f88..0000000 --- a/javascript/examples/example9.html +++ /dev/null @@ -1,56 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>[DOM Tooltip] Example 9: Auto-Generated Tips</title> - <style> -@import url(example.css); - </style> - <script type="text/javascript" language="javascript" src="../domLib.js"></script> - <script type="text/javascript" language="javascript" src="../domTT.js"></script> - <script type="text/javascript" language="javascript" src="behaviour.js"></script> - <script type="text/javascript" language="javascript"> -var domTT_styleClass = 'niceTitle'; - </script> - </head> - <body> - <div class="title">Example 9: Auto-generated Tips</div> - <div class="main"> - <p>In order to reduce the footprint of the DOM Tooltip library, the tips can be automatically created by reading the 'title' attribute on the page elements. To enable this feature, call the function 'domTT_replaceTitles()' at the bottom of the page.* This function looks for elements that contain the class 'tooltip' and have a 'title' attribute set. The title attribute is replaced with a custom tooltip. The 'domTT_replaceTitles()' function also takes an optional decorator function, which can be used to customize the rendering of the title content within the tooltip.</p> - <p>Another way to abstract the usage of the DOM Tooltip library is to use the integration with the behaviour library, which is used in the third example below. This library uses CSS selectors to define javascript behaviour on an html element. This method of defining tooltips is strongly encouraged, since it enables seperation of html and javascript. It also prevents lock-in to the DOM Tooltip library.</p> - <p> - <strong title="That's what a tooltip is for!" class="tooltip">Need help?</strong> - | - <a href="http://www.alistapart.com" title="An excellent resource for web design:" class="tooltip">Recommended reading</a> - | - <a href="http://bennolan.com/behaviour/"><span class="tooltip1">Clean up your markup</span></a> - </p> - <p class="small">* Using this feature takes away some of the functionality of the tooltip library. This problem might be addressed in future releases.</p> - </div> - <div style="float: left;"><a href="example8.html">«Example 8</a></div><div style="float: right;"><a href="example10.html">Example 10»</a></div> - <script type="text/javascript"> -function nicetitleDecorator(el) -{ - var result = el.title; - if (el.href) - { - result += '<p>' + el.href + '</p>'; - } - - return result; -} - -domTT_replaceTitles(nicetitleDecorator); - -var tooltips = { - 'span.tooltip1' : function(element) { - element.onmouseover = function(event) { - domTT_activate(this, event, 'content', 'After all the work of WASP and others to promote clean markup, valid pages and graceful degradataion via css - it sucks that we\'re going back to tag soup days by throwing javascript tags into our html. The better way to do javascript is to do it unobtrusively, using the behaviour library.', 'trail', true); - } - } -} - -Behaviour.register(tooltips); - </script> - </body> -</html> diff --git a/javascript/examples/index.html b/javascript/examples/index.html deleted file mode 100644 index 89a3b08..0000000 --- a/javascript/examples/index.html +++ /dev/null @@ -1,25 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <title>DOM Tooltip :: Demos</title> - <style> -@import url(example.css); - </style> - </head> - <body> - <div class="main"> - <p><b>DOM Tooltip 0.7.3</b></p> - <p>Welcome to the demo of the DOM Tooltip Javascript Library. DOM Tooltip is a very versatile and powerful javascript library and to try to explain how to use it is very difficult. This demo should dually give you an idea of what the library is capable of and provide you with well organized example code to work from. Since this demo has received signficant improvement over the last serveral versions, it is additionally turning into a pretty nice test harness for the code. Advance through this little demo and give yourself an idea of what DOM Tooltip has to offer you.</p> - <p><b>Summary</b>: DOM Tooltip allows developers to add customized tooltips to webpages. The tooltips are controlled through style class definitions and respond to events on the page, such as a 'mouseover' event. When creating the dynamic layers, the library detects possible collisions with form elements (such as select boxes, which float above the html surface) and screen edge bleeding. While the library was originally designed to simply create context tooltips, it has since grown into a significantly more versatile script. It is now possible to create a wide variety of dynamic layers, such as embedded windows, context menus and hidden blocks. Additional features of the library include sticky tips, tooltip fading, lifetime, relative positioning, class assignments, width adjustments, mouse dragging, captions, directionality, offset adjustments, adjustable activate/deactivate delay times, snapping to grid, fate adjustment (hide or destroy) and references to created tips. In short, this library is everything you need to create dynamic layers in the webpage.</p> - <p><b>Official Demo URL</b>: <a href="http://www.mojavelinux.com/cooker/demos/domTT/">http://www.mojavelinux.com/cooker/demos/domTT/</a></p> - <p><b>Maintainer</b>: Dan Allen <dan dot allen at mojavelinux dot com></p> - <p><b>Homepage</b>: <a href="http://www.mojavelinux.com/projects/domtooltip/">http://www.mojavelinux.com/projects/domtooltip/</a></p> - <p><b>Freshmeat Page</b>: <a href="http://freshmeat.net/projects/domtt/">http://freshmeat.net/projects/domtt/</a></p> - <p><b>License</b>: <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2.0</a></p> - <p><b>Updated</b>: 2005/07/16</p> - <p><b>Supported Browsers</b>: Mozilla (Gecko), IE 5.5+, IE on Mac, Konqueror, Safari, Opera 7</p> - </div> - <div style="float: left;"><div style="float: right;"><a href="toc.html">TOC»</a></div> - </body> -</html> diff --git a/javascript/examples/inline.html b/javascript/examples/inline.html deleted file mode 100644 index 6655915..0000000 --- a/javascript/examples/inline.html +++ /dev/null @@ -1,14 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> -<html> - <head> - <style type="text/css"> -body { - background-color: #FFFFFF; -} - </style> - </head> - <body> - <p>I am alive! Would you click to <a href="#void" onclick="window.parent.domTT_deactivate('local');">close</a> me now? You can do so from within this window because it is relative (local to this domain) and it does not violate the restrictions of cross-site scripting.</p> - </body> -</html> diff --git a/javascript/examples/penguin.gif b/javascript/examples/penguin.gif Binary files differdeleted file mode 100644 index a33fa87..0000000 --- a/javascript/examples/penguin.gif +++ /dev/null diff --git a/javascript/examples/prairiedog.jpg b/javascript/examples/prairiedog.jpg Binary files differdeleted file mode 100644 index 1029b62..0000000 --- a/javascript/examples/prairiedog.jpg +++ /dev/null diff --git a/javascript/examples/toc.html b/javascript/examples/toc.html deleted file mode 100644 index d2936bf..0000000 --- a/javascript/examples/toc.html +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" - "http://www.w3.org/TR/REC-html40/strict.dtd"> - <head> - <title>[DOM Tooltip] Table of Contents</title> - <style> -@import url(example.css); - </style> - </head> - <body> - <div class="title">Table of Contents</div> - <div class="main"> - <ol> - <li><a href="example1.html">Example 1: Native Tooltip</a></li> - <ol type="a"> - <li>Browser tooltip using title attribute</li> - <li>Basic mouseover tooltip using domTT</li> - </ol> - <li><a href="example2.html">Example 2: Basic Features</a></li> - <ol type="a"> - <li>Status text</li> - <li>Trailing the mouse</li> - <li>Directionality</li> - </ol> - <li><a href="example3.html">Example 3: Styled Tooltips</a></li> - <ol type="a"> - <li>Overlib style</li> - <li>Tooltip with caption</li> - <li>Nicetitles style</li> - </ol> - <li><a href="example4.html">Example 4: Behavior Options</a></li> - <ol type="a"> - <li>Sticky tooltip</li> - <li>Custom close link</li> - <li>Velcro tooltip</li> - <li>Form field tooltip</li> - </ol> - <li><a href="example5.html">Example 5: Advanced Features</a></li> - <ol type="a"> - <li>Snap to grid</li> - <li>Tooltip alpha fading</li> - <li>Lazy (drunk) tooltip</li> - </ol> - <li><a href="example6.html">Example 6: Special Content</a></li> - <ol type="a"> - <li>Image in tooltip content</li> - <li>Inline window</li> - </ol> - <li><a href="example7.html">Example 7: Object Detection</a></li> - <ol type="a"> - <li>select form element detection</li> - <li>flash detection (not yet demonstrated)</li> - </ol> - <li><a href="example8.html">Example 8: Custom Context Menu</a></li> - <ol type="a"> - <li>Menu on right click</li> - <li>Menu on CTRL-click</li> - </ol> - <li><a href="example9.html">Example 9: Auto-Generated Tips</a></li> - <ol type="a"> - <li>Nicetitles example with plain text</li> - <li>Nicetitles example with link text</li> - </ol> - <li><a href="example10.html">Example 10: Onload PopIn</a></li> - <ol type="a"> - <li>Popup with embedded image on page load</li> - <li>Popup with custom close link on page load with delay</li> - </ol> - <li><a href="example11.html">Example 11: Tooltip In IFrame</a></li> - <ol type="a"> - <li>Tooltip from within a frame</li> - </ol> - <li><a href="example12.html">Example 12: Dynamic Tooltips</a></li> - <ol type="a"> - <li>Dynamic content on tooltip creation</li> - <li>Dynamic update of content on existing tooltip</li> - </ol> - <li><a href="example13.html">Example 13: Nested Tooltips</a></li> - <ol type="a"> - <li>Greasy tooltip from within a velcro tooltip</li> - </ol> - <li><a href="example14.html">Example 14: Positioning</a></li> - <ol type="a"> - <li>Custom positioning of tooltips</li> - </ol> - </ol> - </div> - <div style="float: left;"><a href="index.html">«Index</a></div><div style="float: right;"><a href="example1.html">Example 1»</a></div> - </body> -</html> |
