asp net mvc barcode scanner plug-In JavaScript: 100 power Solutions in Java

Printer European Article Number 13 in Java plug-In JavaScript: 100 power Solutions

color backgroundColor bordercolor borderStyle borderWidth innerHTML onmouseover onmouseout DoToolTip() ToolTipHide() FadeIn() FadeOut() Px() setTimeout() clearTimeout()

Property of the new div containing its text color Property of the new div containing its background color Property of the new div containing its border color Property of the new div containing its border style Property of the new div containing its border width Property of the new div containing its HTML Event of id attached to DoToolTip() Event of id attached to ToolTipHide() Subfunction to display a tooltip Subfunction to hide a tooltip Plug-in to fade an object in Plug-in to fade out an object Plug-in to add the suffix px to a number Function to set up an interrupt to a function at a future time Function to cancel an interrupt set by setTimeout()

This plug-in first creates a new div for each different tooltip, with an ID comprising the string TT_ and the ID name of id, and then creates a local variable to hold this ID, like this:

Next, if the div for the tooltip for id hasn t yet been created, this is done using the following code:

var newdiv = documentcreateElement('div') newdivsetAttribute('id', tt) documentbodyappendChild(newdiv)

The opacity of the new div is then set to 0 to hide it, and it is released from the HTML by giving it a style position attribute of absolute , using the global variable ABS:

Opacity(tt, 0) Position(tt, ABS)

Next, all the arguments are given default values for any that have not been given a value:

font size textc backc bordc bstyle bwidth msecs = = = = = = = = font size textc backc bordc bstyle bwidth msecs font size textc backc bordc bstyle bwidth msecs : : : : : : : : 'Arial' 'small' '#884444' '#ffff88' '#aaaaaa' 'dotted' 1 250

13:

After that, various style settings based on these values are applied to the new div, and the contents of the tip argument are placed in its innerHTML property, as follows:

S(tt)fontFamily S(tt)fontSize S(tt)padding S(tt)color S(tt)backgroundColor S(tt)borderColor S(tt)borderStyle S(tt)borderWidth Html(tt, tip) = = = = = = = = font size '3px 5px 3px 5px' textc backc bordc bstyle Px(bwidth)

Finally, in the setup section, the DoToolTip() and ToolTipHide() subfunctions are attached to the onmouseover and onmouseout events of id, and the Hidden property of id is set to false to indicate that the tooltip is not currently visible:

This function moves the tooltip div referred to by tt to a location 15 pixels to the right and 15 down from the mouse position, sets its zIndex property to the highest value used so far plus 1 (to ensure it displays above all other elements), fades the tooltip in, and sets the tooltip s Hidden attribute to false to indicate that it is now visible:

GoTo(tt, MOUSE_X + 15, MOUSE_Y + 15) O(tt)zIndex = ZINDEX + 1 FadeIn(tt, msecs) O(tt)Hidden = false

With the tooltip now displayed, if a timeout has been specified then setTimeout() is called to create an interrupt call to the ToolTipHide() subfunction in timeout milliseconds, to fade it away again (after first cancelling any timeout that may currently be in place), like this:

if (O(tt)IID) clearTimeout(O(tt)IID) O(tt)IID = setTimeout(ToolTipHide, timeout)

This function simply checks whether the tooltip is currently hidden If it is, it has nothing to do and returns; otherwise, it fades out the tooltip and sets its Hidden attribute to true to indicate the new setting:

To use this plug-in, all you need to do is pass it an object and the tip message to display, like this:

ToolTip('home', 'Visit the Home page')

You can also pass any or all of the other supported arguments to tailor the output The following example illustrates attaching a tooltip to a link using all the available options:

<h2> <a id='home' <a id='news' <a id='blog' <a id='links' </h2> href='/' >Home</a> | href='/news' >News</a> | href='/blog' >Blog</a> | href='/links'>Links</a>

<script> windowonload = function() { tip = 'Click this link to return<br />to the main home page' ToolTip('home', tip, 'Verdana', '12px', '#444444', '#eeeeff', '#008888', 'solid', '1', 500, 5000) O('links')title = tip } </script>

The HTML section sets up four links and gives them IDs Then the <script> section attaches a tooltip to the first link As you can see by the <br /> included in the string assigned to tip, HTML is supported, enabling you to configure the tooltip any way you like There is also a standard title tag attached to the final link so that you can compare the way it displays with this plug-in by passing the mouse over that link too