From: Enblend <enb...@li...> - 2009-12-28 02:52:55
|
details: http://enblend.hg.sourceforge.net/hgweb/enblend/enblend-web/hgrepo/e/en/enblend/enblend-web/rev/c5295520ee0c changeset: 8:c5295520ee0c user: yu...@fi... date: Sat Dec 19 22:43:04 2009 -0500 description: fix SVG background out of bounds and scrolling focus to content details: http://enblend.hg.sourceforge.net/hgweb/enblend/enblend-web/hgrepo/e/en/enblend/enblend-web/rev/f3accef9d95a changeset: 9:f3accef9d95a user: yu...@fi... date: Sun Dec 27 20:25:28 2009 -0500 description: switched from windowed div to long body layout. clean up code. diffstat: enblend.css | 364 +++++++++++++++++++++++++-------------------------- footer.php | 1 + header.php | 278 +++++++++++++++++++------------------- img/enblend_bkg.svg | 83 +++++++++++ layout.js | 108 ++++++++++----- 5 files changed, 469 insertions(+), 365 deletions(-) diffs (1134 lines): diff -r 42bccd6d3910 -r f3accef9d95a enblend.css --- a/enblend.css Fri Dec 18 16:50:30 2009 -0500 +++ b/enblend.css Sun Dec 27 20:25:28 2009 -0500 @@ -1,141 +1,140 @@ -html, body { - width: 100%; - height: 100%; -} body { - background: #004242; - color: #EFEFEE; + background: #004242; + color: #EFEFEE; } a:link { - color: #00FFAA; + color: #00FFAA; } a:visited { - color: #AAAAFF; + color: #AAAAFF; } + +/* SVG background */ +#bkgnd { + position: absolute; + top: 0%; + left: 0%; + width: 100%; +} + +#svgiframe { + border: 0; +} + +#svgbkg { + z-index: -255; + width: 100%; + height: 100%; +} + +/* non SVG background elements */ .bgi { - width: 100%; - height: 100%; - position: absolute; - top: 0px; - left: 0px; - z-index: -255; + width: 100%; + height: 100%; + position: absolute; + top: 0px; + left: 0px; + z-index: -255; } #tl { - width: 196px; - height: 196px; - position: absolute; - top: 0px; - left: 0px; - z-index: -255; + width: 196px; + height: 196px; + position: absolute; + top: 0px; + left: 0px; + z-index: -255; } #t { - width: 100px; - height: 196px; - position: absolute; - top: 0px; - left: 196px; - z-index: -255; + width: 100px; + height: 196px; + position: absolute; + top: 0px; + left: 196px; + z-index: -255; } #tr { - width: 40px; - height: 196px; - position: absolute; - top: 0px; - left: 295px; - z-index: -255; + width: 40px; + height: 196px; + position: absolute; + top: 0px; + left: 295px; + z-index: -255; } #l { - width: 196px; - height: 100px; - position: absolute; - top: 196px; - left: 0px; - z-index: -255; + width: 196px; + height: 100px; + position: absolute; + top: 196px; + left: 0px; + z-index: -255; } #c { - width: 100px; - height: 100px; - position: absolute; - top: 196px; - left: 196px; - z-index: -255; + width: 100px; + height: 100px; + position: absolute; + top: 196px; + left: 196px; + z-index: -255; } #r { - width: 40px; - height: 100px; - position: absolute; - top: 196px; - left: 295px; - z-index: -255; + width: 40px; + height: 100px; + position: absolute; + top: 196px; + left: 295px; + z-index: -255; } #bl { - width: 196px; - height: 40px; - position: absolute; - top: 295px; - left: 0px; - z-index: -255; + width: 196px; + height: 40px; + position: absolute; + top: 295px; + left: 0px; + z-index: -255; } #b { - width: 100px; - height: 40px; - position: absolute; - top: 295px; - left: 196px; - z-index: -255; + width: 100px; + height: 40px; + position: absolute; + top: 295px; + left: 196px; + z-index: -255; } #br { - width: 40px; - height: 40px; - position: absolute; - top: 295px; - left: 295px; - z-index: -255; + width: 40px; + height: 40px; + position: absolute; + top: 295px; + left: 295px; + z-index: -255; } /* header */ +#enblend, #enfuse { + border: 0; + padding: 20px; + width: 45%; +} #header { + width: 600px; + height: 20px; + position: relative; + z-index: 1; + clear: both; +} + +/* content */ +#content { width: 600px; - height: 20px; position: relative; z-index: 1; } -#header ul{ - float: left; - width: 100%; - margin: 0; - padding: 0; - _overflow: hidden !important; -} - -#header li{ - width: 45%; - float: left; - list-style: none; - margin: 0px 0; - padding-top: 20px; - padding-bottom: 10px; - overflow: hidden !important; -} - -#spacer{ - width: 600px; - height: 20px; - position: relative; - z-index: 1; -} -#content { - width: 600px; - height: 360px; - position: relative; - overflow-y: auto; - z-index: 1; -} +/* footer */ #footer { width: 600px; height: 40px; @@ -144,165 +143,154 @@ font-size: 70%; } +/* Icon ie_warning.png from http://tango.freedesktop.org/ */ #IEwarning { - z-index: 25; - display: block; - background: #ffd url(img/ie_warning.png) no-repeat; - padding: 5px; - padding-left: 23px; - border-top: 1px solid #CCCC00; - border-bottom: 1px solid #CCCC00; - border-left: none; - border-right: none; - font-family: Arial, Helvetica, sans-serif; - font-size: 12px; - color: #000000; - text-align: left; - position: fixed; - width: 100%; - top: 0px; - left: 0px; -} - -.svgiframe { - border: 0; -} - -#svgbkg { - z-index: -255; - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; + z-index: 25; + display: block; + background: #ffd url(img/ie_warning.png) no-repeat; + padding: 5px; + padding-left: 23px; + border-top: 1px solid #CCCC00; + border-bottom: 1px solid #CCCC00; + border-left: none; + border-right: none; + font-family: Arial, Helvetica, sans-serif; + font-size: 12px; + color: #000000; + text-align: left; + position: fixed; + width: 100%; + top: 0px; + left: 0px; } .illustration { - text-align: center; - float: right; - clear: both; + text-align: center; + float: right; + clear: both; + border: 1px solid #EFEFEE; } .image { - float: left; - margin: 5px; - text-align: center; + float: left; + margin: 5px; + text-align: center; } p { - line-height: 150%; + line-height: 150%; } #content p, h1, h2, h3 { - text-align: left; + text-align: left; } .author { - line-height: 100%; - font-size: 12px; - position: relative; - top: -20px; + line-height: 100%; + font-size: 12px; + position: relative; + top: -20px; } .image p { - font-family: Arial, Helvetica, sans-serif; - font-size: 10px; - text-align: center !important; + font-family: Arial, Helvetica, sans-serif; + font-size: 10px; + text-align: center !important; } #footer { - color: #000; + color: #000; } #footer img { - position: relative; - top: 3px; + position: relative; + top: 3px; } /* menu */ #menu { - width: 100%; - position: relative; - overflow-y: auto; - z-index: 1; - text-align: left; + width: 100%; + position: relative; + overflow-y: auto; + z-index: 1; + text-align: left; } #menu a { - font-size: 110%; - font-weight: bold; + font-size: 110%; + font-weight: bold; } #menu ul{ - float: left; - width: 100%; - margin: 0; - padding: 0; - overflow: hidden !important; + float: left; + width: 100%; + margin: 0; + padding: 0; + overflow: hidden !important; } /* adjust the width later 9.97% = 7+lang at current page width*/ #menu li{ - width: 29%; - height: 22px; - float: left; - list-style: none; - padding: 3px; - margin: 0px 0; - padding-top: 10px; - padding-bottom: 1px; - padding-right: 20px; - overflow: hidden !important; + width: 29%; + height: 22px; + float: left; + list-style: none; + padding: 3px; + margin: 0px 0; + padding-top: 10px; + padding-bottom: 1px; + padding-right: 20px; + overflow: hidden !important; } /* FAQ */ .question { - font-weight: bold; - font-size: 140%; + font-weight: bold; + font-size: 140%; } .answer { - margin-left: 40px; + margin-left: 40px; } /* news element */ .news { - margin: 20px; + margin: 20px; } .newsdate { - float: left; - width: 170px; - line-height: 150%; + float: left; + width: 170px; + line-height: 150%; } .newstext { - margin-left: 180px; - line-height: 150%; + margin-left: 180px; + line-height: 150%; } /* news on index.htm */ #frontnews { - width: 80%; - margin: 10%; - padding: 2%; - border: 1px solid #F00; - background-color: #F70; + width: 80%; + margin: 10%; + padding: 2%; + border: 1px solid #F00; + background-color: #F70; } #frontnews a:visited { - color: #0FF; + color: #0FF; } #frontnews a:link { - color: #00F; + color: #00F; } #frontnews p { - font-weight: bold; + font-weight: bold; } #frontnews p, #frontnews h1, #frontnews h2 { - color: #FF0; + color: #FF0; } diff -r 42bccd6d3910 -r f3accef9d95a footer.php --- a/footer.php Fri Dec 18 16:50:30 2009 -0500 +++ b/footer.php Sun Dec 27 20:25:28 2009 -0500 @@ -16,3 +16,4 @@ } catch(err) {}</script> </body> </html> + diff -r 42bccd6d3910 -r f3accef9d95a header.php --- a/header.php Fri Dec 18 16:50:30 2009 -0500 +++ b/header.php Sun Dec 27 20:25:28 2009 -0500 @@ -1,47 +1,47 @@ -<?php -/* -** (C) 2009-2010 Yuval Levy http://www.photopla.net -** licensed under the GPL -** -** please read README.txt before editing -*/ - -$page['/banding.htm']=array( - title_en => 'Banding Artifacts', - sub_menu => 'enblend_articles' -); -$page['/details.htm']=array( - title_en => 'How Enblend 2.x Works', - sub_menu => 'enblend_articles' -); -$page['/faq.htm']=array( - title_en => 'F.A.Q.' -); -$page['/gigapixel.htm']=array( - title_en => 'Gigapixel Image Test', - sub_menu => 'enblend_articles' -); -$page['/enfuse_details.htm']=array( - title_en => 'Enfuse Algorithm', - sub_menu => 'enfuse_articles' -); -$page['/index.htm']=array( - title_en => 'Enblend/Enfuse - combine images with no seams' -); -$page['/older_news.htm']=array( - title_en => 'Older News', -); -$page['/authors.htm']=array( - title_en => 'Authors' -); -$page['/support.htm']=array( - title_en => 'Support' -); -// this page for users without javascript -$page['/articles.htm']=array( - title_en => 'Articles' -); - +<?php +/* +** (C) 2009-2010 Yuval Levy http://www.photopla.net +** licensed under the GPL +** +** please read README.txt before editing +*/ + +$page['/banding.htm']=array( + title_en => 'Banding Artifacts', + sub_menu => 'enblend_articles' +); +$page['/details.htm']=array( + title_en => 'How Enblend 2.x Works', + sub_menu => 'enblend_articles' +); +$page['/faq.htm']=array( + title_en => 'F.A.Q.' +); +$page['/gigapixel.htm']=array( + title_en => 'Gigapixel Image Test', + sub_menu => 'enblend_articles' +); +$page['/enfuse_details.htm']=array( + title_en => 'Enfuse Algorithm', + sub_menu => 'enfuse_articles' +); +$page['/index.htm']=array( + title_en => 'Enblend/Enfuse - combine images with no seams' +); +$page['/older_news.htm']=array( + title_en => 'Older News', +); +$page['/authors.htm']=array( + title_en => 'Authors' +); +$page['/support.htm']=array( + title_en => 'Support' +); +// this page for users without javascript +$page['/articles.htm']=array( + title_en => 'Articles' +); + $current_page = $page[strrchr($_SERVER['SCRIPT_NAME'],'/')]; // automatically define relative path back to DocumentRoot @@ -56,145 +56,145 @@ // generate path $k=''; for ($b=1; $b<$a; $b++) {$k .= '../';} -define('PATH_TO_ROOT',$k); - -// compose menus -while (list($k,$v)=each($page)){ - switch($v['sub_menu']){ - case 'enblend_articles': - $articles[$k]='Enblend: '.$v['title_en']; - break; - case 'enfuse_articles': - $articles[$k]='Enfuse: '.$v['title_en']; - break; - default: - // not in any submenus - } -} - +define('PATH_TO_ROOT',$k); + +// compose menus +while (list($k,$v)=each($page)){ + switch($v['sub_menu']){ + case 'enblend_articles': + $articles[$k]='Enblend: '.$v['title_en']; + break; + case 'enfuse_articles': + $articles[$k]='Enfuse: '.$v['title_en']; + break; + default: + // not in any submenus + } +} + // add folders and PDF to enblend manuals $base_dir=PATH_TO_ROOT.'enblend.doc/'; -$web_dir=' '.PATH_TO_ROOT.'enblend.doc/'; +$web_dir=' '.PATH_TO_ROOT.'enblend.doc/'; if ($h = opendir($base_dir)) { - while (false !== ($f = readdir($h))) { - if ($f=='.'){continue;} - if ($f=='..'){continue;} + while (false !== ($f = readdir($h))) { + if ($f=='.'){continue;} + if ($f=='..'){continue;} if (is_dir($base_dir.$f)){ if(is_file($base_dir.$f.'/index.xhtml')){ // extract the version number from the folder name $v= preg_match ( '/(^.+_)(.+)(\.xhtml)$/',$f,$m); - $manuals[$web_dir.$f.'/index.xhtml']='Enblend '.$m[2]; + $manuals[$web_dir.$f.'/index.xhtml']='Enblend '.$m[2]; } if(is_file($base_dir.$f.'/index.html')){ // extract the version number from the folder name $v= preg_match ( '/(^.+_)(.+)(\.xhtml)$/',$f,$m); $manuals[$web_dir.$f.'/index.html']='Enblend '.$m[2]; - } + } } if (is_file($base_dir.$f)){ // make sure it's a PDF and extract the version number $v= preg_match ( '/(^.+_)(.+)(\.pdf)$/',$f,$m); if($m[3]=='.pdf'){ $manuals[$web_dir.$f]='Enblend '.$m[2].'-PDF'; - } + } } } - closedir($h); -} + closedir($h); +} // add folders and PDF to enfuse manuals $base_dir=PATH_TO_ROOT.'enfuse.doc/'; -$web_dir=' '.PATH_TO_ROOT.'enfuse.doc/'; +$web_dir=' '.PATH_TO_ROOT.'enfuse.doc/'; if ($h = opendir($base_dir)) { - while (false !== ($f = readdir($h))) { - if ($f=='.'){continue;} - if ($f=='..'){continue;} + while (false !== ($f = readdir($h))) { + if ($f=='.'){continue;} + if ($f=='..'){continue;} if (is_dir($base_dir.$f)){ if(is_file($base_dir.$f.'/index.xhtml')){ // extract the version number from the folder name $v= preg_match ( '/(^.+_)(.+)(\.xhtml)$/',$f,$m); $manuals[$web_dir.$f.'/index.xhtml']='Enfuse '.$m[2]; - } + } if(is_file($base_dir.$f.'/index.html')){ // extract the version number from the folder name $v= preg_match ( '/(^.+_)(.+)(\.xhtml)$/',$f,$m); - $manuals[$web_dir.$f.'/index.html']='Enfuse '.$m[2]; - } + $manuals[$web_dir.$f.'/index.html']='Enfuse '.$m[2]; + } } if (is_file($base_dir.$f)){ // make sure it's a PDF and extract the version number $v= preg_match ( '/(^.+_)(.+)(\.pdf)$/',$f,$m); if($m[3]=='.pdf'){ $manuals[$web_dir.$f]='Enfuse '.$m[2].'-PDF'; - } - } + } + } } - closedir($h); + closedir($h); } - -// function to make the menu either a link or a drop down -function make_menu($m){ - if (count($m)==1){ - list($k,$v)=each($m); - // temporary: remove slash - $k=substr($k,1); - $r = '<a href="'.$k.'">'.$v.'</a>'; - } else { - while (list($k,$v)=each($m)){ - // temporary: remove slash - $k=substr($k,1); - $r.='<option value="'.$k.'">'.$v.'</option>'; - } - } - return $r; -} -// build the menus -$manuals_menu=make_menu($manuals); -if(count($manuals)>1){ - $manuals_menu='<form name="j1"><select name="e" onchange="manual()"><option value="0">Manuals</option>'.$manuals_menu.'</select></form>'; -} -$articles_menu=make_menu($articles); -if(count($articles)>1){ - $articles_menu='<form name="j2"><select name="e" onchange="article()"><option value="0">Articles</option>'.$articles_menu.'</select></form>'; -} +// function to make the menu either a link or a drop down +function make_menu($m){ + if (count($m)==1){ + list($k,$v)=each($m); + // temporary: remove slash + $k=substr($k,1); + $r = '<a href="'.$k.'">'.$v.'</a>'; + } else { + while (list($k,$v)=each($m)){ + // temporary: remove slash + $k=substr($k,1); + $r.='<option value="'.$k.'">'.$v.'</option>'; + } + } + return $r; +} -// prepare menus for transfer to JavaScript -$menuscript='manuals=\''.$manuals_menu.'\';'."\n"; -$menuscript.='articles=\''.$articles_menu.'\';'."\n"; - -?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <title><?php echo $current_page['title_en']; ?></title> - <link rel="stylesheet" type="text/css" href="<?php echo PATH_TO_ROOT;?>enblend.css" /> +// build the menus +$manuals_menu=make_menu($manuals); +if(count($manuals)>1){ + $manuals_menu='<form name="j1"><select name="e" onchange="manual()"><option value="0">Manuals</option>'.$manuals_menu.'</select></form>'; +} +$articles_menu=make_menu($articles); +if(count($articles)>1){ + $articles_menu='<form name="j2"><select name="e" onchange="article()"><option value="0">Articles</option>'.$articles_menu.'</select></form>'; +} + +// prepare menus for transfer to JavaScript +$menuscript='manuals=\''.$manuals_menu.'\';'."\n"; +$menuscript.='articles=\''.$articles_menu.'\';'."\n"; + +?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title><?php echo $current_page['title_en']; ?></title> + <link rel="stylesheet" type="text/css" href="<?php echo PATH_TO_ROOT;?>enblend.css" /> <script type="text/javascript"> path_to_root="<?php echo PATH_TO_ROOT;?>"; <?php echo $menuscript;?> - </script> - <script type="text/javascript" src="<?php echo PATH_TO_ROOT;?>layout.js"></script> -</head> + </script> + <script type="text/javascript" src="<?php echo PATH_TO_ROOT;?>layout.js"></script> +</head> <body bgcolor="#004242" onLoad="Init();"> -<div id="background"></div> -<div id="IEwarning" style="position: fixed; width: 100%; top: 0px; left: 0px;">You're seeing a degraded version of this site because the site's layout requires JavaScript. Please activate JavaScript and reload this page.</div> -<div id="header"> -<ul> -<li><img id="enblend" src="<?php echo PATH_TO_ROOT;?>images/enblend.png" align="middle" border="0"></li> -<li><img id="enfuse" src="<?php echo PATH_TO_ROOT;?>images/enfuse.png" align="middle" border="0"></li> -</ul> -</div> -<div id="menu"> -<ul> -<li><a href="<?php echo PATH_TO_ROOT;?>index.htm">Home</a></li> -<li><a href="http://sourceforge.net/projects/enblend/files/latest">Download</a></li> -<li><a href="<?php echo PATH_TO_ROOT;?>faq.htm">F.A.Q.</a></li> -<li><a href="<?php echo PATH_TO_ROOT;?>support.htm">Support</a></li> -<li id="manuals"><a href="<?php echo PATH_TO_ROOT;?>enblend.doc/3.2/index.html">Enblend Manual</a><br/><a href="<?php echo PATH_TO_ROOT;?>enfuse.doc/3,2/index.html">Enfuse Manual</a></li> -<li id="articles"><a href="articles.htm">Articles</a></li> -</ul> -</div> -<div id="spacer"> -</div> +<div id="bkgnd"></div> +<div id="IEwarning" style="position: fixed; width: 100%; top: 0px; left: 0px;">You're seeing a degraded version of this site because the site's layout requires JavaScript. Please activate JavaScript and reload this page.</div> +<div id="header"> +<img id="enblend" src="<?php echo PATH_TO_ROOT;?>images/enblend.png"> +<img id="enfuse" src="<?php echo PATH_TO_ROOT;?>images/enfuse.png"> +</div> +<div id="menu"> +<ul> +<li><a href="<?php echo PATH_TO_ROOT;?>index.htm">Home</a></li> +<li><a href="http://sourceforge.net/projects/enblend/files/latest">Download</a></li> +<li><a href="<?php echo PATH_TO_ROOT;?>faq.htm">F.A.Q.</a></li> +<li><a href="<?php echo PATH_TO_ROOT;?>support.htm">Support</a></li> +<li id="manuals"><a href="<?php echo PATH_TO_ROOT;?>enblend.doc/3.2/index.html">Enblend Manual</a><br/><a href="<?php echo PATH_TO_ROOT;?>enfuse.doc/3,2/index.html">Enfuse Manual</a></li> +<li id="articles"><a href="articles.htm">Articles</a></li> +</ul> +</div> +<!-- +<div id="spacer"> +</div> +--> <div id="content"> diff -r 42bccd6d3910 -r f3accef9d95a img/enblend_bkg.svg --- a/img/enblend_bkg.svg Fri Dec 18 16:50:30 2009 -0500 +++ b/img/enblend_bkg.svg Sun Dec 27 20:25:28 2009 -0500 @@ -224,6 +224,89 @@ function ReSize() { var myWidth = 0, myHeight = 0; + if (top && top.document) { + myWidth = top.document.getElementsByTagName("body").item(0).offsetWidth; + myHeight = top.document.getElementsByTagName("body").item(0).offsetHeight; + } else { + alert("does not work"); + } + +/* + if( typeof( window.innerWidth ) == 'number' ) { + //Non-IE + myWidth = window.innerWidth; + myHeight = window.innerHeight; + } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { + //IE 6+ in 'standards compliant mode' + myWidth = document.documentElement.clientWidth; + myHeight = document.documentElement.clientHeight; + } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { + //IE 4 compatible + myWidth = document.body.clientWidth; + myHeight = document.body.clientHeight; + } +*/ + + var extra_width=0; + var extra_height=0; + var factor=0; + var f_w=1.5; + var f_h=1.5; + // determine which side is limiting for the form factor + myFF = myWidth/myHeight; + if(myFF >= bkg_ff){ + // it's broader than higher + factor = myHeight/bkg_height; + // calculate the extra translation + extra_width=myWidth/factor-(left_length+right_length); + f_w=extra_width/mid_width; + }else{ + factor = myWidth/bkg_width; + extra_height=myHeight/factor-(top_length+bottom_length); + f_h=extra_height/mid_height; + } + +//alert(f_w+"x"+f_h); +// -910 is the basic Y transform because the document was drawn like that with Inkscape. + +// the corners don't stretch, but they move +top_left_block.setAttribute("transform", "scale("+factor+") translate(0,-910)"); +top_right_block.setAttribute("transform", "scale ("+factor+") translate("+extra_width+",-910)"); +bottom_left_block.setAttribute("transform", "scale("+factor+") translate(0,"+(-910+extra_height)+")"); +bottom_right_block.setAttribute("transform", "scale("+factor+") translate("+extra_width+","+(-910+extra_height)+")"); + +// stretch horizontally +//top_block.setAttribute("transform", "scale("+factor+") translate(0,-910)"); +//bottom_block.setAttribute("transform", "scale("+f_w+","+f_h+") translate(0,-910)"); + +// stretch vertically +//left_block.setAttribute("transform", "scale("+f_w+","+f_h+") translate(0,-910)"); +//right_block.setAttribute("transform", "scale("+f_w+","+f_h+") translate(0,-910)"); + +// stretch both ways +//center_block.setAttribute("transform", "scale("+factor+") translate(0,-910)"); +//center_block.setAttribute("width", mid_width*f_w); +//center_block.setAttribute("height", mid_height*f_h); + +// blue top middle +t1.setAttribute("width",extra_width+7); +// green top middle +t2.setAttribute("width",extra_width+7); +// white line top middle +t3.setAttribute("width",extra_width+9); +// center +t4.setAttribute("width",extra_width+7); +t4.setAttribute("height",extra_height+7); +// green bottom middle +t5.setAttribute("width",extra_width+7); +// green gradient left +t6.setAttribute("height",extra_height+7); +// greem gradient right +t7.setAttribute("height",extra_height+7); +} + +function OldReSize() { + var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; diff -r 42bccd6d3910 -r f3accef9d95a layout.js --- a/layout.js Fri Dec 18 16:50:30 2009 -0500 +++ b/layout.js Sun Dec 27 20:25:28 2009 -0500 @@ -27,6 +27,7 @@ */ var svg = 0; var bkg = ''; +var first_run = 0; if(document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")){ // bring in SVG background and remove cluttered background @@ -37,6 +38,7 @@ // svg = 0; if(svg == 0){ + // legacy background bkg ='<div id="tl">\ <img id="itl" class="bgi" src="'+path_to_root+'img/tl.png" alt="" />\ </div>\ @@ -64,8 +66,6 @@ <div id="br">\ <img id="itl" class="bgi" src="'+path_to_root+'img/br.png" alt="" />\ </div>'; - - // background if not SVG var tl; var t; var tr; @@ -77,14 +77,17 @@ var br; }else{ + // SVG background bkg= '<div id="svgbkg">\ - <iframe class="svgiframe" src="'+path_to_root+'img/enblend_bkg.svg" width="100%" height="100%">\ + <iframe id="svgiframe" src="'+path_to_root+'img/enblend_bkg.svg">\ </iframe></div>'; + var bkgnd; + var svgbkg; + var svgiframe; } // layout var header; -var spacer; var menu; var content; var footer; @@ -97,7 +100,9 @@ function Init() { // background - document.getElementById("background").innerHTML=bkg; + bkgnd = document.getElementById("bkgnd"); + bkgnd.innerHTML=bkg; + // menu document.getElementById("manuals").innerHTML=manuals; document.getElementById("articles").innerHTML=articles; @@ -109,6 +114,8 @@ var e=document.getElementById("IEwarning"); if(svg==1){ e.parentNode.removeChild(e); + svgbkg = document.getElementById("svgbkg"); + svgiframe = document.getElementById("svgiframe"); }else{ // replace it with SVG warning for legacy browsers that do not support SVG e.innerHTML='Your browser does not support the SVG standard. To fully enjoy this website, please upgrade to a standard compliant browser like the latest <a style="color: #336699;" href="http://www.mozilla.com/firefox/" target="_blank">Firefox</a>, <a style="color: #336699;" href="http://www.google.com/chrome/" target="_blank">Google Chrome</a>, <a style="color: #336699;" href="http://www.opera.com/browser/" target="_blank">Opera</a>, or <a style="color: #336699;" href="http://www.apple.com/safari/download/" target="_blank">Safari</a>.'; @@ -126,37 +133,59 @@ // layout header=document.getElementById("header"); - spacer=document.getElementById("spacer"); menu=document.getElementById("menu"); content=document.getElementById("content"); footer=document.getElementById("footer"); - // broken in IE8 under some circumstances + // broken in IE8 under some circumstances ? window.onresize = ReSize; ReSize(); } function ReSize() { - var myWidth = 0 - var myHeight = 0; + // screen size + var screenWidth = 0 + var screenHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE - myWidth = window.innerWidth; - myHeight = window.innerHeight; + screenWidth = window.innerWidth; + screenHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' - myWidth = document.documentElement.clientWidth; - myHeight = document.documentElement.clientHeight; + screenWidth = document.documentElement.clientWidth; + screenHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible - myWidth = document.body.clientWidth; - myHeight = document.body.clientHeight; + screenWidth = document.body.clientWidth; + screenHeight = document.body.clientHeight; } - - // minimums + + // content size + var myWidth = 0; + var myHeight = 0; + if (top && top.document) { + myWidth = top.document.getElementsByTagName("body").item(0).offsetWidth; + myHeight = top.document.getElementsByTagName("body").item(0).offsetHeight; + } + + // minimum height is given from the screen height + myHeight = Math.max(myHeight, screenHeight); + + // absolute minimums in case something is very wrong if (myWidth<320){myWidth=320;} if (myHeight<320){myHeight=320;} + // background + bkgnd.style.width=myWidth+"px"; + bkgnd.style.height=myHeight+"px"; + if(svg==1){ + svgbkg.style.width=myWidth+"px"; + svgbkg.style.height=myHeight+"px"; + svgiframe.style.width=myWidth+"px"; + svgiframe.style.height=myHeight+"px"; + } + + // offset from the top/left var offset = 10; var scale; @@ -194,28 +223,25 @@ document.getElementById("enfuse").style.width=fw+"px"; document.getElementById("enfuse").style.height=fh+"px"; -// TODO: radius is the wrong reference element because it changes with size! // rearrange layout - var radius = Math.ceil(100*scale); - var content_w = Math.max(300,myWidth-2*radius); - var content_left = Math.max(10,radius); - var header_h = eh+10; - var spacer_h = Math.floor(radius/2); - var footer_h = Math.floor(radius/3); - var content_h = Math.max (20,(myHeight-header_h-spacer_h-footer_h-2*radius-60)); + var content_w = Math.max(300,myWidth-2*lower); + var content_left = Math.max(10,offset+1*lower); + var header_h = Math.floor((enb_h+100)*scale); + var menu_h = Math.floor(lower); + var footer_h = Math.floor(lower/3); + var content_h = Math.max (20,(myHeight-header_h-menu_h-footer_h-2*lower)); - // content - header.style.width=content_w+"px"; + // rearrange HTML + header.style.top=2*offset; + header.style.width=Math.ceil(content_w+lower)+"px"; header.style.height=header_h+"px"; - header.style.left=content_left+"px"; - spacer.style.width=content_w+"px"; - spacer.style.height=spacer_h+"px"; - spacer.style.left=content_left+"px"; - menu.style.width=Math.floor(content_w*.9)+"px"; + header.style.left=Math.ceil(content_left/2)+"px"; + header.style.paddingTop=offset+"px"; + menu.style.width=content_w+"px"; + menu.style.height=menu_h+"px"; menu.style.left=content_left+"px"; - content.style.width=Math.floor(content_w*.9)+"px"; - content.style.height=content_h+"px"; - content.style.left=2*content_left+"px"; + content.style.width=content_w+"px"; + content.style.left=Math.floor(1.4*content_left)+"px"; footer.style.width=content_w+"px"; footer.style.height=footer_h+"px"; footer.style.left=content_left+"px"; @@ -251,16 +277,22 @@ bl.style.width=upper+"px"; bl.style.height=lower+"px"; bl.style.left=offset+"px"; - bl.style.top=(upper+center_h-offset)+"px"; + bl.style.top=(offset+upper+center_h-2)+"px"; b.style.width=center_w+"px"; b.style.height=lower+"px"; - b.style.top=(upper+center_h-offset)+"px"; + b.style.top=(offset+upper+center_h-2)+"px"; b.style.left=(offset+upper)+"px"; br.style.width=lower+"px"; br.style.height=lower+"px"; - br.style.top=(upper+center_h-offset)+"px"; + br.style.top=(offset+upper+center_h-2)+"px"; br.style.left=(upper+center_w-offset)+"px"; } + + // on first run re-execute to fine tune to changed element sizes + if(first_run==0){ + first_run=1; + ReSize(); + } } // menu jumpers |