PDA

View Full Version : Ebeded QuickTime Problem



columbo1977
05-26-2009, 10:11 PM
Hi

I have menus made with Fireworks and on the front page I have an embeded quicktime video and when I hover over the menu the dropdown appears behind the video?

Any ideas how I can get round this?

Cheers

Graham

masterofollies
05-26-2009, 10:22 PM
Can you post a link to it or the coding?

_Aerospace_Eng_
05-26-2009, 10:33 PM
The solution here was created for a java applet but should work for the quicktime video.
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/

columbo1977
05-27-2009, 12:18 AM
Sorry I am having trouble with that as I dont know where to put the code?

link is www.toughguy.org.uk (http://www.toughguy.org.uk)

where would I put it?

_Aerospace_Eng_
05-27-2009, 05:57 AM
You are missing stuff. Remove what you added to your code and put this within the <head></head> part of your code

<script type="text/javascript">
function mouseIn() {
// create an iframe at the exact same position and
// size as the sub div
// Google "iframe shime" for more information
var shimmer = document.createElement('iframe');
shimmer.id='shimmer';
shimmer.style.position='absolute';
// normally you would get the dimensions and
// positions of the sub div dynamically. For demo
// purposes this is hardcoded
shimmer.style.width='150px';
shimmer.style.height='80px';
shimmer.style.top='100px';
shimmer.style.left='80px';
shimmer.style.zIndex='999';
shimmer.setAttribute('frameborder','0');
shimmer.setAttribute('src','javascript:false;');
document.body.appendChild(shimmer);
// make sub div visible
var sd = document.getElementById('subdiv');
sd.style.visibility='visible';
}
function mouseOut() {
var sd = document.getElementById('subdiv');
sd.style.visibility='hidden';
var shimmer = document.getElementById('shimmer');
document.body.removeChild(shimmer);
}
</script>
<style type="text/css">
#maindiv {display:block; width:150px; height:80px;
background:red;}
#subdiv {display:block; width:150px; height:80px;
background:blue; position:absolute;
top:100px; left:80px;
z-index:1000; visibility:hidden;}
</style>
Then just before your quicktime video add this

<!-- top level div -->
<div id="maindiv" onmouseover="mouseIn();"
onmouseout="mouseOut();">
<p>MAIN DIV</p>
<p>move mouse here</p>
</div>
<!-- subdiv that gets shown when mouse hovers
over top level div -->
<div id="subdiv">
<p>SUB DIV</p>
</div>
The width and height for #maindiv and #subdiv should be equal to the width and height for your quicktime video.

columbo1977
05-27-2009, 07:47 AM
Sorry maybe i'm missinng something but that makes 2 new boxes appear like the example and isnt working for me?

_Aerospace_Eng_
05-27-2009, 06:44 PM
Okay remove these.

<!-- top level div -->
<div id="maindiv" onmouseover="mouseIn();"
onmouseout="mouseOut();">
<p>MAIN DIV</p>
<p>move mouse here</p>
</div>
<!-- subdiv that gets shown when mouse hovers
over top level div -->
<div id="subdiv">
<p>SUB DIV</p>
</div>
Remove this

<style type="text/css">
#maindiv {display:block; width:150px; height:80px;
background:red;}
#subdiv {display:block; width:150px; height:80px;
background:blue; position:absolute;
top:100px; left:80px;
z-index:1000; visibility:hidden;}
</style>
Change this

<script type="text/javascript">
function mouseIn() {
// create an iframe at the exact same position and
// size as the sub div
// Google "iframe shime" for more information
var shimmer = document.createElement('iframe');
shimmer.id='shimmer';
shimmer.style.position='absolute';
// normally you would get the dimensions and
// positions of the sub div dynamically. For demo
// purposes this is hardcoded
shimmer.style.width='150px';
shimmer.style.height='80px';
shimmer.style.top='100px';
shimmer.style.left='80px';
shimmer.style.zIndex='999';
shimmer.setAttribute('frameborder','0');
shimmer.setAttribute('src','javascript:false;');
document.body.appendChild(shimmer);
// make sub div visible
var sd = document.getElementById('subdiv');
sd.style.visibility='visible';
}
function mouseOut() {
var sd = document.getElementById('subdiv');
sd.style.visibility='hidden';
var shimmer = document.getElementById('shimmer');
document.body.removeChild(shimmer);
}
</script>

