jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
Author

Posts
August 8, 2016 at 8:50 am in reply to: responsivepanel and splitter ? responsivepanel and splitter ? #86398
Laurent
Participant
Hello,
Thank you for your reply.
I tried several combinations but none works.
In this example, splitter work, but it’s not responsive anymore :
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/common/jqwidgets-4.1.2/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="/common/jqwidgets-4.1.2/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/common/jqwidgets-4.1.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/common/jqwidgets-4.1.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/common/jqwidgets-4.1.2/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="/common/jqwidgets-4.1.2/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="/common/jqwidgets-4.1.2/jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="/common/jqwidgets-4.1.2/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="/common/jqwidgets-4.1.2/jqwidgets/jqxresponsivepanel.js"></script>
    
    <style type="text/css">
        #jqxResponsivePanel, #content {
            float: left;
        }
        .jqx-rc-all {
            border-radius: 0px;
        }
        body, html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
    
    <script type="text/javascript">
        $(document).ready(function () {

			//$('#jqxSplitter').jqxSplitter({ width: 850, height: 480, panels: [{ size: 300 }] });
			$('#jqxSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: 300 }] });
        
            $('#jqxMenu').jqxTree({ height: '100%', width: '100%' });
            
            $('#jqxMenu').css('visibility', 'visible');
            $('#content').jqxPanel();

            $('#jqxResponsivePanel').jqxResponsivePanel({
                width: '30%',
                height: '80%',
                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: '80%' });
            
        });
    </script>
</head>
<body>

	<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="jqxSplitter">
               <div id="jqxResponsivePanel">	        
			<div id="jqxMenu" style="border: none; visibility: hidden;">
				<ul>
					<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">
                 <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.
                 Industries.
                 </p>
             </div>
       </div>
</body>
</html>
Author

Posts
Viewing 1 post (of 1 total)