Toggle between display:none and display:block in parent container does'nt work

2 posts, 0 answers
  1. Kristian
    Kristian avatar
    6 posts
    Member since:
    Oct 2008

    Posted 21 Jun 2010 Link to this post

    Hi

    I have to div tags one which contains text and the other one which contains a rotator

    If I have the div which contains the rotator set to display:block then I kan toggle between the divs (display:none / display:block).

    however if the div which contains the rotator is set to display:none at startup It doesn't show when I toogle between the divs.

    Example:

        <div>
            <div class="big_plan">
                <!--Tabs-->
                <div class="LejemaalMenu">
                    <ul>
                        <li><a id="aFakta"  href='javascript:ShowFakta();' title='#'><span><span>tab text</span></span></a> </li>
                        <li><a id="aBillede" href='javascript:ShowImages();' title='#'><span><span>tab rotator</span></span></a> </li>
                    </ul>
                    <div class="LogoLejemaal"></div>
                    <div class="clear">&nbsp;</div>
                </div>
                <div id="Fakta" style="display:block;">
                    <div class="big_text">
                        <asp:Literal ID="ltBeskrivelse" runat="server"></asp:Literal>
                    </div>
                    <div class="info_big_img">
                        <h2>test testtest testtest test</h2>
                        <table class="table_c" cellpadding="0" cellspacing="0">
                            <tr class="alternativ_row">
                                <td>
                                    test test
                                </td>
                                <td class="second_c">
                                    test test
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    test test
                                </td>
                                <td class="second_c">
                                    test testtest testtest test
                                </td>
                            </tr>
                            <tr class="alternativ_row">
                                <td>
                                    test test
                                </td>
                                <td class="second_c">
                                    test testtest test
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Aconto el
                                </td>
                                <td class="second_c">
                                    <asp:Literal ID="ltEl" runat="server"></asp:Literal>,-
                                </td>
                            </tr>
                            <tr class="alternativ_row">
                                <td>
                                    test testtest test
                                </td>
                                <td class="second_c">
                                    test testtest testtest test
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    test test
                                </td>
                                <td class="second_c">
                                    test testtest testtest test
                                </td>
                            </tr>
                        </table>
                        <div class="contact_box">
                            <h2>test test</h2>
                            test testtest testtest test
                        </div>
                    </div>
                </div>
                <div id="Billeder" style="display:none">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <div class="big_img2">
                                <h3>
                                    <asp:Literal ID="ltBilledeText" runat="server"></asp:Literal></h3>
                                <img id="Billedet" runat="server" alt="" style="display:none" /><br />
                            </div>
                            <div class="Thumbs">
                                <telerik:RadRotator runat="server" ID="thumbRotator" RotatorType="ButtonsOver" Width="110" Height="450px" ItemHeight="100" ItemWidth="100" FrameDuration="1" ScrollDirection="Up,Down">
                                    <ItemTemplate>
                                        <div class="itemTemplate">
                                            <img src='<%# DataBinder.Eval(Container.DataItem, "ThumbPath") %>' class="RotatorImage" />
                                        </div>
                                    </ItemTemplate>
                                </telerik:RadRotator>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                <div class="clear">
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
        </form>
    </body>
    </html>

    <script language="javascript" type="text/javascript">
        function ShowImages() {
            $("#Fakta").hide("slow");
            $("#Billeder").show("slow");
            $("#aBillede").addClass("select");
            $("#aFakta").removeClass("select");
        }
        function ShowFakta() {
            $("#Fakta").show("slow");
            $("#Billeder").hide("slow");
            $("#aBillede").removeClass("select");
            $("#aFakta").addClass("select");
        }
    </script>


  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 23 Jun 2010 Link to this post

    Hello Kristian,

    We are aware of such a behavior in scenarios when the RadRotator control is first hidden and then shown. The solution is to call the rotator's repaint() method after the hidden DIV, which contains the rotator, is shown. Please note that in some scenarios a minimal timeout is required (sometimes 0 timeout value fixes the issue as well). An example code is shown bellow:
    function ShowImages()
    {
        $("#Fakta").hide("slow");
        $("#Billeder").show("slow");
        $("#aBillede").addClass("select");
        $("#aFakta").removeClass("select");
     
        setTimeout(function ()
        {
            var oRotator = $find("<%= RadRotator1.ClientID %>");
            oRotator.repaint();
        }, 200);
    }

    I hope this helps.

    Regards,
    Fiko
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top