From 3888b786a0fc15ea309c59861d6221bc6a66aaf7 Mon Sep 17 00:00:00 2001 From: Dieter Hametner Date: Thu, 4 Jan 2007 23:19:31 +0000 Subject: removed examples --- javascript/examples/behaviour.js | 254 ------------------------------------ javascript/examples/close.gif | Bin 279 -> 0 bytes javascript/examples/distros.png | Bin 5447 -> 0 bytes javascript/examples/example.css | 185 -------------------------- javascript/examples/example1.html | 38 ------ javascript/examples/example10.html | 34 ----- javascript/examples/example11.html | 19 --- javascript/examples/example11b.html | 18 --- javascript/examples/example12.html | 61 --------- javascript/examples/example13.html | 34 ----- javascript/examples/example14.html | 44 ------- javascript/examples/example2.html | 34 ----- javascript/examples/example3.html | 30 ----- javascript/examples/example4.html | 34 ----- javascript/examples/example5.html | 38 ------ javascript/examples/example6.html | 54 -------- javascript/examples/example7.html | 47 ------- javascript/examples/example8.html | 151 --------------------- javascript/examples/example9.html | 56 -------- javascript/examples/index.html | 25 ---- javascript/examples/inline.html | 14 -- javascript/examples/penguin.gif | Bin 2264 -> 0 bytes javascript/examples/prairiedog.jpg | Bin 5809 -> 0 bytes javascript/examples/toc.html | 89 ------------- 24 files changed, 1259 deletions(-) delete mode 100644 javascript/examples/behaviour.js delete mode 100644 javascript/examples/close.gif delete mode 100644 javascript/examples/distros.png delete mode 100644 javascript/examples/example.css delete mode 100644 javascript/examples/example1.html delete mode 100644 javascript/examples/example10.html delete mode 100644 javascript/examples/example11.html delete mode 100644 javascript/examples/example11b.html delete mode 100644 javascript/examples/example12.html delete mode 100644 javascript/examples/example13.html delete mode 100644 javascript/examples/example14.html delete mode 100644 javascript/examples/example2.html delete mode 100644 javascript/examples/example3.html delete mode 100644 javascript/examples/example4.html delete mode 100644 javascript/examples/example5.html delete mode 100644 javascript/examples/example6.html delete mode 100644 javascript/examples/example7.html delete mode 100644 javascript/examples/example8.html delete mode 100644 javascript/examples/example9.html delete mode 100644 javascript/examples/index.html delete mode 100644 javascript/examples/inline.html delete mode 100644 javascript/examples/penguin.gif delete mode 100644 javascript/examples/prairiedog.jpg delete mode 100644 javascript/examples/toc.html (limited to 'javascript') 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 deleted file mode 100644 index 1c26bbc..0000000 Binary files a/javascript/examples/close.gif and /dev/null differ diff --git a/javascript/examples/distros.png b/javascript/examples/distros.png deleted file mode 100644 index 11186a7..0000000 Binary files a/javascript/examples/distros.png and /dev/null differ 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 @@ - - - - [DOM Tooltip] Example 1: Native Tooltips - - - - - - -
Example 1: Native Tooltips
-
-

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 title 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.**

-

It is not necessary to specify the width of the tooltip. The tooltip will expand to the available space if no width is specified.

-

- Native Tooltip - | - DOM Tooltip -

-

* 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).

-

** In Opera 7, the native tooltip says until you mouseout.

-

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.

-
-
«TOC
Example 2»
- - 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 @@ - - - - [DOM Tooltip] Example 10: Onload PopIn - - - - - - - -
Example 10: Onload PopIn
-
-

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...

-

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 domTT_activate() 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 domTT_activate() should be set to null.

-

Close windows

-

* The second popup uses a custom close link in its content.

-
-
«Example 9
Example 11»
- - 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 @@ - - - - [DOM Tooltip] Example 11: Tooltip Inside IFrame - - - -
Example 11: Tooltip Inside IFrame
-
-

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.

-

-

Note: In order for this to work, the iframe must have a "name" attribute specified.

-
-
«Example 10
Example 12»
- - 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 @@ - - - - - - - - -
Child Frame
-
-

Would you like to know more about me? Fly over me to see

-

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.

-
- - 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 @@ - - - - [DOM Tooltip] Example 12: Dynamic Tooltips - - - - - - -
Example 12: Dynamic Tooltips
-
-

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.

