Blog

Tagged by 'flash'

  • I’m using a jQuery plugin called “Isotope” to nicely output a mixture of news articles and advertising banners to a page.

    I came across a small issue when using advertising banner’s in Flash format. For some reason, Flash content displayed randomly and mouse-clicks were not registered. This issue only seemed to only occur in Firefox. I couldn’t replicate this issue on other browsers.

    Thankfully, only one additional line of code  needed to be added when when initially setting the Isotope plugin options:

    $('#wall').isotope({
        itemSelector: '.box',
        animationEngine: 'css,
        layoutMode: 'masonry',
        transformsEnabled: false //Disable transformations
    });
    

    The following example helped me further in resolving my issue: http://isotope.metafizzy.co/tests/flash.html

  • I needed a flash movie to displayed at 100% in my web page. I thought this will be a simple job. Just set the height and width attributes within my object tag to “100%”. This method worked fine for Internet Explorer but failed in Firefox. Firefox seemed to ignore my size settings that contained a percentage. After a lot of time wasting, I confirmed that Firefox does not like its height and width attributes measured in percentages and only likes measurements in pixels.

    In order to fix this problem I needed to do the following:

    1. Write some JavaScript just for Firefox so that it will get the users screen resolution in pixels and add this into my object tag that contained my Flash movie.
    <script type="text/javascript" language="javascript">
            if (window.innerWidth)
            {
                // Get screen width and height minus scroll bars
                var width = window.innerWidth - 24;
                var height = window.innerHeight - 24;           
                    
                //Find Flash movie
                var FlashMovie = document.getElementById('FlashMovie');           
    
                //Only assign width and height if browswer is not Internet Explorer
                if (navigator.appName.indexOf('Internet Explorer') == -1)
                {
                    FlashMovie.height = height;
                    FlashMovie.width = width;        
                }
            }       
    </script>
    
    1. Keep the height=”100%” width=”100%” object attributes. This will be needed for Internet Explorer.
    <object id="FlashMovie" type="application/x-shockwave-flash" height="100%" width="100%" data="myflash.swf">
        <param name="movie" value="myflash.swf" />
        <param name="wmode" value="transparent" />
        <p>
            No flash message
        </p>
    </object>
    

    If anyone has any better idea on how to solve this problem. Please comment. Thanks!