Full version: jsB@nk » Form » Table » Basic Show/Hide Demo
URL: https://www.javascriptbank.com/crossbrowser-basic-show-hide-demo.html
This quick little X demo illustrates hiding/showing 'panels' when some trigger element is moused over. Any elements can be used as 'triggers'.The demo trigger elements are in the right column of this page. The panels are shown in the center of the page.
Full version: jsB@nk » Form » Table » Basic Show/Hide Demo
URL: https://www.javascriptbank.com/crossbrowser-basic-show-hide-demo.html
<style type="text/css">.trigger { width:60px; height:30px; color:#000; background:#963; text-align:center; margin:8px 0; padding:2px;}.panel { position:absolute; overflow:hidden; visibility:hidden; width:300px; height:200px; margin:0; padding:20px; color:#000; background:#963; border:1px solid #000;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">window.onload = function(){ if (window.winOnLoad) window.winOnLoad();}</script><script type="text/javascript">function winOnLoad(){ setup();}function setup(){ var ele, i = 1; do { ele = xGetElementById('trigger' + i); if (ele) { ele.panelId = 'panel' + i++; ele.onmouseover = tOnMouseover; ele.onmouseout = tOnMouseout; } } while(ele);}function tOnMouseover(){ var panel = xGetElementById(this.panelId); if (panel) { var x = xScrollLeft() + (xClientWidth() - xWidth(panel)) / 2; var y = xScrollTop() + (xClientHeight() - xHeight(panel)) / 2; xMoveTo(panel, x, y); xShow(panel); }}function tOnMouseout(){ xHide(this.panelId);}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div class="collapsible"><p>Mouse over the following elements:</p><div id="trigger1" class="trigger">Panel 1</div><div id="trigger2" class="trigger">Panel 2</div><div id="trigger3" class="trigger">Panel 3</div></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/form/crossbrowser/x_core.js