Div resize TOP <Middle Resize> BOTTOM

See the attached code.

I'm having an issue getting the right div to allow the inside divs to resize.

It will resize, but I want the top to not exceed its outer div
and
The bottom div not to exceed its bottom.

The top one will list the messages, and the bottom will be a preview of the message.
[Messages]
<resize>
[Message]
<script type="text/javascript" src="shockeymonkey.js"></script>
 
<?
echo"
 
<script type=\"text/javascript\">
 
(function($){
$.fn.jqDrag=function(h){return i(this,h,'d');};
$.fn.jqResize=function(h){return i(this,h,'r');};
$.jqDnR={dnr:{},e:0,
drag:function(v){
 if(M.k == 'd')E.css({left:M.X+v.pageX-M.pX,top:M.Y+v.pageY-M.pY});
 else E.css({height:Math.max(v.pageY-M.pY+M.H,0)});
  return false;},
stop:function(){E.css('opacity',M.o);$().unbind('mousemove',J.drag).unbind('mouseup',J.stop);}
};
var J=$.jqDnR,M=J.dnr,E=J.e,
i=function(e,h,k){return e.each(function(){h=(h)?$(h,e):e;
 h.bind('mousedown',{e:e,k:k},function(v){var d=v.data,p={};E=d.e;
 // attempt utilization of dimensions plugin to fix IE issues
 if(E.css('position') != 'relative'){try{E.position(p);}catch(e){}}
 M={X:p.left||f('left')||0,Y:p.top||f('top')||0,W:f('width')||E[0].scrollWidth||0,H:f('height')||E[0].scrollHeight||0,pX:v.pageX,pY:v.pageY,k:d.k,o:E.css('opacity')};
 E.css({opacity:0.8});$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
 return false;
 });
});},
f=function(k){return parseInt(E.css(k))||false;};
})(jQuery);
 
$().ready(function() {
  $('#ex1').jqResize('.jqResize');
});
</script>
 
