DHTML Resize a box 1

[timgerr]

Hey all, I am talked with creating a moveable box using this demo as an example

http://www.brainjar.com/dhtml/drag/demo.html

I was wondering if the ability to resize the floating box was possible. I need to have a floating box that I can resize on the fly by like dragging the corners. Anyone have any example of resizing a box?

Thanks for the help,
-T


-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 

[theniteowl]

timgerr, it seems like I have seen this done in the past but I could not find any info on doing it now.

My thought is that trying to directly grab and resize the div might end up being overly slow depending on the complexity of your page and the box in question.
Also, how would resizing the box interfere with the rest of the page?
You could resize the box but it will be a bit complex. There are of course other ways to approach the problem but this is where I would start.
You would have to keep track of the boxes current size and the mouse pointer position and when a mouse down event occurs you would test to see if the pointer is within so many pixels of one of the box edges so that you would know to start a resize event. One consideration is how you differentiate between a drag and a resize event. You could make a resize event only the outer few pixels of the box and make a drag event either anywhere inside of that box x pixels away from the edge or just at the top x pixels but away from the edge, etc.

When you are able to determine when it is appropriate to begin a resize event you can begin working on resizing itself. You would have to have rules to say that when someone is clicking on the left or right side of the box they can only affect width and when on the top or bottom can only affect height. Then as long as the mouse button is being held you trap the cursor position of the pointer and alter the height or width properties of the box. I will assume the box is a div or span and that you would just change the div or span properties to change it's size.
The problem here is that updating the display on the fly while trapping the mouse movement and button presses will take up a lot of processing time and the resizing may be jerky. You could avoid a lot of this by not directly altering the div but by placing another empty div with semi-transparent borders overlaying the div you want to resize. You would actually change the size of this ghosted box so what you see on the screen appears to be stretched edges of the main box and when you let off the mouse button you would hide the ghost box and use the new size coordinates to resize the actual box.
You could do this by actually having two divs positioned one on top of the other. The one on bottom being just a wire frame of the box and the one on top being the full one and set transparent. When you start a resize event you change the z-index of the wireframe to put it on top of the other box, drag it to a new size and when the mouseup occurs you read it's new size, resize the other box to match and then change the z-index so the wireframe is now underneath again.

There are lots of little problems you will run into writing this not to mention cross-browser issues. Good luck to you if you pursue it but if you are making progress and have problems it will be alot easier to get help by showing your code and tackling the individual problems than to ask a question that involves many different issues. Break it down into steps and tackle them one at a time.


At my age I still learn something new every day, but I forget two others.

 

[timgerr]

Thank you, I was thinking of having a button in the tool bar of the box that will allow the box to be resized. I will need to thing this through. I was sort of looking for advice (like you gave... thanks) and maybe a demo of this happening. Thanks for the reply.

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 

[timgerr]

I found some examples here

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 

[timgerr]

So I have been playing around with drag and drop, I have a question on how to get the style information from this tag:

<span id="bOne" style="top:123px;left:200px;" class="chip" onmousedown="startOff('bOne')">One</span>

I have created this function

