Question

I’m using the ajax toolkit accordion extender and I notice it performs a little ‘funky’ when I try to embed some flash in the content sections.

You can see what I have working now at : http://kristinsconfections.com/gallery.aspx. As you can see when you toggle the accordion it’s a little choppy. I’m pulling the flash slideshow from flickr so I can’t control that at all. The site is only for a friend who is trying to become a baker so it’s not high priority just highly frustrating!! Anything I can do using javascript, .net or even jquery??

Here is the exact code I am using on that page:

<cc1:Accordion ID='MyAccordion' runat='server' SelectedIndex='0'         HeaderCssClass='accordionHeader' ContentCssClass='accordionContent'         FadeTransitions='true' FramesPerSecond='40' TransitionDuration='250' AutoSize='None'>         <Panes>             <cc1:AccordionPane ID='pnlCakes' runat='server'>                 <Header><div ><span style='float:left;'>Cakes</span></div></Header>                 <Content>                     <object width='572' height='429' type='application/x-shockwave-flash'                      data='http://www.flickr.com/apps/slideshow/show.swf?v=67089'>                      <param name='flashvars' value='&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640424865%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640424865%2F&set_id=72157612640424865&jump_to=' />                     <param name='allowFullScreen' value='true' />                     <param name='movie' value='http://www.flickr.com/apps/slideshow/show.swf?v=67089' />                     </object>                 </Content>             </cc1:AccordionPane>              <cc1:AccordionPane ID='pnlCookies' runat='server'>                 <Header><div ><span style='float:left;'>Cookies</span></div></Header>                 <Content>                  <object width='572' height='429'  type='application/x-shockwave-flash'                  data='http://www.flickr.com/apps/slideshow/show.swf?v=67089'>                  <param name='flashvars' value='&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640405779%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640405779%2F&set_id=72157612640405779&jump_to=' />                 <param name='allowFullScreen' value='true' />                 <param name='movie' value='http://www.flickr.com/apps/slideshow/show.swf?v=67089' />                 </object>                 </Content>             </cc1:AccordionPane>             <cc1:AccordionPane ID='pnlCupcakes' runat='server'>                 <Header><div ><span style='float:left;'>Cupcakes</span></div></Header>                 <Content>                 <object width='572' height='429'  type='application/x-shockwave-flash'                  data='http://www.flickr.com/apps/slideshow/show.swf?v=67089'>                  <param name='flashvars' value='&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612589253131%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612589253131%2F&set_id=72157612589253131&jump_to=' />                 <param name='allowFullScreen' value='true' />                 <param name='movie' value='http://www.flickr.com/apps/slideshow/show.swf?v=67089' />                 </object>                 </Content>             </cc1:AccordionPane>         </Panes> </cc1:Accordion> 

Answer 1

I find the Ajax toolkit stuff too clunky in general. JQuery is so easy to use, has good cross browser support and extensibility that we use it in preference, and I would recommend you to do the same. There is an accordian widget in the JQuery UI suite that should fit the bill.

If having all of the Flash movies loading into the hidden divs gives you poor performance there is an event that you can hook into on change where you could load in the Flash. This is documented on the accordian page (and can easily be done with JQuery).