<html>
<head>
<style type=\"text/css\">
.mail_hdivide {background-color: #ffff00;border:0px solid black; height:1%;}
.mail_left {background-color: #ffff00;border:0px solid black; max-width:15%; width:15%; height:100%; float:left; position:relative; overflow:hidden; }
.mail_right {background-color: #0000ff;border:0px solid black; max-width:85%; width:85%; height:100%; float:right; position:relative; overflow:hidden;}
.mail_menu {background-color: #ff0000;border:0px solid black; height:5%;}
.mail_search {background-color: #ffcccc;border:0px solid black; height:5%; position:relative;}
.mail_inbox {background-color: #00ff00;border:0px dashed black; height:55%;}
.mail_info {background-color: #22ffcc;border:0px dashed black; height:40%;}
.mail_container {width:100%; height:95%; position:absolute; bottom: 0 !important;
bottom: -1px;}
.mail_messages {background-color: #220000;border:0px dashed black; width:100%; height:45%; overflow-y: scroll; scrollbar-arrow-color:
blue; scrollbar-face-color: #e7e7e7; scrollbar-3dlight-color: #a0a0a0; scrollbar-darkshadow-color:#888888; position: relative;}
.mail_message {background-color: #220000;border:0px dashed black; width:100%; height:100%; overflow-y: scroll; scrollbar-arrow-color:
blue; scrollbar-face-color: #e7e7e7; scrollbar-3dlight-color: #a0a0a0; scrollbar-darkshadow-color:#888888; position: relative;}
.mail_container2 {background-color: #ccffff;border:0px dashed black; width:100%; height:55%; overflow:hidden position: relative;bottom: 0 !important;
bottom: -1px;}
.mail_container3 {background-color: #ccffff;border:0px dashed black; width:100%; height:95%; overflow:hidden; position: absolute;}
 
.jqHandle {
   background: red;
}
 
.jqResize {
   height: 5px;
   position: relative;
   cursor: se-resize;
}
 
 
 
</style>
</head>
	<span class=\"mail_left\">
		<div class=\"mail_menu\">menu</div>
		<div class=\"mail_inbox\">inbox</div>
		<div class=\"mail_info\">info</div>
	</span>
 
	<span class=\"mail_right\">
		<div class=\"mail_search\">search</div>
		<div class=\"mail_container3\">
			<div id=\"ex1\" class=\"mail_container\">
				<div class=\"mail_messages\"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
				<div class=\"jqHandle jqResize\">split</div>
				<div class=\"mail_container2\">
				<div class=\"mail_message\">message</div>
			</div>
		</div>
		</div>
	</span>
 
 
<p>
<p>
 
 
</html>
";
?>

Open in new window

namwenioAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
namwenioConnect With a Mentor Author Commented:
Here is a link, to how it should look. The problem is the resizing of the right divs, Grab the red bar in the middle to move it.

http://admin.exchangedefender.com/Archive/test.php
0
 
selvolCommented:
It, pretty hard to recreate the page. Due you have an URL?
Try this?
 
Selvol

<style type=\"text/css\">
 
.mail_hdivide {
background-color : #ffff00;
border : 0 solid black;
height : 1%;
}
.mail_left {
background-color : #ffff00;
border : 0 solid black;
max-width : 15%;
width : 15%;
height : 100%;
float : left;
position : relative;
overflow : hidden;
}
.mail_right {
background-color : #0000ff;
border : 0 solid black;
max-width : 85%;
width : 85%;
height : 100%;
float : right;
position : relative;
overflow : hidden;
}
.mail_menu {
background-color : #ff0000;
border : 0 solid black;
height : 5%;
}
.mail_search {
background-color : #ffcccc;
border : 0 solid black;
height : 5%;
position : relative;
}
.mail_inbox {
background-color : #00ff00;
border : 0 dashed black;
height : 55%;
}
.mail_info {
background-color : #22ffcc;
border : 0 dashed black;
height : 40%;
}
.mail_container {
width : 100%;
height : 95%;
position : absolute;
bottom : 0 !important ;
bottom : -1px;
}
.mail_messages {
background-color : #220000;
border : 0 dashed black;
width : 100%;
height : 45%;
position : relative;
}
.mail_message {
background-color : #220000;
border : 0 dashed black;
width : 100%;
height : 100%;
position : relative;
}
.mail_container2 {
background-color : #ccffff;
border : 0 dashed black;
width : 100%;
height : 55%;
overflow : hidden;
position : relative;
bottom : 0 !important ;
bottom : -1px;
}
.mail_container3 {
background-color : #ccffff;
border : 0 dashed black;
width : 100%;
height : 95%;
overflow : hidden;
position : absolute;
}
.jqHandle {
background : red;
}
.jqResize {
height : 5px;
position : relative;
cursor : se-resize;
}
 
</style>
</head>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<title></title>
</head>
<body>
<div class="\&quot;mail_menu\&quot;"><span class="\&quot;mail_left\&quot;">menu</span></div>
<div class="\&quot;mail_inbox\&quot;"><span class="\&quot;mail_left\&quot;">inbox</span></div>
<div class="\&quot;mail_info\&quot;"><span class="\&quot;mail_left\&quot;">info</span></div>
<div class="\&quot;mail_search\&quot;"><span class="\&quot;mail_right\&quot;">search</span></div>
<div class="\&quot;mail_container3\&quot; \&quot;mail_container\&quot;" id="\&quot;ex1\&quot;">
<div class="\&quot;mail_messages\&quot;"><span class="\&quot;mail_right\&quot;"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br></span></div>
<div class="\&quot;jqHandle"><span class="\&quot;mail_right\&quot;">split</span></div>
<div class="\&quot;mail_container2\&quot; \&quot;mail_message\&quot;"><span class="\&quot;mail_right\&quot;">message</span></div>
</div>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.