Click event over flash object – full browser compatibility (IE, Firefox, Chrome, Safari)

Hi everybody,

It’s been a long time I’ve posted here, and it is a great pleasure to come back in the coding game.

Last week, I needed to put a flash ad in my website, a custom ad that must be redirected to the announcer website.
The flash animation doesn’t contain a link, so, I’ve naturally inserted a link that wraps my html object, but my link got none effects on browsers expected Chrome.

This is because click events (detection) over flash object are not well supported by all the browsers.

This is what I’ve written:

<a href="http://www.xxx.com/redirect.php?utm_source=xxxxx&utm_medium=display&utm_content=mega&utm_campaign=ST-20151012&url=http://www.xxx.fr" target="_blank">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="728" height="90" id="movie_name" align="middle">
        <param name="movie" value="/sites/default/files/pub/banniere_landscape.swf"/>
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="play" value="true" />
        <param name="loop" value="true" />
        <param name="scale" value="showall" />
        <param name="menu" value="true" />
        <param name="devicefont" value="false" />
        <param name="salign" value="" />
        <param name="allowScriptAccess" value="sameDomain" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="/sites/default/files/pub/banniere_seapiax_landscape.swf" width="728" height="90">
            <param name="movie" value="/sites/default/files/pub/banniere_landscape.swf"/>
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="scale" value="showall" />
            <param name="menu" value="true" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="allowScriptAccess" value="sameDomain" />
            <!--<![endif]-->
                <a href="http://www.adobe.com/go/getflash">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
                </a>
            <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
    </object>
</a>

To solve this, the better and easier way is to disbale the CSS point-events attribute, put the object element in the back with negative z-index, put the “a” link to the front, and set the object element with wmode parameter to transparent, juste like this:

<a ... style="display: block; z-index: 1;">
<object ... style="z-index: -1; pointer-events: none;">*
    <param name="wmode" value="transparent" />
</object>
</a>

This fix will work fine on Chrome and Firefox, but not in old Internet Explorer versions.
The hack for the full browser compatibility is to set a transparent html tag in front of the flash element, that will listen to the click event.
It’s as simple as this:

    <i style="display:block; height: 90px; width: 728px;  position: relative; z-index: 9; margin-top: -90px;"></i>
</a>

Now, you can click on any html object element with full browsers compatibility, including Safari.

See the full code below:

<a href="http://www.xxx.com/redirect.php?utm_source=xxxx&utm_medium=display&utm_content=pave&utm_campaign=ST-20151012&url=http://www.xxxx.fr" target="_blank" style="display: inline-block; z-index: 1; position: relative;">
    <span>
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="728" height="90" id="movie_name" align="middle" style="z-index: -1; pointer-events: none;" allownetworking="internal">
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="scale" value="showall" />
            <param name="menu" value="true" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="wmode" value="transparent" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="/sites/default/files/pub/banniere_square.swf"/>
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="/sites/default/files/pub/banniere_square.swf" width="728" height="90" style="z-index: -1; pointer-events: none;" allownetworking="internal">
                <param name="movie" value="/sites/default/files/pub/banniere_landscape.swf"/>
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="wmode" value="transparent" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
                    </a>
                    <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
    </span>
        <i style="display:block; height: 90px; width: 728px;  position: relative; z-index: 9; margin-top: -90px;"></i>
</a>
Advertisements
Click event over flash object – full browser compatibility (IE, Firefox, Chrome, Safari)

Css responsive sprites

Working with sprites in css is an excellent way to reduce http requests for images, but, when you turn your site responsive, it becomes a bit more difficult to manage with sprites.

This is a technique working with all browsers expect IE8.

.my_picture{
    //target your sprite
    background: url(my_img.jpg) no-repeat;

    //Specify it full image
    backgound-size: 100%;

    //Position of the targeted picture
    background-position: left 0 bottom x%;
    
    //Zoom in or out on the position
    width: x%;

    //Scale height by playing with padding
    padding-bottom: x%;

    //Set height to 0 because of sprite size
    height: 0;
}

Let’s analyze more this code. To target any sprite pictures easily, we have to specify sprite size to original, “100%”. We will then target a picture position from corresponding bottom, with left 0.

Because the sprite size is set to max 100%, we have to disable height, and the only option to set height is now to play with padding-bottom, in percentage too. Your image is fully responsive for now, just play with width to zoom in or out, and that’s all, you have a fully responsive css sprite.

Css responsive sprites

Horizontal and vertical centering in css

For now, to set horizontal centering, you were used to do this:

margin: 0 auto;
text-align: center;

But it doesn’t work for vertical centering. The solution is to declared a height and apply this style:

.hv-center {
    //Center the element
    margin: auto;
    
    //Make the element fills the screen
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Here, we first, centered the element with margin: auto, and then we let the element fills the screen. The result will be that the element will be centered vertically and horizontally.

That’s all 🙂

Horizontal and vertical centering in css