jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • March 13, 2013 at 12:20 pm in reply to: Navbar Splitter Footer Navbar Splitter Footer #16959

    ivor
    Member

    Thank you Dimitar. That solves the problem of displaying a navbar, splitter and footer.

    What I notice is that when I re-size the window the navbar and footer (now with height percentage) quite correctly re-size with the window.

    My question is how can I set a fixed height of the navbar and footer, leaving the 100% height of the splitter?

    Regards,

    Ivor

    March 8, 2013 at 12:22 pm in reply to: Navbar Splitter Footer Navbar Splitter Footer #16540

    ivor
    Member

    Thanks for responding so quickly. Indeed I had not checked the code formatting correctly by the upload.
    Below is the correctly displayed info:

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
        <meta name="description" content="This page demonstrates splitter's events" />
        <title id='Description'>This demonstration shows how to create a splitter that fits the entire browser window's contents.
        </title>
        <link rel="stylesheet" href="inc/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="inc/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="inc/jqxcore.js"></script>
        <script type="text/javascript" src="inc/jqxsplitter.js"></script>
       <script type="text/javascript">
           $(document).ready(function () {
               $('#splitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', max: 1000, min: 250 }, { size: '80%', max: 2000}] });
           });
        </script>
        <style type="text/css">
        html, body 
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        </style>
    </head>
    <body>
    	<div id="header" style="background:#eeeeee; height:50px;">TOP Header</div>
        <div id='splitter'>
            <div></div>
            <div></div>
        </div>
        <div id="footer" style="background:#eeeeee; height:50px;">Bottom Footer</div>
        </body>
    </html>
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)