Philadelphia, PA +267 235 3589 info@proficiencyconsulting.com

Article

AJAX / ASP.NET- Resize text in the asp:Panel with button onClick ( OnClientClick) event and ResizableControlExtender

Rating: 21286 user(s) have rated this article Average rating:2.33
Posted by: Orest, on 3/7/2007, in category ".NET Articles "
Views: this article has been read 25967 times

Recently I got a requirement to have resizable text section on my ASP.net page. First thing that got my head was to use ResizableControlExtender and that worked well for me. I could resize my text just by dragging my panel handler. Few days latter I got a new requirement to have 2 buttons on the form, one to Enrage and one to shrink my text. This article describes how I accomplished this.


Introduction

Recently I got a requirement to have resizable text section on my ASP.net page. First thing that got my head was to use ResizableControlExtender and that worked well for me. I could resize my text just by dragging my panel handler. Few days latter I got a new requirement to have 2 buttons on the form, one to Enrage and one to shrink my text. This article describes how I accomplished this.

Background

Microsoft released AJAX toolkit that has a lot of nice features and controls. One of those controls is ResizableControl. My project uses this control.

Code

As I mention before I use Microsoft sample code. We have simple panel that has some text what will be resized.


This text resizes itself to be as large as possible

						

Then we need to hook up this panel to ResizableControlExtender so we use this code


						

I think control properties are self explanatory except BehaviorID

BehaviorID: Let's you access the client-side behavior for your extender control from script code in the client, you can set this BehaviorID to simplify the process. So you need this reference because you will need to use these extender properties and functions.

OnClientResizeText - is a JavaScript function that will handle resize event. I got this from Microsoft.

function OnClientResizeText(sender, eventArgs) {
	var e = sender.get_element();
	// Make the font bigger until it's too big
	while((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) {
		e.style.fontSize = (fontSize++)+"pt";
	}
	var lastScrollWidth = -1;
	var lastScrollHeight = -1;
	// Make the font smaller until it's not too big - or the last change had no effect
	// (for Opera where e.clientWidth and e.scrollWidth don't behave correctly)
	while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) &&
	((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || 
	(e.scrollHeight != lastScrollHeight))) {
		lastScrollWidth = e.scrollWidth;
		lastScrollHeight = e.scrollHeight;
		e.style.fontSize = (fontSize--)+"pt";
	}
}
						

At this point your text can be resized with simple mouse drag event.

Now we need to do the same thing with 2 buttons - Enlarge and Shrink.

 

						

All those buttons do is initiate calls to OnClientTextGrow() and OnClientTextShrink functions respectively. These functions always return false so no post back is generated.

Now we can examine OnClientTextGrow function

function OnClientTextGrow () {
	//Get Extender control
	var rcp = $find("ResizableControlBehavior2");
	//Get Size Structure
	var size = rcp.get_Size();
	//Set new size for this control
	rcp.set_Size( {width: size.width*1.05, height: size.height*1.05} );
	return false;
}
						

Since we specified BehaviorID in our ResizableControlExtender we can use it to access controls functions. This control has a get_Size() function that will get us control size. The same way we can use set_Size() to set new control dimensions. For simplicity I simply multiply current control size * 1.05


How would you rate this article?

Questions? Comments?

Want to get started?