Full version: jsB@nk » Pointer » Bar Graph
URL: https://www.javascriptbank.com/bar-graph-index.html
Horizontal or vertical bars to navigate poniter.
Full version: jsB@nk » Pointer » Bar Graph
URL: https://www.javascriptbank.com/bar-graph-index.html
<style type="text/css">.hBarC { /* horizontal bar container */ position:absolute; overflow:hidden; border:1px solid #333; background:#ccc;}.hBar { /* horizontal bar */ position:absolute; overflow:hidden; margin:0; padding:0; background:#900;}.vBarC { /* vertical bar container */ position:absolute; overflow:hidden; margin:0; padding:0; border:1px solid #333; background:#ccc;}.vBar { /* vertical bar */ position:absolute; overflow:hidden; margin:0; padding:0; background:#009;}.marker { position:relative; visibility:hidden;}#content1 { position:absolute; overflow:hidden; margin:0; padding:8px; color:#369; background:#fff;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script src="x_core.js"></script><script src="x_event.js"></script><script src="x_bar.js"></script><script type="text/javascript">//// Applicationvar bars = new Array();window.onload = function(){ if (xNN4 || xIE4 || !document.createElement) return; bars[0] = new xBar('ltr', 'hBarC', 'hBar'); bars[1] = new xBar('ttb', 'vBarC', 'vBar'); bars[2] = new xBar('rtl', 'hBarC', 'hBar'); bars[3] = new xBar('btt', 'vBarC', 'vBar'); winOnResize(); // initial setup xAddEventListener(document, 'mousemove', docOnMouseMove, false); xAddEventListener(window, 'resize', winOnResize, false);}function docOnMouseMove(evt){ var e = new xEvent(evt); bars[0].update(e.pageX); bars[1].update(e.pageY); bars[2].update(e.pageX); bars[3].update(e.pageY);}function winOnResize(){ var l = 200, s = 20; var cw = xClientWidth(); var ch = xClientHeight(); var x = cw - l - s - 20; var y = xPageY('m1'); bars[0].paint(x, y, l, s); bars[1].paint(x+l, y, s, l); bars[2].paint(x+s, y+l, l, s); bars[3].paint(x, y+s, s, l); bars[0].reset(xClientWidth(), 0); bars[1].reset(xClientHeight(), 0); bars[2].reset(xClientWidth(), 0); bars[3].reset(xClientHeight(), 0); xResizeTo('content1', l-s, l-s); xMoveTo('content1', x+s, y+s);/* debug var ele = xGetElementById('content1'); var s = 'content1:\n' + xWidth(ele) + ', ' + xHeight(ele) + '\n' + ele.offsetWidth + ', ' + ele.offsetHeight; ele = xGetElementById(bars[0].con); s += '\n\nbars[0]:\n' + xWidth(ele) + ', ' + xHeight(ele) + '\n' + ele.offsetWidth + ', ' + ele.offsetHeight; alert(s);*/}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div class="hBarC" style="width: 198px; height: 18px; left: 769px; top: 38px;" title="614"><div class="hBar" style="width: 200px; height: 20px; top: 0px; left: -78px;" title="614"></div></div><div class="vBarC" style="width: 18px; height: 198px; left: 969px; top: 38px;" title="232"><div class="vBar" style="width: 20px; height: 200px; left: 0px; top: -119px;" title="232"></div></div><div class="hBarC" style="width: 198px; height: 18px; left: 789px; top: 238px;" title="614"><div class="hBar" style="width: 200px; height: 20px; top: 0px; left: 78px;" title="614"></div></div><div class="vBarC" style="width: 18px; height: 198px; left: 769px; top: 58px;" title="232"><div class="vBar" style="width: 20px; height: 200px; left: 0px; top: 117px;" title="232"></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/mouse/Bar_Graph/x_bar.jshttp://javascriptbank.com/javascript/mouse/Bar_Graph/x_core.jshttp://javascriptbank.com/javascript/mouse/Bar_Graph/x_event.js