Accordion control flickering on IE6

Last post 05-10-2008 12:03 AM by msaboor. 6 replies.

Sort Posts:

  • Accordion control flickering on IE6

    06-18-2007, 3:15 AM

    I am using accordion control in side a tabpanel. Within the accordionpane i have a html table with some images and text. The panes flicker a lot whenever i click on them

    Is this a known issue with IE 6??

     

    please advise.

    Thanks.

  • Re: Accordion control flickering on IE6

    06-22-2007, 12:01 AM
    Answer

     Hi,

    Haven't seen such issue before, and I tried with the following code and it's fine. 

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
                <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                    <ContentTemplate>
                         
                     <ajaxToolkit:Accordion ID="MyAccordion" runat="server"
                AutoSize="None" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
                HeaderCssClass="accordionHeader" RequireOpenedPane="false" SelectedIndex="0"
                SuppressHeaderPostbacks="true" TransitionDuration="250">
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>
                            <a href="">1. Accordion</a></Header>
                        <Content>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
                                ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                            <asp:Button ID="Button1" runat="server" Text="Button" />
                            The Accordion is a web control that allows you to provide multiple panes and display
                            them one at a time. It is like having several where only one can be expanded at
                            a time. The Accordion is implemented as a web control that contains AccordionPane
                            web controls. Each AccordionPane control has a template for its Header and its Content.
                            We keep track of the selected pane so it stays visible across postbacks.
                        </Content>
                    </ajaxToolkit:AccordionPane>
                    <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                        <Header>
                            <a href="">2. AutoSize</a></Header>
                        <Content>
                            <p>
                                It also supports three AutoSize modes so it can fit in a variety of layouts.</p>
                            <ul>
                                <li><b>None</b> - The Accordion grows/shrinks without restriction. This can cause other
                                    elements on your page to move up and down with it.</li>
                                <li><b>Limit</b> - The Accordion never grows larger than the value specified by its
                                    Height property. This will cause the content to scroll if it is too large to be
                                    displayed.</li>
                                <li><b>Fill</b> - The Accordion always stays the exact same size as its Height property.
                                    This will cause the content to be expanded or shrunk if it isn't the right size.</li>
                            </ul>
                            <asp:Button ID="Button2" runat="server" Text="Button" />
                        </Content>
                    </ajaxToolkit:AccordionPane>
                    <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                        <Header>
                            <a href="">3. Control or Extender</a></Header>
                        <Content>
                           
            <table>
                <tr>
                    <td style="width: 3px">
                         The Accordion is written using an extender like most of the other extenders in the
                            AJAX Control Toolkit. The extender expects its input in a very specific hierarchy
                            of container elements (like divs), so the Accordion and AccordionPane web controls
                            are used to generate the expected input for the extender. The extender can also
                            be used on its own if you provide it appropriate input.</td>
                    <td>
                        <img src="images/add.gif" /></td>
                    <td>
                        <img src="images/add.gif" /></td>
                </tr>
                <tr>
                    <td style="width: 3px">
                        It also supports three AutoSize modes so it can fit in a</td>
                    <td>
                        <img src="images/add.gif" /></td>
                    <td>
                        <img src="images/add.gif" /></td>
                </tr>
                <tr>
                    <td style="width: 3px">
                    </td>
                    <td>
                        <img src="images/delete.gif" /></td>
                    <td>
                        <img src="images/edit.gif" /></td>
                </tr>
            </table>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>
                <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                </ajaxToolkit:TabPanel>
            </ajaxToolkit:TabContainer> 
        
        </div>
        </form>
    </body>
    </html>
    
      
    Sincerely,
    Raymond Wen
    Microsoft Online Community Support
  • Re: Accordion control flickering on IE6

    02-25-2008, 3:54 PM
    • Loading...
    • rblaettler
    • Joined on 12-21-2004, 12:45 PM
    • New York
    • Posts 191

    I've actually seen a lot of flickering too. Even if you try out the example from the toolkit and make all Panels the same size. If you open and close them you see the content below vibrating.

    Don't really have a solution yet.

    Remy Blaettler
    Chief of the System
    Supertext AG
  • Re: Accordion control flickering on IE6

    05-05-2008, 8:00 AM
    • Loading...
    • msaboor
    • Joined on 05-05-2008, 11:27 AM
    • Posts 4

    Hi dear friend!

    I had the same problem and only guess what solved it?!

    just set FadeTransitions="false"

    easy?!  I know you may want this fading effect but there is just one choice when you are using images and graphic in it:

    1-Use fading effect, bite the bullet and watch the flickers there .

    2-Repeat it with me: I DO NOT WANT FADING EFFECTS!

  • Re: Accordion control flickering on IE6

    05-09-2008, 5:01 PM
    • Loading...
    • rblaettler
    • Joined on 12-21-2004, 12:45 PM
    • New York
    • Posts 191

     I actually have  fading disabled :-(

    Remy Blaettler
    Chief of the System
    Supertext AG
  • Re: Accordion control flickering on IE6

    05-09-2008, 11:57 PM
    • Loading...
    • msaboor
    • Joined on 05-05-2008, 11:27 AM
    • Posts 4

    !

  • Re: Accordion control flickering on IE6

    05-10-2008, 12:03 AM
    • Loading...
    • msaboor
    • Joined on 05-05-2008, 11:27 AM
    • Posts 4

    Hi again! it didn't work! realy! so the problem should be from some thing else (I guess!). As you told you have tested the Ajax Control Toolkit sample too, ok this is another sample which has swf file in it so it must be worst than Ajax sample but it works ok in my system, try it! (of course use your own swf files) if the problem is still there so check somthing about your system.

    <p>

    <body>

    <form id="form1" runat="server">

    <div>

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    </div>

    <cc1:Accordion ID="Accordion1" runat="Server" style="direction:rtl"

    SelectedIndex="-1"

    AutoSize="None"

    FadeTransitions="false"

    TransitionDuration="250"

    FramesPerSecond="40"

    RequireOpenedPane="false"

    SuppressHeaderPostbacks="true" Width="630px" >

    <Panes>

    <cc1:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="ContentStyle" HeaderCssClass="">

    <Header>

    <asp:Image ID="Image1" runat="server" style="vertical-align:middle" ImageUrl="filmicon.jpg" Width="40px" Height="40px" />

    <asp:Label ID="Label1" runat="server" Font-Names="Tahoma" Font-Size="Small" Text="how to share files?"></asp:Label>

     

    </Header>

    <Content>

    <object width="620" height="495">

    <param name="movie" value="sharing2_demo_skin.swf">

    <embed width="620" height="495" type="application/shockwave-flash" src="sharing2_demo_skin.swf"></embed>

    </object>

     

    </Content>

    </cc1:AccordionPane>

     

     

    <cc1:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="ContentStyle" HeaderCssClass="">

    <Header>

    <asp:Image ID="Image2" runat="server" style="vertical-align:middle" ImageUrl="filmicon.jpg" Width="40px" Height="40px" />

    <asp:Label ID="Label2" runat="server" Font-Names="Tahoma" Font-Size="Small" Text="how to share printers?"></asp:Label>

     

    </Header>

    <Content>

    <object width="620" height="495">

    <param name="movie" value="Printer2_skin.swf">

    <embed width="620" height="495" type="application/shockwave-flash" src="Printer2_skin.swf"></embed>

    </object>

     

    </Content>

    </cc1:AccordionPane>

    <\p>

Page 1 of 1 (7 items)