PDA

View Full Version : URGENT! Need help with dd menu getting hidden underneath object



dynamic_eagle
08-16-2010, 11:25 AM
1) Script Title: AnyLink JS Drop Down Menu v2.2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: I'm having problems with AnyLink JS Drop Down Menu v2.2. I have it set up exactly how I want it visually but in some browsers (IE + google chrome that I know of) the menu contents are getting hidden behind an embedded vimeo object. In firefox it displays fine.

The site is: www.dev.mattbarwickfilms.com and the drop down menu is under 'portfolio'

Any help is greatly appreciated as the site is supposed to launch in under 2 days!

Cheers :)

jscheuer1
08-16-2010, 02:30 PM
You need wmode transparent. Replace:


<object width="700" height="390"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11918177&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=B89574&amp;fullscreen=1&amp;autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11918177&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=B89574&amp;fullscreen=11&amp;autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="390"></embed></object>

with:


<object width="700" height="390"><param name="allowfullscreen" value="true" /><param name="wmode" value="transparent" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11918177&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=B89574&amp;fullscreen=1&amp;autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11918177&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=B89574&amp;fullscreen=11&amp;autoplay=1" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" width="700" height="390"></embed></object>

Note: The wmode has been added to both the object and the embed tag.

dynamic_eagle
08-17-2010, 12:36 AM
that's wonderful John - thanks so much. fixed it straight away.

is there any way i can make the drop down menu semi transparent?

in anylinkmenu.css I tried adding:

filter:alpha(opacity=60);
opacity:0.6;
width: 140px; /* default width for menu */

but it slips in behind the video.

jscheuer1
08-17-2010, 01:47 AM
Works fine here:


.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border-bottom-width: 0;
font: normal 11px century gothic;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #f9f9f9;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.60;
width: 140px; /* default width for menu */
}

Perhaps, when you made the change, you reverted to a version without the wmode transparent.

dynamic_eagle
08-17-2010, 01:54 AM
strange. the dropdown menu is showing as semi opaque over the info text, but as soon as I go under 100% opacity it goes underneath the video embed.

i have the wmode transparent for the object and have cleared the cache.

any other suggestions? Thanks for your help thus far!

jscheuer1
08-17-2010, 02:19 AM
Well, as I say, it works here. When something like that happens (a different result on my end than what the person asking the question sees), I can never be 100% certain of the cause.

Best thing would be if you were to put up a demo of the problem. It probably should be a separate page (like for example, partial_opacity.htm), just to show what your exact code is.

Do that and give me a link to it, and I'll see if I can figure it out. But, as I say, this (demo - http://home.comcast.net/~jscheuer1/side/vid_1_h.htm):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>wedding videos byron bay / gold coast / brisbane / matt barwick films</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
A:link { text-decoration: none; color: #B89574}
A:visited { text-decoration: none; color: #B89574}
A:hover { text-decoration: none; color: #804717}
<!--
.style1 {
font-family: "Century Gothic";
font-size: 12px;
color: #B89574;
}
.style2 {
font-family: "Century Gothic";
font-size: 10px;
}
.style3 {font-size: 11px}
-->
</style>
<!-- <link rel="stylesheet" type="text/css" href="anylinkmenu.css" /> -->
<style type="text/css">
.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: none;
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border-bottom-width: 0;
font: normal 11px century gothic;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #f9f9f9;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.60;
width: 140px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: regular;
text-indent: 5px;
}

.anylinkmenu a:hover{ /*hover background color*/
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}



/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
visibility: hidden;
}
.coupleinfo {
font: small-caps 13px "Century Gothic";
color: #000000;
}

</style>
<script type="text/javascript" src="menucontents.js"></script>

<script type="text/javascript" src="anylinkmenu.js">

/***********************************************
* AnyLink JS Drop Down Menu v2.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")

</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FCFFF1;
}
.style4 {
font-size: 12px;
font-style: italic;
font-family: "Century Gothic";
color: 804717;
}
.style5 {
font-size: 12px;
font-family: "Century Gothic";
color: 804717;
}
.quote {
font: italic 12px "Century Gothic";
color: #804717;
}
-->
</style>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15463819-2']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</head>

<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="15">
<tr>
<td><div align="right"><a href="index.htm"><img src="images/logo.png" width="200" height="16" border="0"></a></div></td>
</tr>
</table></td>
</tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="15">
<tr>
<td><div align="center" class="style1">A PROFILE / <a href="http:www.mattbarwickfilms.com/blog" target="_blank">BLOG</a> / <a class="menuanchorclass" rel="anylinkmenu1">PORTFOLIO</a> / <a href="kind-words.htm">KIND WORDS</a> / INSPIRATIONS / RATES / CONTACT / SUGGESTIONS

</div></td>
</tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="13%" align="center" valign="middle"><div align="center"></div></td>
<td width="74%"><div align="right">
<object width="700" height="390"><param name="allowfullscreen" value="true" /><param name="wmode" value="transparent" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11918177&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=B89574&amp;fullscreen=1&amp;autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11918177&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=B89574&amp;fullscreen=11&amp;autoplay=1" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" width="700" height="390"></embed></object>
<br>
<span class="style2">nikki &amp; charlie / kiss me like we're on film</span></div></td>
<td width="13%">&nbsp;</td>
</table><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center" class="style2 style3"><span class="quote">&quot;Life is full of beauty. Notice it. Notice the bumble bee, the small child, and the smiling faces.<br>
Smell the rain, and feel the wind. Live your life to the fullest potential, and fight for your dreams.&quot;</span><br>
<span class="style5">~ Ashley Smith</span></div></td>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%"><div align="left">
<iframe src="http://www.facebook.com/plugins/like.php?href=www.mattbarwickfilms.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</div></td>
<td width="43%"><div align="right"><a href="http://www.facebook.com/pages/Barwick-Multimedia/307337064413"><img src="images/facebook-logo.png" alt="visit our facebook page!" width="55" height="55" border="0"></a></div></td>
<td width="7%"><div align="right"><a href="http://www.twitter.com/mattbarwick"><img src="images/twitter-logo.png" alt="follow us on twitter" width="55" height="55" border="0"></a></div></td>
</tr>
</table>

</table></td>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="style1">ALL CONTENT &copy; 2010 MATT BARWICK FILMS</span></td>
</tr>
</table>

</body>
</html>

Works fine here.

dynamic_eagle
08-17-2010, 02:29 AM
The example you put up worked perfectly for me which is promising.

OK - here's an example:

http://www.dev.mattbarwickfilms.com/alana-mark.htm

I'm changing anylinkmenu.css only which should be enough right? I assume I don't need to go through the code of each page.

jscheuer1
08-17-2010, 02:56 AM
You left out the attribute wmode="transparent" from the embed tag (here inserted and highlighted):


<object width="700" height="390">
<param name="allowfullscreen" value="true" /><param name="wmode" value="transparent" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10915968&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=B89574&amp;fullscreen=1&amp" />
<embed wmode="transparent" src="http://vimeo.com/moogaloop.swf?clip_id=10915968&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=B89574&amp;fullscreen=11&amp" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="390"></embed>
</object>

dynamic_eagle
08-17-2010, 03:18 AM
oh dear. how embarrassing.

thanks again :)