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

[Kristian]

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>

[Fiko]

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