jQWidgets Forums

Forum Replies Created

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

  • hcccs
    Participant

    Yes, I’m using jQuery 2.1.3.


    hcccs
    Participant

    After testing on FF, Chrome and Safari where this code works I can’t make it work on IE8. I get a blank page with the two menu items on it, no splitter and no menu. For testing purposes I have download the latest version of jQuery.

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <link   type="text/css" rel="stylesheet"  href="/jqwidgets/styles/jqx.base.css" />
       <link   type="text/css" rel="stylesheet"  href="/jqwidgets/styles/jqx.summer.css" />
       <script type="text/javascript" src="/js/jquery.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/jqxmenu.js"></script>	
       <script type="text/javascript">
          $(document).ready(function () {
    		   $('#hor1Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
    			var source = [
    				{label: "Video iframe",		id: "test/videoi"},
    				{label: "Video LBP",			id: "test/videol"},
    				{label: "Video fallback",	id: "test/videofb"},
    				{label: "Video JWPlayer",	id: "test/videojw"},				
    			];
    			$("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
    			$('#jqxMenu').on('itemclick', function (event) {
    				var element = event.args;
    				var page = element.id + ".html";
    				$('#ContentPanel').load(page);
    			});			
    		});
    	</script>
    
    	<style type="text/css">
    		html, body 
    		{
    		height: 100%;
    		width: 100%;
    		margin: 0px;
    		padding: 0px;
    		overflow: hidden;
    		}
       </style>
    </head>
    
    <body class='default'>
       <div id="hor1Splitter">
    		<div id="jqxMenu">
    				Menu panel
    		</div>	
    		<div id="ContentPanel">
    			Content panel
    		</div>
    	</div>
    </body>
    </html>
    
    in reply to: How to call a HTML page How to call a HTML page #66646

    hcccs
    Participant

    I substituted a simple HTML file for the PHP file and then it worked.
    I’m trying to figure out the meaning of the item fields of the SOURCE property of JqxMenu. What are VALUE and HTML fields used for? If I know what item has been clicked, how do I access the fields in the item?

    in reply to: How to call a HTML page How to call a HTML page #66459

    hcccs
    Participant

    Now I’m trying to load a page into the panel ‘ContentPanel’ but there is something not right, as usual. What could it be?

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <link   type="text/css" rel="stylesheet"  href="/jqwidgets/styles/jqx.base.css" />
       <script type="text/javascript" src="/js/jquery-2.1.3.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/jqxmenu.js"></script>	
       <script type="text/javascript">
          $(document).ready(function () {
    		   $('#hor1Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
    		   $('#hor2Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{size: '90%', resizable: false}, {size: '10%', resizable: false}] });
    			var source = 
    			[
    				{label: "AAAAA"},
    				{label: "BBBBB"},
    				{label: "CCCCC"}
    			];
    			$("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
    			$('#jqxMenu').on('itemclick', function (event) {
    				var element = event.args;
    				if (element.textContent == "AAAAA") {
    					$('#ContentPanel').load('hund.php');
    				}
    				$('#BottomPanel').text($(event.target).text() + " item has been clicked");					
    			});
    		});
    	</script>
    
    	<style type="text/css">
    		html, body 
    		{
    		height: 100%;
    		width: 100%;
    		margin: 0px;
    		padding: 0px;
    		overflow: hidden;
    		}
       </style>
    </head>
    
    <body>
       <div id="hor1Splitter">
    		<div>
    			<div id="jqxMenu"></div>
    		</div>
    		<div>
    			<div id="hor2Splitter">
    				<div>
    					<div id='ContentPanel'></div>
    				</div>
    				<div>
    					<div id='BottomPanel'></div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    
    in reply to: Menu source doesn't work Menu source doesn't work #65634

    hcccs
    Participant

    Of course it works now. I thought I had checked everything but I missed it. Thanks.

    in reply to: Menu source doesn't work Menu source doesn't work #65555

    hcccs
    Participant

    Hi Nadezhda,

    I have got it working and I have taken my little project a little bit further by intrducing a lot more splitters. I have put a menu in the top central panel but now it refuses to function. If I put in some text, it’s allright but the menu does not appear. I hope I haven’t made any silly mistakes this time.

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
       <link   type="text/css" rel="stylesheet"  href="/jqwidgets/styles/jqx.base.css" />
       <link   type="text/css" rel="stylesheet"  href="/jqwidgets/styles/jqx.darkblue.css" />	
       <script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
       <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
       <script type="text/javascript" src="/jqwidgets/jqxsplitter.js"></script>
       <script type="text/javascript">
          $(document).ready(function () {
    		   $('#hor1Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
    		   $('#hor2Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{size: '90%', resizable: false}, {size: '10%', resizable: false}] });
    		   $('#ver1Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
    		   $('#ver2Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '90%', resizable: false}, {size: '10%', resizable: false}] });
    		   $('#ver3Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
    		   $('#ver4Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '90%', resizable: false}, {size: '10%', resizable: false}] });
    		   $('#ver5Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
    		   $('#ver6Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '90%', resizable: false}, {size: '10%', resizable: false}] });			
    			var source = [
    				{label: "AAAAA"},
    				{label: "BBBBB"},
    				{label: "CCCCC"}
    				];
    		$("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
    		});
    	</script>
    
    	<style type="text/css">
    		html, body 
    		{
    		height: 100%;
    		width: 100%;
    		margin: 0px;
    		padding: 0px;
    		overflow: hidden;
    		}
       </style>
    </head>
    
    <body>
       <div id="hor1Splitter">
    		<div>
    			<div id="ver1Splitter">
    				<div>				
    					<span>Top left</span>
    				</div>
    				<div>
    					<div id="ver2Splitter">
    						<div>
    							<div id="jqxMenu"></div>
    						</div>
    						<div>
    							<span>Top right</span>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div>
    			<div id ="hor2Splitter">
    				<div>
    					<div id="ver3Splitter">
    						<div>
    							Middle left
    						</div>
    						<div>
    							<div id="ver4Splitter">
    								<div>
    									<span>Middle center</span>
    								</div>
    								<div>
    									<span>Middle right</span>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<div>
    					<div id="ver5Splitter">
    						<div>
    							<span>Bottom left</span>
    						</div>
    						<div>
    							<div id="ver6Splitter">
    								<div>
    									<span>Bottom center</span>
    								</div>
    								<div>
    									<span>Bottom right</span>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    

    hcccs
    Participant

    I got it working now, at last.

    in reply to: What is wrong with my splitter? What is wrong with my splitter? #65222

    hcccs
    Participant

    Ok, I have taken a step backwards and cut down the code to its bare bones just to make something work. I don’t seem to have much luck in spite of my thirty years as a programmer. What am I doing so wrong?

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta name=”keywords” content=”jQuery Splitter, Splitter Widget, Splitter, jqxSplitter” />

    <link type=”text/css” rel=”stylesheet” href=”/jqwidgets/styles/jqx.base.css” />
    <script type=”text/javascript” src=”/js/jquery-2.1.3.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxsplitter.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘#hor1Splitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{size: ‘10%’}, {size: ‘90%’}}] });
    });
    </script>
    </head>

    <body>
    <div id=”hor1Splitter”>
    <div>
    Top
    </div>
    <div>
    Middle
    </div>
    </div>
    </body>
    </html>

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