Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
80
Hiding WebHTMLEditor ToolBar with Client side code
posted

Using version  11.2.20112.2086 I am able to view/hide and collapse (takes up no screen space)  the ToolBar (functionality buttons above the text box) with client side Java Script and CSS (see below) . This works in IE, Firefox, and Chrome.  I have a new workstation now and an updated version of the control: 11.2.2011.2159. Firefox and Chrome still work, but with IE the Tool Bar will show and hide but  no longer collapse.  The Tool Bar is not visible but there is an empty  space which takes up screen space.  Do you what could be different with this newer version? Another thing. It works fine in the Visual Studio 2010 Dev Environment but under IIS/Web Server is does not collapse.

<script language="JavaScript" type="text/javascript">

<!--

        function HideToolBar(objName, objNameHidden) {

            var editor = iged_getById(objName);

            editor._tb.style.display = "none";

            oFormObject = document.forms[0];

            oFormObject.elements[objNameHidden].value = 0;

 

            return false;

        }

        function ShowToolBar(objName, objNameHidden) {

            var editor = iged_getById(objName);

            editor._tb.style.display = "inline";

            oFormObject = document.forms[0];

            oFormObject.elements[objNameHidden].value = 1;

 

            return false;

        }

-->

</script>

CSS:

.hide {  display:none   }

.show {  display:inline }

<asp:LinkButton ID="linkHideProgress" name="linkHideProgress"  CssClass="Detail"  CausesValidation="False" OnClientClick="returnHideToolBar('WebHTMLEditorOne','hdnProgress')"   runat="server">Hide /</asp:LinkButton>

 <asp:LinkButton ID="linkShowProgress" name="linkShowProgress" CssClass="Detail" runat="server" CausesValidation="False" OnClientClick="return ShowToolBar(' WebHTMLEditorOne','hdnProgress')"> Show editor</asp:LinkButton>

  • 25
    posted

    I wanted the toolbar to only show when the mouse is over the editor, so I did this:

    <script language="javascript" type="text/javascript" >
       function ToolbarHide(editorId, toolbarId, action) {
          var t = document.getElementById(toolbarId);
          var e = document.getElementById(editorId);
          var h = e.getAttribute(action + "Height");
          if (action == "Hide") {
             t.style.visibility = "collapse";
             t.style.display = "none";
             e.style.height = h;
          }
          else {
             t.style.visibility = "visible";
             t.style.display = "block";
             e.style.height = h;
          }
       }
    </script>

    The editor has custom attributes, which I calculated based on the height of the toolbar:
    <ighedit:WebHtmlEditor ID="WebHtmlEditor" runat="server" Width="965px" Height="241px" ShowHeight="195px" HideHeight="241px"

    In the code behind, I then set it up like this:
    we.Attributes.Add("onMouseOver", "ToolbarHide('" + we.ClientID + "', '" + we.Toolbar.ClientID + "', 'Show');");
    we.Attributes.Add("onMouseLeave", "ToolbarHide('" + we.ClientID + "', '" + we.Toolbar.ClientID + "', 'Hide');");
    we.Toolbar.Style.Add("visibility", "collapse");
    we.Toolbar.Style.Add("display", "none");

  • 24497
    posted

    Hi Brett,

    The latest version of WebHtmlEditor has extra logic which adjusts height of editor to match with height value set in server.
    It used to be that height was applied only to the outer html element (TABLE) and child elements related to editing area had height attributes equals to 100%. There was no adjustments on client and under IE that triggered overall height of editor equals to custom height plus height of toolbar and footer.
    In order to fix that, the WebHtmlEditor now generates on client approximate percentage heights of editing area (DIV) and one of its parent (TD). On client, javascript codes check instant offsets, calculate required heights and adjust heights of those DIV and TD to exact values, which allow to produce overall value of height defined by server.
    When toolbar is hidden on client (unexpected and not supported action), then in old version the height attributes of child elements used to be static (100%) and therefore they did not interact with that action. However, I guess that under IE the overall height of WebHtmlEditor with hidden toolbar was probably reduced by the height of toolbar.

    Currently the heights of html elements under IE are adjusted within the member method _ie. That action is performed only once (_htSet flag) and it adjusts heights of 2 html elements which have ids: ID+"_td_" and actual editing area.

    The best I can suggest to you, is to try use that internal method. To trigger that more than once the _htSet flag should be reset. And in order to restore original height after hide-show, original/old height of _td) element should be restored to its original value. Below is example for you.

     

    function HideToolBar(objName, objNameHidden) {
     
    var editor = iged_getById(objName);
     
    if (editor._tb.style.display == "none")
       
    return;
     
    editor._tb.style.display = "none";
     
    if (editor._ie) {
       
    var td = document.getElementById(editor.ID + "_td_");
        editor._old_td_height = td.height;
        delete editor._htSet;
       
    editor._ie(2);
      }
      oFormObject = document.forms[0];
      //oFormObject.elements[objNameHidden].value = 0;
     
    return false;
    }

    function ShowToolBar(objName, objNameHidden) {
     
    var editor = iged_getById(objName);
     
    if (editor._tb.style.display == "block")
       
    return;
     
    editor._tb.style.display = "block";
     
    if (editor._ie) {
       
    var td = document.getElementById(editor.ID + "_td_");
        td.height = editor._old_td_height;
        delete editor._htSet;
       
    editor._ie(2);
      }
      oFormObject = document.forms[0];
      //oFormObject.elements[objNameHidden].value = 1;
     
    return false;
    }