Silverlike » Tricks http://silverlike.net We Like Silverlight Mon, 07 Dec 2009 06:34:42 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 The fundamental of page flip technique http://silverlike.net/the-fundamental-of-page-flip-technique/ http://silverlike.net/the-fundamental-of-page-flip-technique/#comments Wed, 02 Dec 2009 05:04:56 +0000 admin http://silverlike.net/the-fundamental-of-page-flip-technique/ 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.

The fundamental of page flip technique

Silverlight Demo: Click here to view
Website: Click here
Download: Click here
]]> http://silverlike.net/the-fundamental-of-page-flip-technique/feed/ 1 Leaving some space for HTML header http://silverlike.net/leaving-some-space-for-html-header/ http://silverlike.net/leaving-some-space-for-html-header/#comments Wed, 04 Nov 2009 05:39:42 +0000 admin http://silverlike.net/leaving-some-space-for-html-header/ 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.

Leaving some space for HTML header

Leaving 60px on top of silverlight: 
<!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>
Website: Click here
]]> http://silverlike.net/leaving-some-space-for-html-header/feed/ 0