[eZACKe]

I have a div at the bottom of my page. Inside the div at the very top I have another div which is made to have a very small height so that it looks like a wide top border. I want to make it so that you can grab onto this pseudo top border and drag it. While you're dragging it I want the div at the bottom to change it's height whether you're dragging up or down.

This is the code I've written:

var oldPos = 0;
var curPos = 0;
var oldHeight = 0;
 $("#expandFooter").mouseup(function(){
	curPos = event.clientY;
	var pxMove=parseInt(oldPos-curPos) 
	//determine new height
	var newHeight=parseInt($('#footer').height() +pxMove) 
	alert(newHeight);
	$('#footer').height(newHeight);
	
	}).mousedown(function(){
     oldPos = event.clientY;
 });

This isn't doing what I want though. For one, the bottom div is not growing dynamically with it. I'm not sure how to track the user's mouse movements on the fly as it continually changes. That's what I need your help for!

Pretty much what I tried here was to make it increase the size after the mouse movement is over, not along with it. This isn't what I want, but I thought it'd be a start. This doesn't work either though because once you leave the pseudo border div, the mouseup no longer registers when you release the mouse.


Thanks for the help!

[eZACKe]

Cam up with this, but it's not working. No idea why not either because it seems like all my logic is correct:

 var clicking = false;
 
 $('#expandFooter').mousedown(function(){
    clicking = true;
});

$(document).mouseup(function(){
alert($('#footer').height());
    clicking = false;

})

var h = $(window).height();
var o = $('#footer').height() - 1;
var oldPos = h - o;


$(document).mousemove(function(e){
    if(clicking == false) return;
	 
	 $('#newsFeed').html(oldPos + " - " + e.clientY + " " + $('#footer').height());
     $('#footer').height($('#footer').height() + (oldPos - e.ClientY));
});

This post has been edited by eZACKe: 28 November 2011 - 08:43 PM

[cupidvogel]

Do you want to drag up or down the bottom end of the inner div to expand or contract its height and proportionately change the containing div's height (with its top position fixed, just like the inner div) also?

[eZACKe]

cupidvogel, on 30 November 2011 - 01:05 AM, said:

Do you want to drag up or down the bottom end of the inner div to expand or contract its height and proportionately change the containing div's height (with its top position fixed, just like the inner div) also?

Yes that is the goal.

[cupidvogel]

Tough call. You have to register a click on an div's bottom border. Dunno how to do that. The only way I see, there should be no bottom border, a div with almost zero height (to make it look like a border) should have to be there instead, so that it can be dragged while keeping the div whose border(supposedly) we are stretching stationary. Will try.

[e_i_pi]

Given this topic is in the jQuery forum, and you're already using jQuery in your scripting, why don't you use jQueryUI? It has a resize function that handles this.

http://jqueryui.com/demos/resizable/

I haven't tested it with fullwidth elements, but you should be able to set min width and max width to 100% to ensure that it adheres to screen width. Also, if you need to resize on only one border (i.e. - the top border) you can set the "handles" option just to "n" (read: north)

This post has been edited by e_i_pi: 01 December 2011 - 04:24 AM

[cupidvogel]

Hmmm, it's about time I start using jQuery UI too. Have never tried it...

[e_i_pi]

I highly recommend it, there's a swathe of great functions in it. jQueryUI to jQuery is what video was to cameras

[cupidvogel]

Ok, will do...

[cupidvogel]

eZACKe, on 01 December 2011 - 01:03 AM, said:

cupidvogel, on 30 November 2011 - 01:05 AM, said:

Do you want to drag up or down the bottom end of the inner div to expand or contract its height and proportionately change the containing div's height (with its top position fixed, just like the inner div) also?

Yes that is the goal.

Well, here is a solution. You can try it out at W3schools jQuery page (or even from your desktop, but since I worked it out at W3schools, the dimensions have been set accordingly). Also visit the page at Problem with expandable div design in this forum, where I and e_i_pi had a lengthy discussion with how to do it in the best possible manner.

<html>
<head>
<style>
#man { background: green; height: 100; width: 200; position: absolute; top: 30; left: 50; border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; }
#inner { background: blue; position: absolute; top: 30; left: 30; width: 50; height: 50; }
#bord {background: black; width: 200; position: absolute; height: 1; left:50; top: 130; cursor: pointer; border-left: 1px solid black; border-right: 1px solid black; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#bord").mousedown(function(event) {
		var ypos = event.pageY;
		var ycurrent = $("#man").outerHeight();
                var innerycurrent = $("#inner").height();
		$(document).mousemove(function(e) {
			var newypos = Math.max(e.pageY, parseInt($("#man").css('top')));
			$("#bord").css('top', newypos);
			var diff = newypos - ypos;
			var newval = Math.max(0, ycurrent + diff);
                        var innernewval = Math.max(0, innerycurrent + diff);
			$("#man").css('height',newval);
                        $("#inner").css('height',innernewval);

		});
	});
	$(document).mouseup(function(event) {
		$(document).unbind('mousemove');
	});
});
</script>
</head>
<body>
<div id = 'man'><div id = 'inner'></div></div>
<div id = 'bord'></div>
</body>
</html>