Support forums » Products » Cute Editor for .NET » Re: CuteEditor 6.7 & jQuery Tabs

CuteEditor 6.7 & jQuery Tabs

Last post 07-07-2014, 1:30 PM by Kenneth. 7 replies.
Sort Posts: Previous Next

  •  07-04-2014, 3:46 PM 80363

    CuteEditor 6.7 & jQuery Tabs

    Reply Quote

    Hi,

    I see inconsistent behaviour when CuteEditor is inside a Jquery Tab. The following code reproduces the problem:

     

     <!DOCTYPE html>


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
        <script src="/js/jquery-ui-1.9.2/jquery-ui.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(function () {
                $("#tabs").tabs({});
            });
        </script>


        <form id="form1" runat="server">
        <div id="tabs">
            <ul>
                <li><a href="#tab1">Tab 1</a></li>
                <li><a href="#tab2">Tab 2</a></li>
            </ul>            
            <div id="tab1">
                <ce:Editor runat="server" ID="txtEditor1" />
            </div>        
            <div id="tab2">
                <ce:Editor runat="server" ID="txtEditor2" />
            </div>        
        </div>
        </form>
    </body>
    </html>

     

    1) When used in IE11.0.9600.17126, CE runs OK in the first tab, in the second tab it defaults to zero height.

    2) When used in FireFox 30.0, CE runs OK in the first tab, in the second tab the height seems OK, but I actually can't write anything inside.

    3) When used in Chrome 35.0.1916.153 everything is OK.

     

     

  •  07-07-2014, 9:21 AM 80364 in reply to 80363

    Re: CuteEditor 6.7 & jQuery Tabs

    Reply Quote

    Hi,

     

    It works fine for me. Can you try the example page below? does it work for you too?

     

    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Register Namespace="CuteEditor" Assembly="CuteEditor" TagPrefix="CE" %>  
    4. <!DOCTYPE html>  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7.     <title></title>  
    8.   
    9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
    10.   
    11.     <script type="text/javascript">  
    12.         $(document).ready(function () {  
    13.             $('.tabs a').click(function () {  
    14.                 switch_tabs($(this));  
    15.             });  
    16.             switch_tabs($('.defaulttab'));  
    17.         });  
    18.   
    19.         function switch_tabs(obj) {  
    20.             $('.tab-content').hide();  
    21.             $('.tabs a').removeClass("selected");  
    22.             var id = obj.attr("rel");  
    23.             $('#' + id).show();  
    24.             obj.addClass("selected");  
    25.         }  
    26.     </script>  
    27.   
    28. </head>  
    29. <body>  
    30.     <form id="form1" runat="server">  
    31.         <div id="wrapper">  
    32.             <ul class="tabs">  
    33.                 <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>  
    34.                 <li><a href="#" rel="tabs2">Tab #2</a></li>  
    35.             </ul>  
    36.             <div class="tab-content" id="tabs1">  
    37.                 <CE:Editor ID="editor1" runat="server" Text="editor1">  
    38.                 </CE:Editor>  
    39.             </div>  
    40.             <div class="tab-content" id="tabs2">  
    41.                 <CE:Editor ID="editor2" runat="server" Text="editor2">  
    42.                 </CE:Editor>  
    43.             </div>  
    44.         </div>  
    45.     </form>  
    46. </body>  
    47. </html>  
     

    Regards,

     

    Ken 

  •  07-07-2014, 10:58 AM 80365 in reply to 80364

    Re: CuteEditor 6.7 & jQuery Tabs

    Reply Quote

    Hi it does not work for me. Here's two screenshots of tab1 and tab2 with IE11. Firefox OK.

     

    Thanks,

    Natl.

     

     

     

     

  •  07-07-2014, 11:27 AM 80366 in reply to 80365

    Re: CuteEditor 6.7 & jQuery Tabs

    Reply Quote

    Hi,

     

    Please try the new one below, it should work under IE11 too.

     

    1. <%@ Page Language="C#" %>    
    2.     
    3. <%@ Register Namespace="CuteEditor" Assembly="CuteEditor" TagPrefix="CE" %>    
    4. <!DOCTYPE html>    
    5. <html xmlns="http://www.w3.org/1999/xhtml">    
    6. <head id="Head1" runat="server">    
    7.     <title></title>    
    8.     
    9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    10.     
    11.     <script type="text/javascript">    
    12.         $(document).ready(function () {    
    13.             $('.tabs a').click(function () {    
    14.                 switch_tabs($(this));    
    15.             });    
    16.             switch_tabs($('.defaulttab'));    
    17.         });    
    18.     
    19.         function switch_tabs(obj) {    
    20.             $('.tab-content').hide();    
    21.             $('.tabs a').removeClass("selected");    
    22.             var id = obj.attr("rel");    
    23.             $('#' + id).show();    
    24.             obj.addClass("selected");    
    25.         }    
    26.     </script>    
    27.     
    28. </head>    
    29. <body>    
    30.     <form id="form1" runat="server">    
    31.         <div id="wrapper">    
    32.             <ul class="tabs">    
    33.                 <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>    
    34.                 <li><a href="#" rel="tabs2">Tab #2</a></li>    
    35.             </ul>    
    36.             <div class="tab-content" id="tabs1">    
    37.                 <CE:Editor ID="editor1" runat="server" Text="editor1">    
    38.                 </CE:Editor>    
    39.             </div>    
    40.             <div class="tab-content" id="tabs2">    
    41.                 <CE:Editor ID="editor2" runat="server" Text="editor2">    
    42.                 </CE:Editor>    
    43.             </div>    
    44.         </div>    
    45.     </form>    
    46. </body>    
    47. </html>    
    48. <script type="text/javascript">  
    49. function CuteEditor_OnInitialized(editor)  
    50. {  
    51.   setTimeout(setHeight,200);  
    52. }  
    53. function setHeight()  
    54. {  
    55.     var editor1=document.getElementById("<%= editor1.ClientID %>");  
    56.     var editor2=document.getElementById("<%= editor2.ClientID %>");  
    57.     editor1.SetHeight(1000);  
    58.     editor2.SetHeight(1000);  
    59. }  
    60. </script>  
     

    Regards,

     

    Ken 

  •  07-07-2014, 12:26 PM 80367 in reply to 80366

    Re: CuteEditor 6.7 & jQuery Tabs

    Reply Quote

    Hi,

    Javascript replaced with:

     

    <script type="text/javascript">

        function CuteEditor_OnInitialized(editor) {

            alert("current height: " + editor.clientHeight);

            editor.SetHeight(200);

            alert("set height: " + editor.clientHeight);

        }

    </script>  

     

    always returns 0 on the second editor... And the second tab editor has more height than the first editor.

     

    Thanks,

    xmas79.

     

     

     

  •  07-07-2014, 12:56 PM 80368 in reply to 80367

    Re: CuteEditor 6.7 & jQuery Tabs

    Reply Quote

    Hi xmas79,

     

    You can use the way I provided to set the height for second editor, do you get any problem with it?

     

    Regards,

     

    Ken 

  •  07-07-2014, 1:07 PM 80369 in reply to 80368

    Re: CuteEditor 6.7 & jQuery Tabs

    Reply Quote

    Hi Kenneth,

    Yes I can but it sets the second editor to a different height. Specifically, it has more height than the first editor. The javascript I provided makes that clear, as for each editor initialized it is supposed to set its height to 200.

     

    Thanks,

    Xmas79.

     

  •  07-07-2014, 1:30 PM 80370 in reply to 80369

    Re: CuteEditor 6.7 & jQuery Tabs

    Reply Quote

    Hi,

     

    Yes it has about 130 px different when use in the tab, not sure why too. You can try the code below, it should shows the same height with 200px height.

     

    1. <script type="text/javascript">  
    2. function CuteEditor_OnInitialized(editor)  
    3. {  
    4.   setTimeout(setHeight,200);  
    5. }  
    6. function setHeight()  
    7. {  
    8.     var editor1=document.getElementById("<%= editor1.ClientID %>");  
    9.     var editor2=document.getElementById("<%= editor2.ClientID %>");  
    10.     editor1.SetHeight(200);  
    11.     editor2.SetHeight(66);  
    12. }  
    13. </script>  
     

    Regards,

     

    Ken 
View as RSS news feed in XML