jQWidgets Forums
Forum Replies Created
-
Author
-
March 9, 2015 at 4:32 pm in reply to: jqxsplitter compatible with IE8? jqxsplitter compatible with IE8? #68222
Yes, I’m using jQuery 2.1.3.
March 7, 2015 at 10:34 pm in reply to: jqxsplitter compatible with IE8? jqxsplitter compatible with IE8? #68169After 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>
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?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>
Of course it works now. I thought I had checked everything but I missed it. Thanks.
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>
January 12, 2015 at 9:16 pm in reply to: What is wrong with my splitter? What is wrong with my splitter? #65282I got it working now, at last.
January 10, 2015 at 10:58 pm in reply to: What is wrong with my splitter? What is wrong with my splitter? #65222Ok, 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> -
AuthorPosts