AJAX Tutorials - Just another WordPress site

1. It is extremely easy to use Visual Studio to build a new page.
2. First things first lets add a new WebForm to this project and name it ResizableControl.aspx.
3. As always please remember to add a ScriptManager to the page.
   Code Block

   Ask a Question

   Download Source

   Default.aspx

   Tool Script Manager

   <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
   </asp:ToolkitScriptManager>
       

4. For this tutorial we are going to add a panel and inside of the panel we are going to add an image to be controlled.
   Code Block

   Ask a Question

   Download Source

   Default.aspx

   ASP Panel and Image.

   <asp:Panel ID="PanelImage" runat="server" CssClass="frameImage">
       <asp:Image ID="Image1" runat="server" ImageUrl="images/5516920314_70af046936_b.jpg"
           AlternateText="ASP.NET AJAX" Style="width: 100%; height: 100%;" />
   </asp:Panel>
       

5. We also styled the panel using these styles.
   Code Block

   Ask a Question

   Download Source

   Default.aspx

   Styles for the resizable control

   <style>
   <%--    /* ResizableControl */--%>
    
   .frameImage
   {
   width:130px;
   height:65px;
   overflow:hidden;
   float:left;
   padding:3px;
   }
    
   .frameText
   {
   width:100px;
   height:100px;
   overflow:auto;
   float:left;
   background-color:#ffffff;
   border-style:solid;
   border-width:2px;
   border-color:Gray;
   font-family:Helvetica;
   line-height:normal;
   }
    
   .handleImage
   {
   width:15px;
   height:16px;
   background-image:url(images/HandleHand.png);
   overflow:hidden;
   cursor:se-resize;
   }
    
   .handleText
   {
   width:16px;
   height:16px;
   background-image:url(images/HandleGrip.png);
   overflow:hidden;
   cursor:se-resize;
   }
    
   .resizingImage
   {
   padding:0px;
   border-style:solid;
   border-width:3px;
   border-color:#B4D35D;
   }
    
   .resizingText
   {
   padding:0px;
   border-style:solid;
   border-width:2px;
   border-color:#7391BA;
   }
   </style>
       

6. Now we add our Resizable Extender and set the properties and rules. 
   Code Block

   Ask a Question

   Download Source

   Default.aspx

   Resizable Control Extender

   <asp:ResizableControlExtender ID="ResizableControlExtender1" runat="server" BehaviorID="ResizableControlBehavior1"
       TargetControlID="PanelImage" ResizableCssClass="resizingImage" HandleCssClass="handleImage"
       MinimumWidth="50" MinimumHeight="26" MaximumWidth="250" MaximumHeight="170" HandleOffsetX="3"
       HandleOffsetY="3" OnClientResize="OnClientResizeImage" />
       

7. As you can see we set the minimum width of the image to 50 and a maximum height to 250. Below we set the actual functions using JavaScript. Not the most game changing JavaScript code but it does the job and works.
   Code Block

   Ask a Question

   Download Source

   Default.aspx

   JavaScript

   function OnClientClickGrow() {
       var rcp = $find('ResizableControlBehavior1');
       var size = rcp.get_Size();
       rcp.set_Size({ width: size.width * 2, height: size.height * 2 });
       return false;
   }
    
   function OnClientResizeImage(sender, eventArgs) {
       $get("lastResize").innerHTML = "Last image resize at " + (new Date()).toString();
   }
    
   var fontSize = 12;
   function OnClientResizeText(sender, eventArgs) {
       // This sample code isn't very efficient, but demonstrates the idea well enough
       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';
       }
   }
       

8. Now in a click event when the image is clicked we called the system.Drawing.Size library to activate on the Resizable click event.
   Code Block

   Ask a Question

   Download Source

   Default.aspx

   Click Event

   protected void Button2_Click(object sender, EventArgs e)
   {
       System.Drawing.Size s = ResizableControlExtender1.Size;
       ResizableControlExtender1.Size = new System.Drawing.Size(s.Width / 2, s.Height / 2);
   }
       

 <form id="form1" runat="server">
      <asp:ToolkitScriptManager ID="ToolkitScriptManager1"   runat="server">
        </asp:ToolkitScriptManager>
         
        <p><strong>Resizable image with buttons for automatic resizing</strong></p>
 
        <asp:Panel ID="PanelImage" runat="server" CssClass="frameImage">
            <asp:Image ID="Image1" runat="server" ImageUrl="images/AJAX.gif"
                AlternateText="ASP.NET AJAX" style="width:100%; height:100%;" />
        </asp:Panel>
       
        <p style="width:400px;float:left">ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications.  
            This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework.  
            In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages.  
            And because ASP.NET AJAX is an exte</p>
        <p></p>
 
        
        <script type="text/javascript">
            function OnClientClickGrow() {
                var rcp = $find('ResizableControlBehavior1');
                var size = rcp.get_Size();
                rcp.set_Size({ width: size.width * 2, height: size.height * 2 });
                return false;
            }
 
            function OnClientResizeImage(sender, eventArgs) {
                $get("lastResize").innerHTML = "Last image resize at " + (new Date()).toString();
            }
 
            var fontSize = 12;
            function OnClientResizeText(sender, eventArgs) {
                // This sample code isn't very efficient, but demonstrates the idea well enough
                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';
                }
            }
        </script>
        
        <asp:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
            BehaviorID="ResizableControlBehavior1" 
            TargetControlID="PanelImage"
            ResizableCssClass="resizingImage"
            HandleCssClass="handleImage"
            MinimumWidth="50"
            MinimumHeight="26"
            MaximumWidth="250"
            MaximumHeight="170"
            HandleOffsetX="3"
            HandleOffsetY="3"
            OnClientResize="OnClientResizeImage" />
          
    </form>

Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!

resizable.zip