More in this section

Forums / Developing with Sitefinity / ConstrainProportions alone?

ConstrainProportions alone?

2 posts, 0 answered
  1. Bruno Michels
    Bruno Michels avatar
    125 posts
    Registered:
    16 Apr 2010
    17 May 2010
    Link to this post
    Is it possible to use ConstrainProportions from RadEditor alone, if so how?

    http://img153.imageshack.us/img153/9695/20100517121417.png

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    17 May 2010
    Link to this post
    Hello Bruno Michels,

    Here is  a sample code that you could use to create  custom size widget

    <li id="imgWidthLiContainer">
                                       <asp:Label ID="Label6" runat="server" AssociatedControlID="Width" Text="Width "></asp:Label>
                                       <asp:TextBox runat="server" ID="Width" onkeyup="adjustProportions(this.parentNode.id,'imgHeightLiContainer','1');" CssClass="imgDimension"></asp:TextBox>
                                       px
                                       <asp:RegularExpressionValidator ValidationGroup="editItem" runat="server" ValidationExpression="\d*" ControlToValidate="Width" Display="Dynamic" ID="regexV1" CssClass="validMessage" SetFocusOnError="True"><strong><asp:Literal ID="Literal22" runat="server" Text="ErrorWidth"></asp:Literal></strong></asp:RegularExpressionValidator>
                                   </li>
                                   <li class="ConstrainProportions toggle">
                                       <button id="dialogControl_ImageProperties_ConstrainButton" onclick="setConstraint(this); return false; "> </button>
                                   </li>
                                   <li id="imgHeightLiContainer">
                                       <asp:Label ID="Label10" runat="server" AssociatedControlID="Height" Text="Height"></asp:Label>
                                       <asp:TextBox runat="server" ID="Height" onkeyup="adjustProportions('imgWidthLiContainer',this.parentNode.id,'2');" CssClass="imgDimension"></asp:TextBox>
                                       px
                                       <asp:RegularExpressionValidator ValidationGroup="editItem" runat="server" ValidationExpression="\d*" ControlToValidate="Height" Display="Dynamic" ID="RegularExpressionValidator1" CssClass="validMessage" SetFocusOnError="True"><strong><asp:Literal ID="Literal24" runat="server" Text="ErrorHeight"></asp:Literal></strong></asp:RegularExpressionValidator>
                                   </li>
                                    
                               
                               <script type="text/javascript">
                                   var w = document.getElementById("imgWidthLiContainer").getElementsByTagName("input")[0].value;
                                   var h = document.getElementById("imgHeightLiContainer").getElementsByTagName("input")[0].value;
                                   var constraintFlag = true;
                                   function adjustProportions(width, height, changedField) {
                                       if (constraintFlag == true) {
                                           if (changedField == '1') {
                                               var wV = document.getElementById(width).getElementsByTagName("input")[0].value;
                                               var hN = document.getElementById(height).getElementsByTagName("input")[0];
                                               hN.value = Math.round((h * wV) / w);
                                           } else if (changedField == '2') {
                                               var wN = document.getElementById(width).getElementsByTagName("input")[0];
                                               var hV = document.getElementById(height).getElementsByTagName("input")[0].value;
                                               wN.value = Math.round((w * hV) / h);
                                           }
                                       }
                                   }
                                   function setConstraint(btn) {
                                       if (constraintFlag == true) {
                                           btn.parentNode.className = "ConstrainProportions";
                                           constraintFlag = false;
                                       } else {
                                           btn.parentNode.className += " toggle";
                                           constraintFlag = true;
                                       }
                                   }
                              </script>
     

    All the best,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
2 posts, 0 answered