jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts

May 27, 2015 at 4:17 pm in reply to: Scrollbar Problems (jqxTabs & jqxSplitter) Scrollbar Problems (jqxTabs & jqxSplitter) #71676

aknue

Participant

Hello Ivailo,
again, thanks for your fast reply!
I have tested your code, but unfortunately when i set DEBUG=true, the problem remains.
I would like to fill the selected Tab with jqxSplitter and some NEW CONTENT. So, when i click on Link 1 everything is fine for now, but if i click on Link 2, i’ve got the jqxSplitter with my NEW CONTENT but the scollbar disappers.

Any ideas?

All the best!
Andre.

May 26, 2015 at 9:03 pm in reply to: Scrollbar Problems (jqxTabs & jqxSplitter) Scrollbar Problems (jqxTabs & jqxSplitter) #71593

aknue

Participant

Thank you for your quick reply!

I changed my code as attached. The Link No.1 seems to be working.
But i have the remaining problem with Link No.2… How do change the Content and reinitialise the jqxSplitter? The Scrollbar disappers when i set new Content. I have tried it with the same id as the dynamic generated Tab and with a complete new one like in my example “splitter999”.

Thank you very much for all your help!

Best Regards,
Andre.


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>TEST</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxtoolbar.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>	
	
	<script type="text/javascript">
        $(document).ready(function () {
			var actualSelectedTab = 0;
			var DEBUG = true;
			$('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', min: 200 }, { size: '80%', min: 100}] });
			$('#rightSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false, min: 100 }, { size: '20%', min: 100}] });
			$("#tabswidget").jqxTabs({  height: '100%', width: '100%', showCloseButtons: true });
			
			 $('#tabswidget').on('selected', function (event) {
				   actualSelectedTab = event.args.item;
				   //var contentDIV = $("#tabswidget .jqx-tabs-content-element")[actualSelectedTab];
				   //console.debug(contentDIV);
			 });			
			
			
			var newid = 0;
			$("#testlnk").click(function (e) {	
				e.preventDefault(); 
				result="TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TESTTEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST";
				if(DEBUG)var code="<div class='jqx-hideborder' id='splitter"+newid+"'><div id='jqxpanel"+newid+"'>"+result+"</div><div>Right</div></div>"; 
				else var code="<div id='jqxpanel"+newid+"' class='jqx-hideborder'>"+result+"</div>"; 
				
				$('#tabswidget').jqxTabs('addAt', ($('#tabswidget').jqxTabs('length')), ' Tab Title', code);
				$('#tabswidget').jqxTabs('ensureVisible', ($('#tabswidget').jqxTabs('length'))); 
				
				$("#tabswidget .jqx-tabs-content-element:visible #jqxpanel"+newid).jqxPanel({ height: '100%', width: '100%' });	
				if(DEBUG)$("#tabswidget .jqx-tabs-content-element:visible #splitter"+newid).jqxSplitter({ height: '100%', width: '100%',  panels: [{ size: '80%', min: 210, collapsible: false}] });
				newid++;
			});
			
			$("#testlnktwo").click(function (e) {	
				e.preventDefault(); 
				result="NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENTNEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT<br>NEW CONTENT";
				if(DEBUG)var code="<div class='jqx-hideborder' id='splitter999'><div id='jqxpanel999'>"+result+"</div><div>Right</div></div>"; 
				else var code="<div id='jqxpanel999' class='jqx-hideborder'>"+result+"</div>"; 
				
				$('#tabswidget').jqxTabs('setContentAt', actualSelectedTab, code);
				$('#tabswidget').jqxTabs('ensureVisible', actualSelectedTab); 
				
				// Selector ":visible" to get the current Tab...
				$("#tabswidget .jqx-tabs-content-element:visible #jqxpanel999").jqxPanel({ height: '100%', width: '100%' });	
				if(DEBUG)$("#tabswidget .jqx-tabs-content-element:visible #splitter999").jqxSplitter({ height: '100%', width: '100%',  panels: [{ size: '80%', min: 210, collapsible: false}] });
				
			});			
			
			
		});
</script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
			background-color: #cccccc;
        }
    </style>
</head>
<body>
	<div id="jqxToolBar" class="jqx-hideborder"> </div>
	<div id="mainSplitter">
		<div>	
				
			<div id="tree" class="jqx-hideborder">Left Panel<br><br><a href="#" id="testlnk">Test Link 1 (Add new TAB)</a><br><br><a href="#" id="testlnktwo">Test Link 2 (Change Content of current Tab)</a></div>
		</div>
        <div>
            <div id="rightSplitter">
                <div>
						<div class="jqx-hideborder" id="tabswidget">
							<ul>
								<li style="margin-left: 30px;" hasclosebutton='false'>First TAB</li>
							</ul>
							<div style='padding: 10px;'>HELLO</div>
						</div>
				</div>
                <div id="unten" style='padding: 10px'>Bottom-Right Panel</div>
            </div>
        </div>
    </div>
</body>
</html>

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)