Dropdown Menu Hiding Behind <iframe>

Posted by Syazwan Hakim on June 10, 2011

“First thing come into my mind when this problem occur is the z-index issue.”

Syazwan shares tip to overcome dropdown menu hidden behind <iframe> . Syazwan is the front-end developer at Stampede.

Have you even been caught by a dropdown navigation that stubbornly hides itself? Well, I found that while it normally works fine with Firefox, this problem usually occurs in Chrome and IE browser.

Dropdown menu comparison

As you can see in the image above, the dropdown on the left works while the one on the right is hidden behind <iframe>. The first thing that came into my mind when this problem occur is the z-index property. But after some debugging, I found that it has nothing to do with z-index since the error does not occur when I changed <iframe> to <img> element.

Is This Related to CSS?

The answer is no. So, how to fix? I am using a video embedding code from YouTube as example.

<iframe width=”560″ height=”349″ src=”http://www.youtube.com/embed/rLVCjnEGrqQ” frameborder=”0″ allowfullscreen ></iframe>

To fix the hidden dropdown issue, what you need is just a simple wmode=transparent code.

What Is WMODE?

WMODE is the Window Mode setting for Flash/SWF. Its possible values are “window”, “opaque” or “transparent”.

• wmode=transparent: sets the Flash/SWF background to be transparent. This allows the background color or image of the content page behind to show through. This is required for overlay (such as jQuery Overlay) contents to show the Flash/SWF.
• wmode=opaque: hides everything on the page behind Flash.
• wmode=window: plays in its own rectangular window on a web page

How Do I Use WMODE?

What you need to do is simply add the “?wmode=transparent” at the end of src parameter and “wmode=transparent” at the end of <iframe>

<iframe width=”560″ height=”349″ src=”http://www.youtube.com/embed/rLVCjnEGrqQ?wmode=transparent” frameborder=”0″ allowfullscreen wmode=”transparent”></iframe>

Hope this helps!

Posted in Code 22 Comments »

Design Journal

Posted by Shaza Hakim on June 2, 2011

Every month, Shaza is privileged to work with wonderful clients who gives her enough rein to obsess over tiny bit of design details. Shaza is the Creative Lead at Stampede.

In my wonderful years of working as a web designer, I’ve developed a habit of browsing visuals and keeping a snapshot of anything intriguing. I snapped colors, color names, shapes, the immaculate use of white space, serifs, uncanny headings, scientific drawings, book covers, vintage packaging (hell, vintage anything!) and even hand-made circus illustrations circa 1910.

I’m not a classically-trained designer, so from the day I naively decided to be one, I rely primarily on observation and the readiness to stumble really badly and then gain a hopefully steadier footing. As a result, I rarely need to visit web design galleries prior to a design work. It’s good because all the snapshots I’ve kept steers me away from directly copying another designer’s work. It also brings about passive inspiration – the type that burns in your brain for quite a while before you find some good use for it. I’m happy to report that I have six years’ worth of this happy design baggage.

Here is a collection of a few design and UI work I did at Stampede for May 2011. Instead of a full shot, I’ve chosen bits and pieces that matters to me when observing another web designer at work.

In a way, this is a monthly design journal, but I do hope anyone who shares the same peculiarities as mine would find these useful for their very own visual musings.

Posted in Design 1 Comment »

My Favourite Dudes

Posted by Anita Zein on June 1, 2011

They executed a well-orchestrated maneuver and completed their tasks with a bang.

Anita Zein is very proud of the team and she wants the entire world to know. Anita is the Project Manager at Stampede.

There’s nothing more fun for a manager than to see the crew she led successfully meets their target. And while having much fun too.

A project requires many things: fulfillment of responsibilities, good cooperation, effective communication and the awareness to be your own leaders. For the past one year, Stampede has been actively managing post-development tasks for one of our biggest accounts. As with other projects, there were stumbling blocks. But more recently and particularly today, everyone shines at meeting the demands of their. They executed a well-orchestrated maneuver and completed their tasks with a bang.

Mothers, Lock Your Daughters

We’re very proud of our three young dashing crew – Syazwan Hakim, See Guo Lin and Mujib Jazmin. Between the three of them, they tackled updates on a severely limited system and resolved them instantly. On a live server.

GL, Mujib and I received requests from the client and quickly distribute the tasks to the expert in charge. Mujib handled anything design-related, Syazwan did his front-end magic then GL followed through with the real deal coding. We then reported progresses and completion to the client on the same hour within minutes.

This is definitely my dream team. Their young spirits and friendship are invaluable to me. We had so much jokes and fun during the session, it was hilarious. Cherry on top – I received word that the client was very pleased with our response and speed. He skyped me kind words until he ran out of praise.

I’m surrounded by three extraordinary men in the team. Yeah I’m happy.

(picture by Ken Ludwig)

Posted in Team 2 Comments »