This is a migrated thread and some comments may be shown as answers.

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

1 Answer 52 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Kristian
Top achievements
Rank 1
Kristian asked on 21 Jun 2010, 12:30 PM
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>


1 Answer, 1 is accepted

Sort by
0
Fiko
Telerik team
answered on 23 Jun 2010, 07:49 AM
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
Tags
Rotator
Asked by
Kristian
Top achievements
Rank 1
Answers by
Fiko
Telerik team
Share this question
or