Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Editor / Resizing images proportional in Internet Explorer

Resizing images proportional in Internet Explorer

Article Info

Rating: 1

Article information

Article relates to

 RadEditor for ASP.NET AJAX
 Telerik.Web.UI

Created by

 Rumen Zhekov

HOW-TO
Resize images proportional in Internet Explorer

SOLUTION
The solution below demonstrates how to implement resizing functionality of an image placed in the editor's content area to be always proportional:

<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">  
    <Content><img src="http://demos.telerik.com/aspnet-ajax/editor/Img/productLogoLight.gif"/></Content>  
</telerik:radeditor>   
<script type="text/javascript">  
function OnClientLoad(editor, args)  
{    
    // Makes image resizing always proportional    
    editor.attachEventHandler("oncontrolselect", function()   
    {    
        window.setTimeout(function()   
        {    
           alert("oncontrolselect");  
            var selElem = editor.getSelection().getParentElement();    
            if (selElem.tagName == "IMG")   
            {    
                //Store current width and height            
                currentWidth = selElem.offsetWidth;    
                currentHeight = selElem.offsetHeight;    
                //alert("I selected an Image");    
 
                //Possible to resize, so attach eventhandler    
                selElem.onresizeend = function(e)   
                {    
                    //alert("I was resized");    
                    resizedWidth = selElem.offsetWidth;    
                    resizedHeight = selElem.offsetHeight;    
 
                    if (resizedWidth > resizedHeight)  
                    {    
                        resizedHeight = (resizedWidth * currentHeight) / currentWidth;    
                    }    
                    if (resizedWidth < resizedHeight)   
                    {    
                        resizedWidth = (resizedHeight * currentWidth) / currentHeight;    
                    }    
 
                    selElem.style.width = resizedWidth;    
                    selElem.style.height = resizedHeight;    
                     
                };    
            }    
        }, 100);    
    });   
}  
</script> 

Due to the lack of oncontrolselect event in FireFox, there does not seem to be an approach that can make things work as needed there. Hopefully, the FireFox team will eventually add this useful event to the browser's implementation (similar to the lack of onpaste event in FF2, which was introduced in FF3).

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.