Advertisement

07.10.2008 at 10:13AM PDT, ID: 23554576
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.1

Jquery nested splitter

Asked by glumlun in JavaScript, Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)

Tags: , ,

Hi. im trying to make use of something very much like the link supplied
however, as ever its not quite what i need.
I need to add in some tabs that align left of the center panel and will stay alligned left to the center panel when the left resizer is moved. it also needs to be able to be able to expnd across what wil be the right hand column.
i can see 2 ways of doing this, locate the tab div outside the splitter and somehow 'lock' it to the center panel, so that when its is resized the tabs styay alligned left to the center panel
or have a use something like: http://methvin.com/jquery/splitter/3psplitter.html
and split the ' bottom-right part' again in to two panels. ive experimented with this, code attached but am not getting what i want, esp in IE6. on moveing the left panel in and out again, the body pushes out of the right of the browser screen, also on moving the left panle, the far right nested panle also moves, i would like this to stay where it is and the center panel to expand...
im really clueless as how to proceed, any help would be appreciated.Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-pane splitter</title>
<script type="text/javascript" src="http://methvin.com/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://methvin.com/jquery/splitter/dimensions.js"></script>
<script type="text/javascript" src="http://methvin.com/jquery/splitter/splitter.js"></script>
 
<!-- General page styles (not critical to the demos) -->
<link rel="stylesheet" type="text/css" href="main.css" />
 
<style type="text/css" media="all">
html, body
{
	margin: 0;			/* Remove body margin/padding */
	padding: 0;
	overflow: hidden;	/* Remove scroll bars on browser window */
}
#header { padding: 1em; }
 
#MySplitter {
	/* Height is set to match window size in $().ready() below */
	border: 4px solid #669;
	min-width: 500px;	/* Splitter can't be too thin ... */
	min-height: 300px;	/* ... or too flat */
}
#LeftPane {
	background: #ddf;
	padding: 8px;
	overflow: auto;		/* Scroll bars appear as needed */
}
#TopPane {				/* Top nested in right pane */
	background: #ccf;
	padding: 8px;
	height: 150px;		/* Initial height */
	min-height: 75px;	/* Minimum height */
}
#WorkArea {			/* Bottom nested in right pane */
	background: #eef;
}
#MySplitter .vsplitbar {
	width: 6px;
	background: #669 url(vgrabber.gif) repeat-y center;
}
#MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover {
	background: #c66 url(vgrabber.gif) repeat-y center;
}
#MySplitter .hsplitbar {
	height: 6px;
	background: #669 url(hgrabber.gif) repeat-x center;
}
#MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover {
	background: #c66 url(hgrabber.gif) repeat-x center;
}
</style>
<script type="text/javascript">
$().ready(function() {
 
	// Vertical splitter. The min/max/starting sizes for the left (A) pane
	// are set here. All values are in pixels.
	$("#MySplitter").splitter({
		type: "v", 
		minA: 100, initA: 150, maxA: 300,
		accessKey: "|"
	})
	
	// Horizontal splitter, nested in the right pane of the vertical splitter.
	$("#RightPane").splitter({
		type: "h",
		accessKey: "_"
	});
 
		$("#WorkArea").splitter({
		type: "v",
		accessKey: "_"
	});
	
	// Manually set the outer splitter's height to fill the browser window.
	// This must be re-done any time the browser window is resized.
	$(window).bind("resize", function(){
		var $ms = $("#MySplitter");
		var top = $ms.offset().top;		// from dimensions.js
		var wh = $(window).height();
		// Account for margin or border on the splitter container
		var mrg = parseInt($ms.css("marginBottom")) || 0;
		var brd = parseInt($ms.css("borderBottomWidth")) || 0;
		$ms.css("height", (wh-top-mrg-brd)+"px");
		// IE fires resize for splitter; others don't so do it here
		if ( !jQuery.browser.msie )
			$ms.trigger("resize");
	}).trigger("resize");
});
</script>
</head>
<body>
 
