Page flip is a very impressive features in displaying your documents, images, media, etc.. The technique behind page flip is pretty complicated. However, Rick Barraza has a very good articles describing all the mystery behind this technique.
Silverlight works well by getting all the space of your browser. However, sometimes, you may want to leave some space (let say 60px) for your header in HTML format.
Here is any solution using JavaScript to allocate space for the Silverlight dynamically.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body { height: 100%; overflow: auto; }
body { padding: 0; margin: 0; overflow:hidden; }
#header{ height: 60px; }
#silverlightControlHost { height: 100%; text-align:center; }
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
var headerHeight = 60;
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}else{
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function updateSilverlightSize(){
var windowHeight = getWindowHeight();
document.getElementById('form1').style.height = (windowHeight - headerHeight) + "px";
document.getElementById('silverlightControlHost').style.height = (windowHeight - headerHeight) + "px";
}
</script>
</head>
<body onload="updateSilverlightSize();" onResize="updateSilverlightSize();">
<div id="header">You header</div>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="silverlight.xap"/>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
</form>
</body>
</html>
