jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <title id="Description">The Responsive Panel is collapsed when the owner's container width is less that the collapseBreakpoint property value and expanded when it is higher.</title> <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxresponsivepanel.js"></script> <script type="text/javascript" src="../../../scripts/demos.js"></script> <style type="text/css"> #jqxResponsivePanel, #content { float: left; } .jqx-rc-all { border-radius: 0px; } </style> <script type="text/javascript"> $(document).ready(function () { $('#jqxMenu').jqxTree({ height: '100%', width: '100%' }); $('#jqxMenu').css('visibility', 'visible'); $('#content').jqxPanel(); $('#jqxResponsivePanel').jqxResponsivePanel({ width: '30%', height: '100%', collapseBreakpoint: 700, toggleButton: $('#toggleResponsivePanel'), animationType: 'none', autoClose: false }); $('#jqxResponsivePanel').on('open expand close collapse', function (event) { if (event.args.element) return; var collapsed = $('#jqxResponsivePanel').jqxResponsivePanel('isCollapsed'); var opened = $('#jqxResponsivePanel').jqxResponsivePanel('isOpened'); if (collapsed && !opened) { $('#content').jqxPanel({ width: '100%' }); } else if (collapsed && opened) { $('#content').jqxPanel({ width: '65%' }); } else if (!collapsed) { $('#content').jqxPanel({ width: '65%' }); } }); $('#content').jqxPanel({ width: '65%', height: '100%' }); $("#resizeSmall").jqxButton(); $("#resizeBig").jqxButton(); $("#resizeSmall").click(function () { $("#ownerPanel").width(500); $('#content').jqxPanel({ width: '100%' }); $('#jqxResponsivePanel').jqxResponsivePanel('refresh'); }); $("#resizeBig").click(function () { $("#ownerPanel").width(800); $('#content').jqxPanel({ width: '65%' }); $('#jqxResponsivePanel').jqxResponsivePanel('refresh'); }); }); </script> </head> <body> <div id="ownerPanel" style="height: 300px; width:800px;"> <div style="box-sizing: border-box; margin-bottom: 2px; width: 100%; height: 50px; padding: 10px 0 0 10px;"> <div id="toggleResponsivePanel"> </div> </div> <div id="jqxResponsivePanel"> <div id="jqxMenu" style="border: none; visibility: hidden;"> <ul> <li><a href="#">Home</a></li> <li>About Us <ul> <li><a href="#">History</a></li> <li><a href="#">Our Vision</a></li> <li><a href="#">The Team</a> <ul> <li><a href="#">Brigita</a></li> <li><a href="#">John</a></li> <li><a href="#">Michael</a></li> <li><a href="#">Peter</a></li> <li><a href="#">Sarah</a></li> </ul> </li> <li><a href="#">Clients</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Press</a></li> <li><a href="#">FAQs</a></li> </ul> </li> <li>Services <ul> <li><a href="#">Product Development</a></li> <li><a href="#">Delivery</a></li> <li><a href="#">Shop Online</a></li> <li><a href="#">Support</a></li> <li><a href="#">Training & Consulting</a></li> </ul> </li> <li>Products <ul> <li><a href="#">New</a> <ul> <li><a href="#">Corporate Use</a></li> <li><a href="#">Private Use</a></li> </ul> </li> <li><a href="#">Used</a> <ul> <li><a href="#">Corporate Use</a></li> <li><a href="#">Private Use</a></li> </ul> </li> <li><a href="#">Featured</a></li> <li><a href="#">Top Rated</a></li> <li><a href="#">Prices</a></li> </ul> </li> <li><a href="#">Gallery</a></li> <li><a href="#">Events</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">Enquiry Form</a></li> <li><a href="#">Map & Driving Directions</a></li> <li><a href="#">Your Feedback</a></li> </ul> </li> </ul> </div> </div> <div id="content"> <h4 style="text-align: center;">About Us</h4> <p style="line-height: 1.5;"> <span style="float: left; font-size: 3.26em; line-height: 0.5; margin-top: 0.2em;">S</span><strong>tark Industries</strong> is a multinational conglomerate with facilities in over thirty different countries on all seven continents. The President and CEO of Stark Industries is billionaire industrialist Anthony "Tony" Stark. </p> <p> The company's origins date back to the mid-19th century when Isaac Stark, Sr. began developing new electrical and engineering technology that helped to redefine innovative security measures for the industrial age. </p> <p> With growing prosperity, Stark Industries (then known as Stark Enterprises) was quickly propelled into the modern era as a major global industrial superpower, due in no small measure to Isaac Stark, Sr.'s direct descendant Howard Stark. Under Howard Stark's leadership, Stark Industries became the world leader in the development of munitions with its corporate office located on Long Island, New York. Stark Industries quickly branched out into other scientific fields including aeronautics, robotics, micro-technology and fringe science. With increasing expansion, the company soon became known as Stark Industries. When Howard Stark passed away, his sole heir Tony Stark inherited all of his father's business assets and took full control of Stark Industries. </p> </div> </div> <div style="padding-top: 20px; clear:both;"> </div> <button id="resizeSmall">Resize Panel to 500px</button> <button id="resizeBig">Resize Panel to 800px</button> <div style="position: absolute; bottom: 5px; right: 5px;"> <a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a> </div> </body> </html>