1,105,585 Community Members

drop down menu over flash

Member Avatar
eihd
Newbie Poster
4 posts since Jul 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I want my drop down menu to display over a flash. It's something like this .

What methods do you use to solve this problem? Any help will be appreciated much.

Member Avatar
Lafinboy
Junior Poster
166 posts since Jul 2004
Reputation Points: 4 [?]
Q&As Helped to Solve: 7 [?]
Skill Endorsements: 0 [?]
 
1
 

Adding the following parameter to your flash object:

<param name=wmode value="transparent">

should work for most browsers.

Member Avatar
eihd
Newbie Poster
4 posts since Jul 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Thank you. I will give it a try:idea:

Member Avatar
FC Jamison
Posting Pro in Training
447 posts since Jun 2004
Reputation Points: 16 [?]
Q&As Helped to Solve: 21 [?]
Skill Endorsements: 0 [?]
Team Colleague
 
0
 

You could also try absolute positioning of the menu using CSS.

Theoretically, items positioned with CSS are stacked on top of items that are not positioned with CSS.

Member Avatar
Sanguals
Newbie Poster
5 posts since Jul 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

:rolleyes:Flash menu? I dont quite understand what you mean, but i recommend you to try Sothink Tree Menu. They wrote flash programmes, aslo TreeMenu and DHTMLMenus. So i guess they are profetional in displaying drop down menu in a flash.

Member Avatar
havilah
Newbie Poster
20 posts since May 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Adding the following parameter to your flash object:

<param name=wmode value="transparent">

should work for most browsers.

Will this also help me display and image on my page while my flah loads? If not, how can I achieve that? Thanks in advance.

Member Avatar
katarey
Junior Poster
167 posts since Jul 2005
Reputation Points: 27 [?]
Q&As Helped to Solve: 23 [?]
Skill Endorsements: 0 [?]
 
0
 

I want my drop down menu to display over a flash. It's something like this .

What methods do you use to solve this problem? Any help will be appreciated much.

http://www.daniweb.com/techtalkforums/thread15188.html

hi

To edit an existing HTML page, add the WMODE parameters to the HTML code.

1. Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

2. Add the following parameter to the EMBED tag:

wmode="transparent"

:idea: :)

This Will Work With All Browsers

Rahul

http://www.katarey.com

Member Avatar
manishbhatra
Newbie Poster
2 posts since Jul 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Thanks a lot. It is working.

Manish

Member Avatar
flashlass
Newbie Poster
2 posts since Oct 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

http://www.daniweb.com/techtalkforums/thread15188.html

hi

To edit an existing HTML page, add the WMODE parameters to the HTML code.

1. Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

2. Add the following parameter to the EMBED tag:

wmode="transparent"

:idea: :)

This Will Work With All Browsers

Rahul

http://www.katarey.com

Thank you so much! I had just the first param tag in & it didn't work. Adding that line to the embed tag did it. I can't tell you how much I appreciate this. THANK YOU!!!

Member Avatar
aviralmsharma
Newbie Poster
1 post since Nov 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Thank you so much! I had just the first param tag in & it didn't work. Adding that line to the embed tag did it. I can't tell you how much I appreciate this. THANK YOU!!!

YUP YUP YUP... IT WORKS...

With few parameters, here is how the code looks like

<!-- CODE STARTS -->
<object width="834" height="300">
  <param name="movie" value="images/home_anim.swf">
  <param name="wmode" value="transparent">
  <embed src="images/home_anim.swf" wmode="transparent" width="834" height="300">
  </embed>
</object>
<!-- CODE ENDS -->

Thanks to everyone include flashass for their contribution :)

Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
0
 

Note that the embed tag is deprecated.

Member Avatar
colweb
Posting Whiz
316 posts since Nov 2007
Reputation Points: 13 [?]
Q&As Helped to Solve: 53 [?]
Skill Endorsements: 0 [?]
 
0
 

And remember, any method to get anything over a flash will not work when your page is opened under Unix or Linux. The flash plugin for Linux simple does not work correctly.