<div id="header">
<h1>3-Pane Splitter Layout</h1>
<p>Here is a typical 3-pane layout with the splitter occupying all the area below this header.
  The page scroll bars have been removed since all the content is inside the splitter, and the
  splitter is anchored to the bottom of the window using an onresize event handler.</p>
<p>
<a href="default.html">See the splitter documentation</a>
</p>
</div>
 
<div id="MySplitter">
 
  <div id="LeftPane">
		<p>This is the left pane of the 3-pane splitter. It has been limited to a range of 100 to 300 pixels wide with the minA/maxA properties of the plugin. It starts at 150 pixels wide because of the initA property. (These could have been set through the stylesheet too.)</p>
		<p>Essentially, a 3-pane splitter is just a vertical splitter with a horizontal splitter nested in the right-hand side. This same technique can be used to create multiple vertical and/or horizontal splitter layouts.</p>
  </div> <!-- #LeftPane -->
  
  <div id="RightPane">
  
	<div id="TopPane">
		<p>This is the top-right part of the 3-pane splitter. It starts at 150 pixels because the height of #TopPane was set in the stylesheet. The stylesheet has also set <code>min-height: 75px</code> so it can't get any smaller than that.</p>
		<p>The splitbars are keyboard-accessible. Use <kbd>Alt-Shift-|</kbd> (vertical bar) to select the vertical splitbar, or <kbd>Alt-Shift-_</kbd> (underscore) for the horizontal one. Then use the arrow keys to move the bar. The plugin lets you specify any key, but these seem pretty mnemonic!</p>
	</div>
	
	<div id="WorkArea">
	<div id="left">
Sed luctus. Nunc venenatis, risus in consequat blandit, est nunc sodales diam, ut dapibus massa wisi eget odio. Nam vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc nulla erat, laoreet imperdiet, aliquet ut, eleifend et, neque. Nullam felis urna, fermentum non, molestie a, mollis ac, purus. Curabitur feugiat arcu non elit feugiat ultrices. Nullam vitae nibh. Nulla facilisi. Praesent ut eros et felis ullamcorper convallis. Donec vitae justo. Quisque nunc purus, nonummy sed, mattis sed, lobortis sit amet, libero. Aenean diam. Nullam vehicula purus et nulla sodales tristique. Nullam a magna. Morbi dolor ante, laoreet vitae, malesuada ut, tristique et, neque. Duis semper cursus felis.
	</div>
	<div id="right">
Sed luctus. Nunc venenatis, risus in consequat blandit, est nunc sodales diam, ut dapibus massa wisi eget odio. Nam vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc nulla erat, laoreet imperdiet, aliquet ut, eleifend et, neque. Nullam felis urna, fermentum non, molestie a, mollis ac, purus. Curabitur feugiat arcu non elit feugiat ultrices. Nullam vitae nibh. Nulla facilisi. Praesent ut eros et felis ullamcorper convallis. Donec vitae justo. Quisque nunc purus, nonummy sed, mattis sed, lobortis sit amet, libero. Aenean diam. Nullam vehicula purus et nulla sodales tristique. Nullam a magna. Morbi dolor ante, laoreet vitae, malesuada ut, tristique et, neque. Duis semper cursus felis.
	</div>
	</div> <!-- #WorkArea -->
	
  </div> <!-- #RightPane -->
  
</div> <!-- #MySplitter -->
 
</body>
</html>
[+][-]07.11.2008 at 09:44AM PDT, ID: 21983938

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: JavaScript, Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)
Tags: JQUERY, CSS, IE6 IE7 firefox, http://methvin.com/jquery/splitter/3csplitter.html
Sign Up Now!
Solution Provided By: hielo
Participating Experts: 1
Solution Grade: A
 
 
[+][-]07.12.2008 at 10:36AM PDT, ID: 21989839

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]09.16.2008 at 11:26PM PDT, ID: 22495967

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 7-day free trial to view this Administrative Comment or ask the Experts your question.

 
 
Loading Advertisement...
20081112-EE-VQP-42 / EE_QW_2_20070628