-

- Check the content - | - Another dynamic tip - | - What time is it? -

-

toggle content 1 | toggle content 2 | toggle content 3

-

* 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).

-

* 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.

-
-
«Example 11
Example 13»
- - 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 @@ - - - - [DOM Tooltip] Example 13: Nested Tooltips - - - - - - -
Example 13: Nested Tooltips
-
-

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.

-

- Nested within! -

-

* Obviously, you have to do some thinking about tooltip behavior to be able to navigate to the nested tooltip target.

-
-
«Example 12
Example 14»
- - - 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 @@ - - - - [DOM Tooltip] Example 14: Positioning - - - - - - -
Example 14: Positioning
-
-

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 domLib_getOffsets() function. It appears to be more work, but in the end, the second method offers the most flexibility.

-

- - - - - -
-

-

* While setting up this example I realized that domTT could use more flexibility in this area.

-

** 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.

-
-
«Example 13
Index»
- - - - - - - - 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 @@ - - - - [DOM Tooltip] Example 2: Basic Features - - - - - - - -
Example 2: Basic Features
-
-

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'.

-

- Status text - | - Trailing tooltip - | - Northeast tooltip -

-

* In order to get the status bar text to override the browser default when using domTT_activate() on a link tag, you must wrap the event call in return makeTrue() so that it intercepts this default from occuring (the default is to show the href value of the link). This is not necessary for any other tag, such as a span or div tag. Setting the status bar text has problems in some browsers.

-

** 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.

-

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.

-
-
«Example 1
Example 3»
- - 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 @@ - - - - [DOM Tooltip] Example 3: Styled Tooltips - - - - - - -
Example 3: Styled Tooltips
-
-

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 overlib 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 nicetitles style, using a calculated position and XHTML in the content rather than just plain text.*

-

- overlib style - | - overlib style with caption - | - nicetitles style -

-

* 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.

-
-
«Example 2
Example 4»
- - 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 @@ - - - - [DOM Tooltip] Example 4: Behavior Options - - - - - - - -
Example 4: Behavior Options
-
-

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 (notice, not a link) uses a custom link inside the contents using the domTT_close() method. The final link uses the 'velcro' setting, which causes the tip to disappear only when the mouse moves out of the tip itself.

-

- Click to stick - | - Custom close link - | - Velcro tooltip - | - Name: -

-

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.

-

The example on the right demonstrates the use of tooltips on form fields. The onclick event makes a call to domTT_deactivate(this.id), which deactivates the tooltip. The id is always available on an element following domTT_active(). (Please note, disabed form fields do not have positions in the page. It is necessary to emulate a disabled field using the blur function.)

-
-
«Example 3
Example 5»
- - 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 @@ - - - - [DOM Tooltip] Example 5: Advanced Features - - - - - - - -
Example 5: Advanced Features
-
-

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.

-

- Snap to grid - | - Tooltip fading in - | - Lazy trailing - | - One tooltip only -

-

Notice that the second link changes color when the mouse passes over it. This demonstrates that other mouseover events can coexist with the activation of the tooltip.

-

* The alpha fading does not work in all browsers.

-

* The link directly below the "Tooltip fading in" target demonstrates that links previously covered by a tooltip are still active when the tooltip disappears.

-

Help! Anyone know why I cannot get lazy trailing to work for Opera?

-
-
«Example 4
Example 6»
-
- - 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 @@ - - - - [DOM Tooltip] Example 6: XHTML Content - - - - - - - -
Example 6: XHTML Content
-
-

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 iframe! 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!*

-

- Take a look! - | - Take another look! - | - Inline window (local) - | - Inline window (external) -

-

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.

-

Note: Notice how the webpage in the iframe 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.

-

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()'.

-
-
«Example 5
Example 7»
- - - 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 @@ - - - - [DOM Tooltip] Example 7: Object Detection - - - - - - -
Example 7: Object Detection
-
-

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.

-

Note: The collection of elements to hide is cached in a variable domLib_collisionElements on the first tooltip activation. It is possible to flush the cache and force a new search by setting the global variable domLib_collisionsCached to false.

-

- Hunt and destroy -

-

- - -

-

* This problem is very browser specific. In IE, select 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.