to this

<script type="text/javascript">
function mouseIn() {
// create an iframe at the exact same position and
// size as the sub div
// Google "iframe shime" for more information
var shimmer = document.createElement('iframe');
shimmer.id='shimmer';
shimmer.style.position='absolute';
// normally you would get the dimensions and
// positions of the sub div dynamically. For demo
// purposes this is hardcoded
shimmer.style.width='150px';
shimmer.style.height='80px';
shimmer.style.top='100px';
shimmer.style.left='80px';
shimmer.style.zIndex='999';
shimmer.setAttribute('frameborder','0');
shimmer.setAttribute('src','javascript:false;');
document.body.appendChild(shimmer);
}
function mouseOut() {
var shimmer = document.getElementById('shimmer');
document.body.removeChild(shimmer);
}
</script>

Then add
onmouseover="mouseIn()" onmouseout="mouseOut()"
to your drop down menu.

columbo1977
05-27-2009, 07:17 PM
Hi

I added the function at the top and then added the mouse in and out to my code for the drop down and it makes no difference here is my code.



<div id="FWTableContainer571048219" onmouseover="mouseIn()" onmouseout="mouseOut()">
<table border="0" cellpadding="0" cellspacing="0" width="110">
<!-- fwtable fwsrc="news.png" fwbase="news.gif" fwstyle="Dreamweaver" fwdocid = "571048219" fwnested="0" -->
<tr>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="5" height="1" border="0" id="undefined_3" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="101" height="1" border="0" id="undefined_3" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="4" height="1" border="0" id="undefined_3" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="1" height="1" border="0" id="undefined_3" /></td>
</tr>
<tr>
<td colspan="3"><img name="news_r1_c1" src="../navigation/news_r1_c1.gif" width="110" height="4" border="0" id="news_r1_c1" alt="" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="1" height="4" border="0" id="undefined_3" /></td>
</tr>
<tr>
<td rowspan="2"><img name="news_r2_c1" src="../navigation/news_r2_c1.gif" width="5" height="26" border="0" id="news_r2_c1" alt="" /></td>
<td><a href="javascript:;" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0526200049_0', 'MMMenu0526200049_0',0,22,'news_r2_c2');"><img name="news_r2_c2" src="../navigation/news_r2_c2.gif" width="101" height="22" border="0" id="news_r2_c2" alt="" /></a></td>
<td rowspan="2"><img name="news_r2_c3" src="../navigation/news_r2_c3.gif" width="4" height="26" border="0" id="news_r2_c3" alt="" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="1" height="22" border="0" id="undefined_3" /></td>
</tr>
<tr>
<td><img name="news_r3_c2" src="../navigation/news_r3_c2.gif" width="101" height="4" border="0" id="news_r3_c2" alt="" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="1" height="4" border="0" id="undefined_3" /></td>
</tr>
</table>
<div id="MMMenuContainer0526200049_0">
<div id="MMMenu0526200049_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="javascript:;" id="MMMenu0526200049_0_Item_0" class="MMMIFVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> January&nbsp;2009 </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_1" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Bewel&nbsp;Barrel&nbsp;09 </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_2" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Doug&nbsp;-&nbsp;Everest </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_3" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Top&nbsp;Team </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_4" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Screwball&nbsp;Thug&nbsp;2009 </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_5" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> L.F.S.B </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_6" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Harry&nbsp;Patch </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_7" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Stairdiving </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_8" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> War&nbsp;to&nbsp;End&nbsp;all&nbsp;Wars </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_9" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Marathons&nbsp;and&nbsp;Milking </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_10" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Cows&nbsp;do&nbsp;it&nbsp;differently </a> </div>
</div>
</div>

_Aerospace_Eng_
05-27-2009, 08:21 PM
You haven't made the changes on your live site yet. Please do so.

columbo1977
05-27-2009, 09:41 PM
uploaded now :P

_Aerospace_Eng_
05-28-2009, 05:48 AM
Now where is the script? I don't see it on your page.

columbo1977
05-29-2009, 10:14 AM
I replaced the code but I have now changed the videos to wmv and they dont intefere with the menu's so will be going ahead with them.

thanks for trying though.