Asv3's Blog

October 28, 2009

YUI Tab and Flash Graph/Movie

Filed under: css, front-end, javascript — Tags: , , , , , , , , , , , — asv3 @ 5:38 pm

when you use YUI Tab with flash graphs/movie in them, firefox refresh the movie every time you switch away and back to the tab containing flash Graph. if you are using simple graphs it’s not noticeable, but in big movies/graphs it’s irritating. I figured out the basic problem is whenever you change position / overflow values of a div, firefox reloads all flash movies within that div. YUI Tabview have these 2 properties defined for .yui-navset .yui-content .yui-hidden class which get appended to content div when they get hidden.

Fix is to add same properties to visible tab-content div also. This doesn’t make any harm in the way Tab works. Here is the css I did add to fix this issues. But I have not tested this on browsers other than Firefox, try yourself.

.yui-navset .yui-content > div {overflow:hidden;position:static;}
.yui-navset .yui-content .yui-hidden {position:static; }

3 Comments »

  1. I’m struggling with the same issue you’ve posted; i.e., a swf embedded as content in a yui 2 tab that is being refreshed in Firefox every time the tab is clicked.

    I’ve tried using the style overrides that you’ve described. I can see with Firebug that the div containing the flash movie still retains the “position:static” attribute. So I think the style override is being properly applied.

    Do you think your idea still works? I’m using FF 3.6.13 to test.

    Comment by paulg — February 10, 2011 @ 10:32 pm

    • got to test it out, and let you know

      Comment by asv3 — February 11, 2011 @ 2:12 pm

  2. I solved the problem by borrowing some ideas from others who had similar issues with the jquery-ui tabs and flash. The solution involves setting the height and width of the swf (or any other object like acrobat) to 0, and also setting the visibility to hidden. Here are my yui-tab style declarations – which are invoked when a current tab gets the yui-hidden class injected:

    .yui-navset .yui-hidden {
    display: block !important;
    height: 0!important;
    width: 0!important;
    border:none!important;
    visibility:hidden!important;
    }

    .yui-navset .yui-hidden object, .yui-navset .yui-hidden embed {
    height: 0;
    width: 0;
    }

    Comment by paulg — February 11, 2011 @ 10:09 pm


RSS feed for comments on this post. TrackBack URI

Leave a comment

Blog at WordPress.com.