function startOff(whatID)
{
	//alert(whatID);
	tryMe();
	var k = document.getElementById(whatID).style;
	document.getElementById('whatShouldBe').innerHTML = k[1];

What I am getting back is when I do k[0] is the word "top" and when I do k[1] I get the word "left". I want to get the starting positions not the word top or left. Any ideas ?

Thanks
-T

Here is all my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS, DHTML &amp; Ajax | Drag and Drop</title>
<script type="text/javascript">

var object = null;
var cX =  0;
var cY = 0;

var sT = 0;

function startOff(whatID)
{
	//alert(whatID);
	tryMe();
	var k = document.getElementById(whatID).style;
	document.getElementById('whatShouldBe').innerHTML = k[1];
}
function tryMe()
{
	document.getElementById('deBug').innerHTML = "The mouse button was depressed down " + sT;
	sT++;
	
}
// This is stuff that I am trying 
function initPage () {
	document.onmousedown = pickIt;
	document.onmousemove = dragIt;
	document.onmouseup = dropIt;
}

function pickIt(evt,whatID) {
	 
	var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
	var evt = (evt) ? evt : ((window.event) ? event : null);
	//if (objectID.indexOf('chip')!=-1)  object = document.getElementById(objectID);
	object = document.getElementById(objectID);
	//object = document.getElementById(whatID);
	if (object) { 
		object.style.zIndex = 100;
		cX = evt.clientX - object.offsetLeft;
		cY = evt.clientY - object.offsetTop;
		document.getElementById('boxOne').value = cX;
		document.getElementById('boxTwo').value = cY; 
		return;
	}
	else {
		object = null;
		return;
	}
}
function dragIt(evt) {
	
	evt = (evt) ? evt : ((window.event) ? event : null);
	if (object) {
		object.style.left = evt.clientX - cX + 'px';
		object.style.top = evt.clientY - cY + 'px';
		document.getElementById('boxOne').value = object.style.left;
		document.getElementById('boxTwo').value = object.style.top; 
		return false;
	}
}
function dropIt() {
	if (object) {	
		object.style.zIndex = 0;
		object = null;
		return false;
		
	}
}
</script>
<style type="text/css">
.chip {
	position: absolute;
	padding: 8px;
	border: 1px solid #333;
	border-right: 3px solid #333;
	border-bottom: 3px solid #333;
	background-color: #fff;
	cursor: move;
	z-index: 0;
	}




</style>
</head>
<body onload="initPage()">
<span id="bOne" style="top:123px;left:200px;" class="chip" onmousedown="startOff('bOne')">One</span>
<span id="bTwo" style="top:223px;left:200px;" class="chip" onmousedown="startOff('bTwo')">Two</span> 


<div it="whatUp">
	<label>Left</label>
	<input id="boxOne" type="text">
	<br />
	<label>Top</label>
	<input id="boxTwo" type="text">
</div>
<div id="deBug"></div>
<div id="whatShouldBe"></div>
</body>
</html>

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 

[theniteowl]

You are reading the style property of your field as an object and then extracting the textual content (innerHTML) of that object so you would be getting the whole text string.
Try using pixelLeft and pixelTop instead.

    var k = document.getElementById(whatID).style.pixelTop;
    alert(k);

Look at offsetHeight and offsetParent for determining the objects position relative to the browser window.


At my age I still learn something new every day, but I forget two others.

 

[timgerr]

As always u rock. Thanks

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 

[timgerr]

When I use this

 var k = document.getElementById(whatID).style.pixelTop;

I am getting returned undefined... any thoughts?

Thanks for all the help,
-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 

[theniteowl]

Sorry, pixelTop and pixelLeft are IE only.
You can use style.left or style.top and it should work in either Firefox or IE.

Our environment at work is IE only so a lot of code is IE specific and non standard.

At my age I still learn something new every day, but I forget two others.

 

[theniteowl]

Oh, and to get just the value without the px use:
var k = parseInt(document.getElementById(whatID).style.top);

At my age I still learn something new every day, but I forget two others.

 

[timgerr]

Thanks for the help, I have a css question if you dont mind. I am new and this is a great learning experence. Here is my code (again)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS, DHTML &amp; Ajax | Drag and Drop</title>
<script type="text/javascript">

var object = null;
var cX =  0;
var cY = 0;

function initPage () {
	document.onmousedown = pickIt;
	document.onmousemove = dragIt;
	document.onmouseup = dropIt;
}

function pickIt(evt) {
	var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
	var evt = (evt) ? evt : ((window.event) ? event : null);
	object = document.getElementById('chip1');
	if (object) { 
		object.style.zIndex = 100;
		cX = evt.clientX - object.offsetLeft;
		cY = evt.clientY - object.offsetTop;
		return;
	}
	else {
		object = null;
		return;
	}
}
function dragIt(evt) {
	evt = (evt) ? evt : ((window.event) ? event : null);
	if (object) {
		object.style.left = evt.clientX - cX + 'px';
		object.style.top = evt.clientY - cY + 'px';
		return false;
	}
}

function dropIt() {
	if (object) {	
		object.style.zIndex = 0;
		object = null;
		return false;
	}
}

</script>
<style type="text/css">

.chip {
	position: absolute;
	padding: 8px;
	border: 1px solid #333;
	border-right: 3px solid #333;
	border-bottom: 3px solid #333;
	background-color: #fff;
	cursor: move;
	z-index: 0;
	}

#chip1 {
	top: 123px;
	left: 225px
	}

</style>
</head>
<body onload="initPage()">
<span id="chip1" class="chip">One</span> 

</body>
</html>

I have a class in this

.chip {
	position: absolute;
	padding: 8px;
	border: 1px solid #333;
	border-right: 3px solid #333;
	border-bottom: 3px solid #333;
	background-color: #fff;
	cursor: move;
	z-index: 0;
	}

that I use in the HTML

<span id="chip1" class="chip">One</span>

I want to nest divs instead of useing span, why can I do somthing like this?

#chip {
	position: absolute;
	padding: 8px;
	border: 1px solid #333;
	border-right: 3px solid #333;
	border-bottom: 3px solid #333;
	background-color: #fff;
	cursor: move;
	z-index: 0;
	}

and call it with nested div's

<div id="chip">
  <div id="chip1">
     one
  </div>
</div>

This does not work, why?
Thanks again for all the help.
-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 

[timgerr]

of why can I do this?

<div id="chip1">
	<span class="chip">One</span> 
</div>

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 

[timgerr]

Never mind... I think I can get it.

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

 

[theniteowl]

I could not tell you offhand why it does not work, I have only made minimal use of CSS for specific purposes.
The XML, HTML & CSS forum would be a better place to ask.

However, there are a lot of cross-browser issues with CSS so to be sure things will work you should validate your code.
Here for CSS:

http://jigsaw.w3.org/css-validator/

Here for HTML/XML:

http://validator.w3.org/

Have you tested your event trapping in different browsers?
IE tends to be different than the rest.

At my age I still learn something new every day, but I forget two others.