diff --git a/js/family_pedigree.js b/js/family_pedigree.js index d1feffba..ebb55d65 100644 --- a/js/family_pedigree.js +++ b/js/family_pedigree.js @@ -102,7 +102,7 @@ function xmlload() { $(mdialog).dialog({ autoOpen: false, - position: ['left', 0], + position: ['top', 0], title: 'Family Pedigree Chart', minHeight:450, height:'auto', @@ -118,13 +118,15 @@ function xmlload() { //SCREENWIDTH = parseInt($(window).width())-100; + $(this).css("width", SCREENWIDTH); - //var myDialogX = $(this).position().left - $(this).outerWidth(); - //var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() ); - //$(this).dialog( 'option', 'position', [myDialogX, myDialogY] ); + var myDialogX = $(this).position().left - $(this).outerWidth(); + var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() ); + $(this).dialog( 'option', 'position', [myDialogX, myDialogY] ); //window.scrollBy(1500, 10 ); + }, close: function () { $(this).empty(); @@ -5912,6 +5914,7 @@ function xmlload() { var DIALOGWIDTH = $(mdialog).width(); var DIALOGHEIGHT = $(mdialog).height(); var DIALOGOUTERWIDTH = $(mdialog).outerWidth(); + var TABLEHEIGHT = $('health_table').height(); //alert(" ### --dialog width --> " + $(mdialog).width() //+ " ### --outer outerWidth --> " + $(mdialog).outerWidth() @@ -5967,48 +5970,72 @@ function xmlload() { var wscale,hscale; if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){ - if (DIAWIDTH > SVGW) { - wscale = parseInt(DIAWIDTH) + 0; - hscale = parseInt(SVGH); - //svgw.setAttribute('viewBox', +(parseInt(FARLEFT) - 50) + ' 0 ' + wscale + ' ' + 1200); - //document.getElementById("svgframe").getSVGDocument().getElementById("SVGTest").setAttribute( + var svgdoc = document.getElementById("svgframe"); - svgdoc.setAttribute("viewBox", +(parseInt(FARLEFT) - 50) + ' 0 ' + wscale + ' ' + 25); + var FRAMEHEIGHT = svgdoc.getAttribute("height"); + var FRAMEWIDTH = svgdoc.getAttribute("width"); + + var COMBINEDHEIGHT= parseInt(TABLEHEIGHT) + parseInt(FRAMEHEIGHT) + 300; + + + var wscale = parseInt(DIAWIDTH) + 300; + var hscale = parseInt(SVGH); + + var LARGELEFT = parseInt(FARLEFT) - 150; + + svgdoc.setAttribute("viewBox", + LARGELEFT + ' 200 ' + wscale + ' ' + 25); + svgdoc.setAttribute("height", COMBINEDHEIGHT); + svgdoc.setAttribute("margin-top", '10px'); - //document.getElementById("svgframe").getSVGDocument().setAttribute( - //"viewBox", +(parseInt(FARLEFT) - 50) + ' 0 ' + wscale + ' ' + 1200); - var lft = parseInt(absleft) / 2; - svgdoc.setAttribute('transform', 'translate('+ (parseInt(absleft)/2.2) +',10)'); } else { - wscale = parseInt(SVGW) + 0; - hscale = parseInt(hei) + 100; - var svgdoc = document.getElementById("svgframe"); + var svgdoc = document.getElementById("svgframe"); + var FRAMEHEIGHT = svgdoc.getAttribute("height"); + var FRAMEWIDTH = svgdoc.getAttribute("width"); + var COMBINEDHEIGHT= parseInt(TABLEHEIGHT) + parseInt(FRAMEHEIGHT) + 300; + var wscale = parseInt(SVGW) + 200; + var hscale = parseInt(hei) + 100; if(FARLEFT<0) { - svgdoc.setAttribute("viewBox", FARLEFT + ' 0 ' + wscale + ' ' + 25); - svgdoc.setAttribute("height", '60%'); + + var FULLSCALE = parseInt(wscale) + 300; + svgdoc.setAttribute("viewBox", FARLEFT + ' 400 ' + FULLSCALE + ' ' + 25); + svgdoc.setAttribute("height", 800); svgdoc.setAttribute("margin-top", '10px'); - absleft = parseInt(absleft) + 400; - //svgdoc.setAttribute("transform", "translate(700,10)"); - //svgdoc.transform.setAttribute('transform', 'translate('+absleft+',10 )'); } else{ - svgdoc.setAttribute("viewBox", '0 0 ' + wscale + ' ' + 25); - svgdoc.setAttribute("height", '60%'); + var FULLSCALE = parseInt(wscale) + 300; + + svgdoc.setAttribute("viewBox", '20 400 ' + FULLSCALE + ' 25'); + svgdoc.setAttribute("height", 800); svgdoc.setAttribute("margin-top", '10px'); - absleft = parseInt(absleft) + 400; + + } - //document.getElementById("svgframe").getSVGDocument().setAttribute("viewBox", '0 0 ' + wscale + ' ' + 1200); } + + $(mdialog).dialog({ + //title: titleStr, + //width: width, + modal: true + }).height("auto"); + + //$(mdialog).dialog({ + // //title: titleStr, + // //width: width, + // modal: true + //}).width("auto"); + } else { + + if (DIAWIDTH > SVGW) { wscale = parseInt(DIAWIDTH) + 200; hscale = parseInt(SVGH); diff --git a/static/css/pedigree.css b/static/css/pedigree.css index e4f73017..780099d3 100644 --- a/static/css/pedigree.css +++ b/static/css/pedigree.css @@ -248,15 +248,17 @@ i#options .ui-button.ui-state-active .ui-button-text { #family_pedigree{ border:2px black solid; - padding:0 1em; + padding-top: 10px; + vertical-align: top; overflow-x:scroll; } .family_dialog{ border: 3px solid #c7c7c7; + padding-top: 10px; padding-bottom: 0; - height: 500; + /*height: 500;*/ overflow-x:scroll; } @@ -286,6 +288,7 @@ i#options .ui-button.ui-state-active .ui-button-text { /*width: 100%;*/ padding-bottom: 1px; margin-bottom: 25px; + vertical-align: top; /*padding-left: 10%;*/ /*overflow: hidden;*/ /*left:0;*/