jQWidgets Forums

Tagged: javascript splitter, jquery splitter, splitter

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 11 months ago.

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

Author

Not compatible on IE when using Splitter+Navigationbar+ListBox Posts

May 8, 2013 at 3:43 am Not compatible on IE when using Splitter+Navigationbar+ListBox #20710

Member

This is a demo written by me,and it’s made with Splitter+Navigationbar+ListBox.
It works fine on the FireFox browser and the Chrome browser also,but it will be unnormal when running on the IE browser.
The IE browser doesn’t reports errors
I have taken a long time to find the cause,but nothing was found.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>cheers demo</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- Load Vendor -->
    <script type="text/javascript" src="vendor/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="vendor/json2.js"></script> 
    <script type="text/javascript" src="vendor/knockout-2.2.1.debug.js"></script>
    <!-- Load jQwidgets Source -->
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script><!-- layout -->
    <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script><!-- tab -->
    <script type="text/javascript" src="jqwidgets/jqxnavigationbar.js"></script><!--  -->
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
	<script>
		$(document).ready(function () {
			var theme = 'darkblue';
			$('#splitter').jqxSplitter({ width: '100%', theme: theme, panels: [{ size: 200 }] });
			$("#tabswidget").jqxTabs({ theme: theme,closeButtonSize:20, height: '100%', width: '100%' });
			$("#jqxNavigationBar").jqxNavigationBar({ width: 200, expandMode: 'multiple', expandedIndexes: [], theme: theme });
		});
	</script>
  </head>
  <body class='default' style="margin:0px;padding:0px;overflow:hidden">
    <div id="splitContainer">
        <div>
            <div id="splitter">
                <div style="width:300px;" id="menuList">
					<div id="jqxNavigationBar">
						<div>
							<div style='margin-top: 2px;'>
								<div style='float: left;'>
									<img alt='Mail' src='images/contactsIcon.png' />
								</div>
								<div style='margin-left: 4px; float: left;'>
									Contacts
								</div>
							</div>
						</div>
						<div>
							<ul>
								<li><a href='#'>Business Cards</a></li>
								<li><a href='#'>Address Cards</a></li>
								<li><a href='#'>Detailed Address Cards</a></li>
								<li><a href='#'>Phone List</a></li>
							</ul>
						</div>
						<div>
							<div style='margin-top: 2px;'>
								<div style='float: left;'>
									<img alt='Mail' src='images/tasksIcon.png' />
								</div>
								<div style='margin-left: 4px; float: left;'>
									Tasks
								</div>
							</div>
						</div>
						<div>
							<ul>
								<li><a href='#'>Simple List</a></li>
								<li><a href='#'>Detailed List</a></li>
								<li><a href='#'>Active Tasks</a></li>
								<li><a href='#'>Phone List</a></li>
							</ul>
						</div>
						<div>
							<div style='margin-top: 2px;'>
								<div style='float: left;'>
									<img alt='Mail' src='images/notesIcon.png' />
								</div>
								<div style='margin-left: 4px; float: left;'>
									Notes
								</div>
							</div>
						</div>
						<div>
							<ul>
								<li><a href='#'>Icons</a></li>
								<li><a href='#'>Notes List</a></li>
								<li><a href='#'>Last Seven Days</a></li>
							</ul>
						</div>
					</div>		
                </div>
                <div> 
                    <div class="jqx-hideborder jqx-hidescrollbars" id="tabswidget">
                        <ul>
                            <li style="margin-left: 10px;">index</li>
                        </ul>
                        <div>Content 1</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

May 8, 2013 at 4:41 am Not compatible on IE when using Splitter+Navigationbar+ListBox #20718

Peter Stoev

Keymaster

Hi,

I checked the HTML markup in the posted code and found out that it is not written as expected. You should not initialize widgets from Split Panels or change Layout Properties such as Width or Height of Split Panels as these are managed by the Splitter. Widgets or any other HTML Content should be within the Split panels. An example of using Splitter with other widgets is available here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/defaultfunctionality.htm?web

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.