-
-
«Example 6
Example 8»
- - 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 @@ - - - - [DOM Tooltip] Example 8: Custom Context Menu - - - - - - -
Example 8: Custom Context Menu
-
-

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).

-

To try out the velcro tooltip for this menu, reload 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.

-
-
«Example 7
Example 9»
- - - 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 @@ - - - - [DOM Tooltip] Example 9: Auto-Generated Tips - - - - - - - -
Example 9: Auto-generated Tips
-
-

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.

-

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.

-

- Need help? - | - Recommended reading - | - Clean up your markup -

-

* Using this feature takes away some of the functionality of the tooltip library. This problem might be addressed in future releases.

-
-
«Example 8
Example 10»
- - - 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 @@ - - - - DOM Tooltip :: Demos - - - -
-

DOM Tooltip 0.7.3

-

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.

-

Summary: 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.

-

Official Demo URL: http://www.mojavelinux.com/cooker/demos/domTT/

-

Maintainer: Dan Allen <dan dot allen at mojavelinux dot com>

-

Homepage: http://www.mojavelinux.com/projects/domtooltip/

-

Freshmeat Page: http://freshmeat.net/projects/domtt/

-

License: Apache 2.0

-

Updated: 2005/07/16

-

Supported Browsers: Mozilla (Gecko), IE 5.5+, IE on Mac, Konqueror, Safari, Opera 7

-
-
TOC»
- - 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 @@ - - - - - - -

I am alive! Would you click to close 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.

- - diff --git a/javascript/examples/penguin.gif b/javascript/examples/penguin.gif deleted file mode 100644 index a33fa87..0000000 Binary files a/javascript/examples/penguin.gif and /dev/null differ diff --git a/javascript/examples/prairiedog.jpg b/javascript/examples/prairiedog.jpg deleted file mode 100644 index 1029b62..0000000 Binary files a/javascript/examples/prairiedog.jpg and /dev/null differ 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 @@ - - - [DOM Tooltip] Table of Contents - - - -
Table of Contents
-
-
    -
  1. Example 1: Native Tooltip
  2. -
      -
    1. Browser tooltip using title attribute
    2. -
    3. Basic mouseover tooltip using domTT
    4. -
    -
  3. Example 2: Basic Features
  4. -
      -
    1. Status text
    2. -
    3. Trailing the mouse
    4. -
    5. Directionality
    6. -
    -
  5. Example 3: Styled Tooltips
  6. -
      -
    1. Overlib style
    2. -
    3. Tooltip with caption
    4. -
    5. Nicetitles style
    6. -
    -
  7. Example 4: Behavior Options
  8. -
      -
    1. Sticky tooltip
    2. -
    3. Custom close link
    4. -
    5. Velcro tooltip
    6. -
    7. Form field tooltip
    8. -
    -
  9. Example 5: Advanced Features
  10. -
      -
    1. Snap to grid
    2. -
    3. Tooltip alpha fading
    4. -
    5. Lazy (drunk) tooltip
    6. -
    -
  11. Example 6: Special Content
  12. -
      -
    1. Image in tooltip content
    2. -
    3. Inline window
    4. -
    -
  13. Example 7: Object Detection
  14. -
      -
    1. select form element detection
    2. -
    3. flash detection (not yet demonstrated)
    4. -
    -
  15. Example 8: Custom Context Menu
  16. -
      -
    1. Menu on right click
    2. -
    3. Menu on CTRL-click
    4. -
    -
  17. Example 9: Auto-Generated Tips
  18. -
      -
    1. Nicetitles example with plain text
    2. -
    3. Nicetitles example with link text
    4. -
    -
  19. Example 10: Onload PopIn
  20. -
      -
    1. Popup with embedded image on page load
    2. -
    3. Popup with custom close link on page load with delay
    4. -
    -
  21. Example 11: Tooltip In IFrame
  22. -
      -
    1. Tooltip from within a frame
    2. -
    -
  23. Example 12: Dynamic Tooltips
  24. -
      -
    1. Dynamic content on tooltip creation
    2. -
    3. Dynamic update of content on existing tooltip
    4. -
    -
  25. Example 13: Nested Tooltips
  26. -
      -
    1. Greasy tooltip from within a velcro tooltip
    2. -
    -
  27. Example 14: Positioning
  28. -
      -
    1. Custom positioning of tooltips
    2. -
    -
-
-
«Index
Example 1»
- - -- cgit v1.2.3