Member Avatar
samael696
Newbie Poster
2 posts since Sep 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

It works for me in Safari, Firefox, Camino and Chrome, but it won't work in Internet Explorer! I really need this to work in Explorer, not because I like it, but because I have to! Help please?

Member Avatar
samael696
Newbie Poster
2 posts since Sep 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Ok, this is driving me insane.
Here is my code:

<html>
<head>
<title>Ocean Ridge - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css"><script type="text/javascript" src="flashfix.js"></script>
<!--
body {
	background-image: url(images/ORSC_G_BKG.jpg);
	background-repeat: repeat-x;
	background-color: #D9EFEF;
}
body,td,th {
	font-family: Verdana;
	font-size: 11px;
	color: #FFF;
}
a {
	font-family: Verdana;
	font-size: 11px;
	color: #FFF;
}
a:visited {
	color: #CCC;
}
a:hover {
	color: #CCC;
}
a:active {
	color: #CCC;
}

ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position:absolute;left:0px;top:30px;}
ul.cssMenu ul ul{position:absolute;left:100%;top:0px;}
ul.cssMenu,ul.cssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 0px 0px 0px;
	background-image: url(images/drop.png);
	background-repeat:repeat;
	border-color:#808080;
	border-width:0px;
	}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
	display:block;
	zoom:1;
	height:30px;
	float: left;
}
ul.cssMenu ul{
	width:200px;
}
ul.cssMenu li{
	display:block;
	margin:0px 0px 0px 0px;
	font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
outline-style:none;
}
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	horizontal-align:center;
	text-align:center;
	text-decoration:none;
	letter-spacing:1px;
	padding: 0px 0px 0px 0px;
	font:12px Verdana;
	color: #FFFFFF;
	text-decoration:none;
	cursor:default;
}
ul.cssMenu span{
	overflow:hidden;
}
ul.cssMenu li {
	float:left;
}
ul.cssMenu ul li {
	float:none;
}
ul.cssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.cssMenu li.sep{
	text-align:left;
	padding:10px;
	line-height:0;
	height:100%;
}
ul.cssMenu li.sep span{
	float:none;	
	padding-right:10px;
	width:15px;
	height:100%;
	display:inline-block;
	background-color:#808080;	background-image:none;}
ul.cssMenu ul li.sep span{
	width:100%;
	height:3px;
}
ul.cssMenu li:hover{
	position:relative;
}
ul.cssMenu li:hover>a{
	background-image: url(images/dropOver.png);
	font:12px Verdana;
	color: #FFFFFF;
	text-decoration:none;
}
ul.cssMenu li a:hover{
	position:relative;
	background-image: url(images/dropOver.png);
	font:12px Verdana;
	color: #FFFFFF;
	text-decoration:none;
}
ul.cssMenu li.dis a {
	color: #557D4F !important;
}
ul.cssMenu img {border: none;float:left;_float:none;margin-right:0px;width:23px;
height:23px;
}
ul.cssMenu ul img {width:23px;
height:23px; background-color:
}
ul.cssMenu img.over{display:none}
ul.cssMenu li.dis a:hover img.over{display:none !important}
ul.cssMenu li.dis a:hover img.def {display:inline !important}
ul.cssMenu li:hover > a img.def  {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block}
ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none}
ul.cssMenu span{
	display:block;
	background-image:url(./images/arrv_white.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:0px;}
ul.cssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.cssMenu ul li:hover > a span{	background-image:url(./images/arr_white.gif);}
ul.cssMenu table a:hover span,ul.cssMenu table a:hover a:hover span,ul.cssMenu table a:hover a:hover a:hover span{background-image:url(./images/arr_white.gif)}
ul.cssMenu table a:hover table span,ul.cssMenu table a:hover a:hover table span{background-image:url(./images/arr_black.gif)}
ul.cssMenu li.cssMenui0 {
width:150px;
height:22px; padding:0px; border:0px; background-color:#faa61a;
}
ul.cssMenu li a.cssMenui0{
height:100%;
background-image: url(images/btn2.jpg);
border-width:0px;
font:normal 12px Verdana;
color:#fff;
}
ul.cssMenu li a.cssMenui0:hover{
background-image: url(images/btn3.jpg);
font:normal 12px Verdana;
color:#eee;
}
 ul.cssMenum0 {
background-color: #F9A61A;
border-width:0px;
padding:0px 0px 0px 0px;
}
 ul.cssMenum0>li>a {
padding:8px 10px 0px 10px;
}
 ul.cssMenum0 a {
padding:5px 8px 8px 10px;
}
 ul.cssMenum0 ul a {
padding:5px 8px 8px 10px;
}
 ul.cssMenum0>li {
margin:0px 0px 0px 0px;
}
 ul.cssMenum0 li {
margin:0px 0px 0px 0px;
}
 ul.cssMenum0 li li {
margin:0px 0px 0px 0px;
}

body {
	background-color: #D9EFEF;
	background-image: url(images/ORSC_G_BKG.jpg);
	background-repeat: repeat-x;
}
-->
</style>
</head>
<body bgcolor="#D9EFEF" text="#FFFFFF" link="#FFFFFF" vlink="#CCCCCC" alink="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="padding-left:150px">
<!-- Save for Web Slices (ORSC_HM_1b.psd) -->
<table width="1008" height="731" border="0" cellpadding="0" cellspacing="0" id="Table_01">
	<tr>
		<td colspan="4" background="images/index_01.png" width="1008" height="48" align="bottom">
	  </td>
	</tr>
	<tr>
		<td rowspan="3" background="images/index_02.png" width="18" height="648" align="right">
	  </td>
		<td>
			<img src="images/index_03.png" width="486" height="143" alt=""></td>
		<td>
			<img src="images/index_04.png" width="486" height="143" alt=""></td>
		<td rowspan="3" background="images/index_05.png" width="18"align="left">
	  </td>
	</tr>
	<tr>
		<td colspan="2" height="30" width="972px" bgcolor="#faa61a" style="border:none; padding-left:52px; z-index:3000" valign="baseline"><ul class="cssMenu cssMenum0">
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>LOCATION</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
		      <ul class="cssMenum">
		        <li class="cssMenui"><a class="cssMenui" href="#">ISLAND OVERVIEW</a></li>
		        <li class="cssMenui"><a class="cssMenui" href="#">GETTING HERE</a></li>
		        <li class="cssMenui"><a class="cssMenui" href="#">ATTRACTIONS</a></li>
	          </ul>
		      
	        <li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>OWNERSHIP</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	          <ul class=" cssMenum">
	            <li class=" cssMenui"><a class="  cssMenui" href="#">LOT DETAILS</a></li>
	            <li class=" cssMenui"><a class="  cssMenui" href="#">MARINA</a></li>
	            <li class=" cssMenui"><a class="  cssMenui" href="#">CONSTRUCTION</a></li>
	            <li class=" cssMenui"><a class="  cssMenui" href="#">RENTAL PROGRAM</a></li>
	            <li class=" cssMenui"><a class="  cssMenui" href="#">KAYU MAYA
	            <![if gt IE 6]>
	            </a>
	              <![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
              </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#">VACATION RENTAL</a></li>
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#">IMAGE GALLERY</a></li>
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#">ABOUT EDI</a></li>
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#">CONTACT US</a></li>
</ul>
	  </td>
  </tr>
	<tr> 
		<td valign="top"><div style="z-index:-3000">
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="486" height="468">
<param name="allowScriptAccess" value="sameDomain" />
<param name=movie value="images/ORSC_HM_ANIM.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="images/ORSC_HM_ANIM.swf" type="application/x-shockwave-flash" quality="high" width="486" height="468" wmode="opaque" allowScriptAccess="sameDomain"></embed>
</object>
		</div></td>
	  <td background="images/index_08.png" align="left" valign="top" style="z-index:-30; background-position:bottom; background-repeat:no-repeat; background-color:#1fbdbe"><p><img src="images/ORSC_HM_Head.png" width="286" height="99" style="padding-left:70px; padding-top:100px">
	  </p>
	  <p style="padding-left:90px; line-height:20px">Own a piece of this one-of-a-kind paradise<br>
	    at Ocean Ridge on Staniel Cay. Only a few<br>
	    magnificent residential properties are located on<br>
	    this exceptional ridge. Owners enjoy sweeping<br>
	    views in every direction, their own pink sand<br>
	    beach, and a slip at the private marina. Staniel<br>
	    Cay is the perfect destination offering the ideal<br>
	    balance of unspoiled tropical beauty and easy<br>
	    access. A 3,000-foot runway accommodates<br>
      private planes, charters and daily air service.</p></td>
	</tr>
	<tr>
		<td colspan="4" background="images/index_09.png" width="1008" height="42" align="top">
	  </td>
	</tr>
</table><img src="images/ORSC_HM_Item.png" border="0" style="position:absolute; left:570px; top:480px; z-index:50; visibility: visible; overflow: hidden;">
<!-- End Save for Web Slices -->
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Every single browser shows it perfectly except for stupid Internet Explorer 8.
Here is the actual link: http://www.jbngraphics.com/OR/index.html

PLEASE TELL ME HOW TO DISPLAY THE CSS ON TOP OF THE FLASH WITH STUPID EXPLORER!!

Member Avatar
colweb
Posting Whiz
316 posts since Nov 2007
Reputation Points: 13 [?]
Q&As Helped to Solve: 53 [?]
Skill Endorsements: 0 [?]
 
0
 

Well, I have taken a quick look at it, and it seems to have a lot of errors in it. As expected, in Firefox 3 under Linux it doesn't work, and the menu is corrupted.

Under MS-Windows it works in Firefox (2 and 3) but it is a complete mess in Internet Explorer 6.

The web developer tools (add on) in Firefox gives the following warnings and errors:

Warning: Selector expected. Ruleset ignored due to bad selector.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 5

Warning: Unknown property 'zoom'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 47

Warning: Unknown property 'horizontal-align'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 65

Warning: Error in parsing value for property 'display'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 99

Warning: Unknown property '_float'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 124

Warning: Expected color but found '}'. Error in parsing value for property 'background-color'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 130

Error: swfobject is not defined
Source File: http://www.jbngraphics.com/OR/index.html
Line: 277

Warning: Error in parsing value for property 'display'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 0

Don't have IE 8 installed here (why drive a 10 year old car when you can drive in a new one for free), but will look at it tomorrow (timezone GMT+1) at my work.

Member Avatar
Synmedia
Newbie Poster
2 posts since Sep 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Heya guys and gals stumbled upon here with the same question and it was already answered so and extra thanks from newbie

Member Avatar
pravin_zd
Newbie Poster
1 post since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

A lot of thanks to teach me how to i use html drop down menu over flash movie clip thanks
i hope everytime u help me to this type of probleme

Member Avatar
ravosavo
Newbie Poster
2 posts since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

wmode did not work for me. The syntax given seemed wrong( /> not > to close the statement). I tried every possible permutation of the syntax.
What DID work was using css to create a class that gave the Flash object a z- index of 100 (or any number higher than the page containers and lower than the drop-down menu) The drop downs' usually have a z-index in the thousands so they're always on top. Flash seems to 'float' to the surface unless you pin it down.
So, if you're like me, and find this thread, but it doesn't help, try the css trick.

Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
0
 

Why would anyone want a clickable link on top of a moving background? That seems like it would be very hard for the user to see or use.

This definitely does not meet the new requirements in some countries that websites be accessible to the disabled (including dyslexia). Your site may be blocked in such countries.

Member Avatar
ravosavo
Newbie Poster
2 posts since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Why would anyone want a clickable link on top of a moving background? That seems like it would be very hard for the user to see or use.

This definitely does not meet the new requirements in some countries that websites be accessible to the disabled (including dyslexia). Your site may be blocked in such countries.

It's OVER, not on top of. And the drop down might extend on the flash, temporarily when the menu is in use. Never seen that before?

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article