Mercurial > hg > Members > nobuyasu > html > graphViewer
changeset 29:38990a120dd6 draft
modified css and index.html
author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Sat, 23 Mar 2013 03:52:34 +0900 |
parents | 4b6d41c8b0cd |
children | ccfa3b5c943b |
files | css/viewer_form.css index.html |
diffstat | 2 files changed, 55 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/css/viewer_form.css Sat Mar 23 00:22:50 2013 +0900 +++ b/css/viewer_form.css Sat Mar 23 03:52:34 2013 +0900 @@ -64,6 +64,7 @@ overflow:hidden; cursor:pointer; } + div.graphNodeContent { position:absolute; z-index:21; @@ -73,12 +74,12 @@ top: 10px; overflow:hidden; } -div.edgeInfoTable { +div.menuDisplayCss { position:fixed; background:#fff; - width:230px; - height:230px; - border:solid 10px #333; + width:180px; + height:80px; + border:solid 5px #777; border-radius:5px; opacity:1; z-index:10; @@ -88,13 +89,30 @@ white-space: nowrap; */ } -div.edgeInfoTitle { +div.menu { + position:absolute; + margin-top:2px; + margin-left:2px; + width:95%; + border-radius:5px; + text-align:center; + border: groove 3px #777; } -div.edgeInfoDiv { +div.menuTitleCss { + text-align:center; + font-size:20px; + font-weight:900; +} + +div.menuBody { + width:100%; +} + +div.menuContent { position:relative; background:#ddd; - width:100%; + width:80%; border-radius:5px; margin:5px 2px; font-size:18px; @@ -102,6 +120,7 @@ overflow-x: hidden; border: solid 2px #03f; } + span.button{ background:#eee; background:-moz-linear-gradient(top,#fff,#ddf);
--- a/index.html Sat Mar 23 00:22:50 2013 +0900 +++ b/index.html Sat Mar 23 03:52:34 2013 +0900 @@ -56,6 +56,18 @@ </div> +<div id='menuDisplay' class='menuDisplayCss' style='left:0; top:20; z-index:20;'> + <div id="closeMenuDisplay" style='position:absolute; right:5px; top:-15px; z-index:10; color:white;' onclick="$('#menuDisplay').css('visibility','hidden');" onmouseover="$('#closeEdgeInfoDisplay').css('color','yellow');" onmouseout="$('#closeMenuDisplay').css('color','white')" >CLOSE</div> + <div class='menu' id='stateMenu'> + <div class='menuTitleCss' id='menuTitle'>StateSelect</div> + <div class='menuTitleBodyCss' id='menuTitleBody'></div> + </div> + <div class='menu' id='traverseMenu' style='top:38px;'> + <div class='menuTitleCss' id='menuTitle'>TraverseSelect</div> + <div class='menuTitleBodyCss' id='menuTitleBody'></div> + </div> +</div> + <script type="text/javascript"> var BASE_URL = ""; @@ -604,6 +616,23 @@ testStart(); }) +var BASE_MARGIN = parseInt($('.menu').css('margin-top').split('px')[0])*2 + + parseInt($('.menuDisplayCss').css('border-top-width').split('px')[0])*2; +function updateMenuDisplayHeight() { + function calcMenuDisplayHeight(menuD) { + var menuArray = $('.menu'); + var height = 0; + for (var i=0; i<menuArray.length; i++) { + height = height + menuArray[i].offsetHeight + } + return height; + } + var menuD = $('#menuDisplay'); + var height = calcMenuDisplayHeight(menuD) + BASE_MARGIN; + menuD.css('height', height + 'px'); +} + + edgeInfo1 = [ {