上善 edwardNotes 若水: html dynamic height (ibm website)

2013年7月30日星期二

html dynamic height (ibm website)

http://pic.dhe.ibm.com/infocenter/rbdhelp/v8r5m0/index.jsp?topic=%2Fcom.ibm.egl.lr.doc%2Ftopics%2Fregl_core_str_format_number.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Highstock API Reference</title>
<link href="http://api.highcharts.com/resources/css/ref.css" rel="stylesheet"
type="text/css"/>
<link href="http://api.highcharts.com/resources/css/ref.css" rel="stylesheet"
type="text/css" />
<link
href="http://api.highcharts.com/resources/css/themes/base/jquery.ui.all.css"
rel="stylesheet" type="text/css" />
<link href="http://api.highcharts.com/resources/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<script src="http://api.highcharts.com/resources/js/jquery-1.7.1.min.js"
type="text/javascript"></script>
<script src="http://api.highcharts.com/resources/js/ui/jquery.ui.core.min.js"
type="text/javascript"></script>
<script src="http://api.highcharts.com/resources/js/ui/jquery.ui.widget.min.js"
type="text/javascript"></script>
<script
src="http://api.highcharts.com/resources/js/ui/jquery.ui.position.min.js"
type="text/javascript"></script>
<script
src="http://api.highcharts.com/resources/js/ui/jquery.ui.autocomplete.min.js"
type="text/javascript"></script>
<script type="text/javascript">
var PRODUCTNAME = 'Highstock'.toLowerCase();
var RESOURCE = "http://api.highcharts.com";

$(function() {
function updateHeight() {
var height = $(window).height() - $('#top').height();
$("#wrapper").height(height);
$("#nav-wrap").height(height);
$("#details-wrap").height(height);
};

updateHeight();

$(window).resize(updateHeight);

// Make the Highcharts/Highstock links dynamic
$('#highstock-link, #highcharts-link').click(function () {
this.href += location.hash;
});

// Login shortcut (hot corner)
$("<div>")
.css({
position: 'absolute',
display: 'block',
width: '10px',
height: '10px',
right: 0,
cursor: 'pointer'
})
.click(function () {
$.getScript('http://code.jquery.com/ui/1.8.16/jquery-ui.min.js', function () {
$('<iframe src="http://api.highcharts.com/auth/login">').dialog({
height: 300
});
});
})
.appendTo('#top');
});
</script>

<script src="http://api.highcharts.com/resources/js/ref.js"
type="text/javascript"></script>

</head>
<body>
<div id="top">

<a href="http://www.highcharts.com" title="Highcharts Home Page" id="logo"><img
alt="Highcharts Home Page"
src="http://api.highcharts.com/resources/images/Highcharts-icon-160px.png"
border="0"></a>
<h1>Highstock Options Reference</h1>

</div>
<div id="wrapper">
<div id="nav-wrap">
<div id="nav">

<div class="ui-widget" id="search-div">

<input id="search" />
</div>
<div class="nav-section">
<h3 id="options-header">Configuration options</h3>
<p class="subheader">For initial declarative chart setup. View as <a class="dump" href="http://api.highcharts.com/highstock/option/dump.json">JSON</a>, <a class="dump" href="http://api.highcharts.com/highstock/option/dump.xml">XML</a>.</p>
<div id="global-options-tree">
<code>Highcharts.setOptions({</code>
<div id="global-options" class="tree"></div>
<code>});</code>
</div>
<div id="options-tree">
<code>$("#container").highcharts("StockChart", {</code>
<div id="options" class="tree"></div>
<code>});</code>
</div>
</div>

<div class="nav-section">
<h3>Methods and properties</h3>

<p class="subheader">For dynamically modifying the chart. View as <a class="dump" href="http://api.highcharts.com/highstock/object/dump.json">JSON</a>, <a class="dump" href="http://api.highcharts.com/highstock/object/dump.xml">XML</a>. </p>
<div id="methods-and-properties-toc"></div>

<div id="objects-tree">
<div id="objects" class="tree"></div>
</div>
</div>
</div>
</div>

<div id="details-wrap">
<div id="details"></div>
</div>
</div>
</body>
</html>