jQuery UI Widgets › Forums › Layouts › Panel and Responsive Panel › responsivepanel and splitter ?

Tagged: , , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 8 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    responsivepanel and splitter ? Posts
  • August 4, 2016 at 2:47 pm responsivepanel and splitter ? #86319

    Laurent
    Participant

    Hello,

    Is it possible to use jqxSplitter with a jqxResponsivePanel ?

    I can not do it, here is a snippet :

        
...
<script type="text/javascript">
        $(document).ready(function () {

            $('#mainSplitter').jqxSplitter({ width: 900, height: 500, panels: [{ size: 300 }] });
            
            $('#jqxTree').jqxTree({ height: '100%', width: '100%' });
            $('#jqxTree').css('visibility', 'visible');
            $('#jqxTree').on('select', function (event) {
				$("#ContentPanel").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>");            
            });
            
            $('#jqxTree').jqxResponsivePanel({
				width: '30%',
                height: '80%',
                collapseBreakpoint: 700,
                toggleButton: $('#toggleResponsivePanel'),
                animationType: 'none',
                autoClose: false
            });

            $('#jqxTree').on('open expand close collapse', function (event) {
                if (event.args.element)
                    return;

                var collapsed = $('#jqxTree').jqxResponsivePanel('isCollapsed');
                var opened = $('#jqxTree').jqxResponsivePanel('isOpened');

                if (collapsed && !opened) {
                    $('#ContentPanel').jqxPanel({ width: '100%' });
                }
                else if (collapsed && opened) {
                    $('#ContentPanel').jqxPanel({ width: '65%' });
                }
                else if (!collapsed) {
                    $('#ContentPanel').jqxPanel({ width: '65%' });
                }
            });
            
            $('#ContentPanel').jqxPanel({ width: '65%', height: '80%' });
        });
    </script>

...

<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="mainSplitter">
            <div id="jqxTree">
                Panel 1</div>
            <div id="ContentPanel">
                Panel 2</div>
        </div>
    
</body>
    August 5, 2016 at 11:27 am responsivepanel and splitter ? #86358

    Hristo
    Participant

    Hello Laurent,

    It is important to add div tags in the correct hierarchic.
    If you try to use widget in another widget need to use the right container and to set there div tag for the next one.
    Also some of the widgets have initContent callback, where is the right place for the inner widget.
    Please, take a look this demo below, find out how to achieve what you want. Substituting jqxMenu with a jqxSplitter
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxresponsivepanel/defaultfunctionality.htm?light
    http://jsfiddle.net/jqwidgets/f0q2uLt9/
    I would like to suggest you to start with some small example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    August 8, 2016 at 8:50 am 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>
    August 15, 2016 at 9:47 am responsivepanel and splitter ? #86532

    Hristo
    Participant

    Hello Laurent,

    Please, take a look this example:
    http://jsfiddle.net/qg4muh8o/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.