Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Shrinking a box from the corners 1

Status
Not open for further replies.
Light777

Light777

Programmer
May 15, 2003
32
0
0
US
I want to be able to shrink a box from the corners inward dynamically when a button is pressed. Here is my code so far:

function div_collapse_from_corners(shrinkingbox)
{
var test = open('test.htm', 'test', 'width=200, height=200')
styleObj = document.getElementById(shrinkingbox).style
test.document.write(styleObj.left+1)
test.document.write(styleObj.top)
test.document.write(shrinkingbox)
while((styleObj.width >= 1) || (styleObj.height >= 1))
{
styleObj.top = styleObj.top + 1
styleObj.left = styleObj.left + 1
styleObj.width = styleObj.width - 2
styleObj.height = styleObj.height - 2
}
}

And I call it like this:

<img onclick=&quot;div_collapse_from_corners('box');&quot; ....>

New window opens up with:

1box

Any suggestions? I am using percentages for all DIV parameters, left, top, width, and height if that makes any difference.
 
Sort by date Sort by votes
There are a few things that need changing.

You must ensure that your box/div has all 4 properties set on it: left, top, width, and height. The browser cannot automatically detect these.

You also need to strip off the trailing unit (&quot;px&quot;, &quot;%&quot;, &quot;em&quot;, etc) from the value each time you use it. I use parseInt for this.

Try this code:
Code: 
<HTML>
<HEAD>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
function div_collapse_from_corners(shrinkingbox)
{
	var test = open('test.htm', 'test', 'width=200, height=200')
	styleObj = document.getElementById(shrinkingbox).style;

	var _left = parseInt(styleObj.left);
	var _top = parseInt(styleObj.top);
	var _width = parseInt(styleObj.width);
	var _height = parseInt(styleObj.height);

	test.document.write('<BR>left:' + _left);
	test.document.write('<BR>top:' + _top);
	test.document.write('<BR>width:' + _width);
	test.document.write('<BR>height:' + _height);
	test.document.write('<BR>obj:' + shrinkingbox);

	while((_width >= 2) && (_height >= 2))
	{
		styleObj.top = _top + 1
		styleObj.left = _left + 1
		styleObj.width = _width - 2
		styleObj.height = _height - 2

		_left = parseInt(styleObj.left);
		_top = parseInt(styleObj.top);
		_width = parseInt(styleObj.width);
		_height = parseInt(styleObj.height);
	}            
}

</SCRIPT>
</HEAD>
<BODY>

<input type=&quot;button&quot; value=&quot;Click me!&quot; onClick=&quot;div_collapse_from_corners('box');&quot;>
<div id=&quot;box&quot; style=&quot;position:relative;width:250px;height:250px;top:50;left:0;background-color:#ff0000;&quot;>Box!</div>

</BODY>
</HTML>

As you can see, however, the box now shrinks instantly, as there is no delay inbetween changing each value. This you would have to use setTimeout or setInterval for:

Code: 
<HTML>
<HEAD>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--

	function shrinkMore(boxID)
	{
		var boxStyleObj = document.getElementById(boxID).style;
		var _left = parseInt(boxStyleObj.left);
		var _top = parseInt(boxStyleObj.top);
		var _width = parseInt(boxStyleObj.width);
		var _height = parseInt(boxStyleObj.height);

		if ((_width >= 4) && (_height >= 4))
		{
			boxStyleObj.top = _top + 2
			boxStyleObj.left = _left + 2
			boxStyleObj.width = _width - 4
			boxStyleObj.height = _height - 4

			setTimeout('shrinkMore(\'' + boxID + '\')', 50);
		}            
	}

	function shrinkBoxFromCorners(boxID)
	{
		var windowHandle = open('', 'debugWindow', 'width=200,height=200');
		var boxStyleObj = document.getElementById(boxID).style;
	
		windowHandle.document.open();
		windowHandle.document.write('<BR>left:' + boxStyleObj.left);
		windowHandle.document.write('<BR>top:' + boxStyleObj.top);
		windowHandle.document.write('<BR>width:' + boxStyleObj.width);
		windowHandle.document.write('<BR>height:' + boxStyleObj.height);
		windowHandle.document.write('<BR>obj:' + boxID);
		windowHandle.document.close();

		shrinkMore(boxID);
	}

</SCRIPT>
</HEAD>
<BODY>

<input type=&quot;button&quot; value=&quot;Click me!&quot; onClick=&quot;shrinkBoxFromCorners('myBox');&quot;>
<div id=&quot;myBox&quot; style=&quot;position:relative;width:250px;height:250px;top:50;left:0;background-color:#ff0000;&quot;>Box!</div>

</BODY>
</HTML>

I think that should do exactly what you want.

Dan




 
Upvote 0 Downvote
Ok, now I get NaN as the values for all of the properties. What does this mean?
 
Upvote 0 Downvote
I think it means you probably transposed the code incorrectly.

Did you copy and paste the code above exactly as-is? If so, did you then go on to modify it?

Dan
 
Upvote 0 Downvote
I copied it exactly first using only the shrinkMore function because I didn't need to show the testing of it, that is only for myself to try to figure out what is wrong. Nothing happened so I put in a debug window into the function and I get NaN as the values for parseInt(boxStyleObj.left) and top and width and height.
 
Upvote 0 Downvote
I did a quick search to find out what NaN meant and it is short for Not-a-Number. Seeing as the first code that I wrote came up with no value at all for StyleObj.left then this leads me to believe that it is not pulling the correct object or properties for this object. Is there any way to test that I am getting the object?

If I just do a write of StyleObj it comes up with [object]. I have checked the spelling of the Div ID that I am sending to the function and that is correct.

The ID's are created using inline CSS however, the CSS will be copied over to be an external style sheet before the project is completed. I don't know if this makes a difference or not, but it is a variable in the whole equation.
 
Upvote 0 Downvote
Having the CSS in an external stylesheet will make no difference at all.

You can't just cut out whole functions and expect the code to continue to work!

If you don't want the debug info, remove the shrinkBoxFromCorners function, and change your input button code to read:

Code: 
<input type=&quot;button&quot; value=&quot;Click me!&quot; onClick=&quot;shrinkMore('myBox');&quot;>

If this still doesn't work, then we'll go from there.

Dan
 
Upvote 0 Downvote
That is actually what I was doing. I called the shrinkMore function from the start like that. The problem I am having is getting the number from the object. I was able to solve this problem using the offsetLeft and offsetTop and offsetWidth and offsetHeight commands. They are not W3 standard, but they work.

I'm gonna give you a star for the first post you gave because you gave me a lot of good ideas within your code, and for that I thank you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
154
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
155
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
183
xwb
xwb
Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
270
Mike Lewis
Mike Lewis
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
139
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top