Solved

re: Cascading menu disappears behind embedded windows media player

Posted on 2006-06-12
4
248 Views
Last Modified: 2012-06-27
Hi,

I have a cascading menu at the top of my webpage, which i've developed using inbuilt Dreamweaver functionality.

I have just embedded a windows media player into the webpage, and now when I run my mouse along the cascading menu, half of it is hidden behind the media player.

Is there any way to fix this?

Much appreciation
Yasmine
0
Comment
Question by:angmine
  • 2
4 Comments
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 16889927
Post your code

0
 
LVL 5

Accepted Solution

by:
maclema earned 500 total points
ID: 16890065
What you need to do is create an iframe and place it directly behind your menu at the same x, y width and height.

Here are some quick helper functions:

var DOM = {
      
      getBounds: function(obj)
      {
            var bounds = new Object();
            
            bounds.x = 0;
            bounds.y = 0;
            bounds.width = obj.offsetWidth;
            bounds.height = obj.offsetHeight;
            
            var cobj;
            
            //y position
            var y = 0;
            cobj = obj;
            if ( cobj.offsetParent )
            {
                  while( cobj.offsetParent )
                  {
                        y += cobj.offsetTop;
                        cobj = cobj.offsetParent;
                  }
            }
            else if ( cobj.style && cobj.style.top )
                  y = parseInt( obj.style.top );
            else if ( cobj.y )
                  y = cobj.y;
            bounds.y = y;
                  
            //x position
            var x = 0;
            cobj = obj;
            if ( cobj.offsetParent )
            {
                  while( cobj.offsetParent )
                  {
                        x += cobj.offsetLeft;
                        cobj = cobj.offsetParent;
                  }
            }
            else if ( cobj.style && cobj.style.left )
                  x = parseInt( obj.style.left );
            else if ( cobj.x )
                  x = cobj.x;

            bounds.x = x;
            
            return bounds;
      },
      
      setBounds: function(obj, bounds)
      {
            obj.style.left = bounds.x + "px";
            obj.style.top = bounds.y + "px";
            obj.style.width = bounds.width + "px";
            obj.style.height = bounds.height + "px";
      },
      
      createEmptyClippingFrame: function()
      {
            var obj = document.createElement("iframe");
            obj.src = "about:blank";
            obj.border = 0;
            obj.scrolling = "no";
            obj.frameBorder = 0;
            obj.style.position = "absolute";
            obj.style.border = "none";
            obj.style.margin = "0";
            obj.style.padding = "0";
            obj.style.zIndex = "0";
            obj.style.display = "none";
            document.body.appendChild(obj);
            return obj;
      }
      
};


SO in your menu display code you would do something like.
var clipper;
function showMenu()
{
...
  if ( !clipper )
    clipper = DOM.createEmptyClippingFrame();
  DOM.setBounds(clipper, DOM.getBounds(document.getElementById("THE MENU ID HERE")));
  clipper.style.display = "";
...
}

function hideMenu()
{
...
  clipper.style.display = "none";
...
}

0
 

Author Comment

by:angmine
ID: 16894490
Hi, you've lost me a bit! Here is my code. Where would I insert the code you've added, and how would i modify it?
Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>~~ Introduction to Intercultural Communication Courseware ~~</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function mmLoadMenus() {
  if (window.mm_menu_0527155109_0) return;
          window.mm_menu_0527155109_0 = new Menu("root",185,18,"Verdana, Arial, Helvetica, sans-serif",12,"#FFFFFF","#FFFFFF","#0066CC","#33FF18","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
  mm_menu_0527155109_0.addMenuItem("Course Information","window.open('2.htm', '_self');");
  mm_menu_0527155109_0.addMenuItem("Semester Times and Dates","window.open('2i.htm', '_self');");
  mm_menu_0527155109_0.addMenuItem("Prerequisites","window.open('2ii.htm', '_self');");
  mm_menu_0527155109_0.addMenuItem("Expectations","window.open('2iii.htm', '_self');");
  mm_menu_0527155109_0.addMenuItem("Objectives","window.open('2iv.htm', '_self');");
  mm_menu_0527155109_0.addMenuItem("Assignments","window.open('2v.htm', '_self');");
   mm_menu_0527155109_0.hideOnMouseOut=true;
   mm_menu_0527155109_0.bgColor='#555555';
   mm_menu_0527155109_0.menuBorder=1;
   mm_menu_0527155109_0.menuLiteBgColor='#FFFFFF';
   mm_menu_0527155109_0.menuBorderBgColor='#777777';
window.mm_menu_0527163649_0 = new Menu("root",190,18,"Verdana, Arial, Helvetica, sans-serif",12,"#FFFFFF","#FFFFFF","#0066CC","#33FF18","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
  mm_menu_0527163649_0.addMenuItem("Course&nbsp;Content","window.open('3.htm', '_self');");
  mm_menu_0527163649_0.addMenuItem("Culture&nbsp;and&nbsp;Cultural&nbsp;Values","window.open('3i.htm', '_self');");
  mm_menu_0527163649_0.addMenuItem("Universal&nbsp;Systems","window.open('3ii.htm', '_self');");
  mm_menu_0527163649_0.addMenuItem("Language","window.open('3iii.htm', '_self');");
  mm_menu_0527163649_0.addMenuItem("Communication","window.open('3iv.htm', '_self');");
  mm_menu_0527163649_0.addMenuItem("Customs","window.open('3v.htm', '_self');");
   mm_menu_0527163649_0.hideOnMouseOut=true;
   mm_menu_0527163649_0.bgColor='#555555';
   mm_menu_0527163649_0.menuBorder=1;
   mm_menu_0527163649_0.menuLiteBgColor='#FFFFFF';
   mm_menu_0527163649_0.menuBorderBgColor='#777777';
    window.mm_menu_0527165220_0 = new Menu("root",190,18,"Verdana, Arial, Helvetica, sans-serif",12,"#FFFFFF","#FFFFFF","#0066CC","#33FF18","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
  mm_menu_0527165220_0.addMenuItem("Activities","window.open('4.htm', '_self');");
  mm_menu_0527165220_0.addMenuItem("Culture&nbsp;and&nbsp;Cultural&nbsp;Values","window.open('4i.htm', '_self');");
  mm_menu_0527165220_0.addMenuItem("Universal&nbsp;Systems","window.open('4ii.htm', '_self');");
  mm_menu_0527165220_0.addMenuItem("Language","window.open('4iii.htm', '_self');");
  mm_menu_0527165220_0.addMenuItem("Communication","window.open('4iv.htm', '_self');");
  mm_menu_0527165220_0.addMenuItem("Customs","window.open('4v.htm', '_self');");
   mm_menu_0527165220_0.hideOnMouseOut=true;
   mm_menu_0527165220_0.bgColor='#555555';
   mm_menu_0527165220_0.menuBorder=1;
   mm_menu_0527165220_0.menuLiteBgColor='#FFFFFF';
   mm_menu_0527165220_0.menuBorderBgColor='#777777';
window.mm_menu_0527165719_0 = new Menu("root",130,18,"Verdana, Arial, Helvetica, sans-serif",12,"#FFFFFF","#FFFFFF","#0066CC","#33FF18","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
  mm_menu_0527165719_0.addMenuItem("Communicate","window.open('5.htm', '_self');");
  mm_menu_0527165719_0.addMenuItem("My&nbsp;Journal","window.open('5i.htm', '_self');");
  mm_menu_0527165719_0.addMenuItem("Discussion&nbsp;Board","window.open('5ii.htm', '_self');");
  mm_menu_0527165719_0.addMenuItem("Chat","window.open('5iii.htm', '_self');");
  mm_menu_0527165719_0.addMenuItem("Email","window.open('5iv.htm', '_self');");
   mm_menu_0527165719_0.hideOnMouseOut=true;
   mm_menu_0527165719_0.bgColor='#555555';
   mm_menu_0527165719_0.menuBorder=1;
   mm_menu_0527165719_0.menuLiteBgColor='#FFFFFF';
   mm_menu_0527165719_0.menuBorderBgColor='#777777';
        window.mm_menu_0527165856_0 = new Menu("root",93,18,"Verdana, Arial, Helvetica, sans-serif",12,"#FFFFFF","#FFFFFF","#0066CC","#33FF18","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
  mm_menu_0527165856_0.addMenuItem("Resources","window.open('6.htm', '_self');");
  mm_menu_0527165856_0.addMenuItem("Online","window.open('6i.htm', '_self');");
  mm_menu_0527165856_0.addMenuItem("Print&nbsp;based","window.open('6ii.htm', '_self');");
  mm_menu_0527165856_0.addMenuItem("Library","window.open('6iii.htm', '_self');");
  mm_menu_0527165856_0.addMenuItem("RSS&nbsp;News","window.open('6iv.htm', '_self');");
  mm_menu_0527165856_0.addMenuItem("Downloads","window.open('6v.htm', '_self');");
   mm_menu_0527165856_0.hideOnMouseOut=true;
   mm_menu_0527165856_0.bgColor='#555555';
   mm_menu_0527165856_0.menuBorder=1;
   mm_menu_0527165856_0.menuLiteBgColor='#FFFFFF';
   mm_menu_0527165856_0.menuBorderBgColor='#777777';

mm_menu_0527165856_0.writeMenus();
} // mmLoadMenus()
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="JavaScript" src="../mm_menu.js"></script>
<link href="../css/css.css" rel="stylesheet" type="text/css">
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
.style12 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; }
-->
</style>
</head>

<body bgcolor="#6699FF" onLoad="MM_preloadImages('../images/buttons/home_blue.jpg','../images/buttons/help_blue.jpg','../images/buttons/sitemap_blue.jpg','../images/buttons/glossary_blue.jpg','../images/buttons/contact_blue.jpg','../images/buttons/exit_lightpink.jpg','../images/buttons/myprofile_lightblue.jpg','../images/buttons/instructorprofile_lightblue.jpg','../images/buttons/whosonline_lightblue.jpg')">
<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="350" height="319" border="0" align="center" cellpadding="1" cellspacing="0">
  <tr>
    <td width="0%" rowspan="5">&nbsp;</td>
    <td height="92" colspan="2" align="left" valign="bottom" bgcolor="33FF33"><a href="../home.htm" target="_self"><img src="../images/homeimage.jpg" alt="Home" width="300" height="90" border="0"></a></td>
    <td colspan="2" bgcolor="33FF33"><div align="right">
        <table width="350" height="89" border="0" align="right" cellpadding="2" cellspacing="2" background="../images/menubar.jpg">
          <tr>
            <td width="142" height="40" align="right" valign="top"><a href="../home.htm" target="_self" onMouseOver="MM_swapImage('Home','','../images/buttons/home_blue.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/buttons/home.jpg" alt="Home" name="Home" width="40" height="40" border="0"></a></td>
            <td width="46" height="40" align="right" valign="top"><a href="../help.htm" target="_self" onMouseOver="MM_swapImage('Help','','../images/buttons/help_blue.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/buttons/help.jpg" alt="Help" name="Help" width="40" height="40" border="0"></a></td>
            <td width="53" height="40" align="right" valign="top"><a href="../sitemap.htm" target="_self" onMouseOver="MM_swapImage('Sitemap','','../images/buttons/sitemap_blue.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/buttons/sitemap.jpg" alt="Sitemap" name="Sitemap" width="40" height="40" border="0"></a></td>
            <td width="57" height="40" align="right" valign="top" class="css"><a href="../glossary.htm" target="_self" onMouseOver="MM_swapImage('Glossary','','../images/buttons/glossary_blue.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/buttons/glossary.jpg" alt="Glossary" name="Glossary" width="40" height="40" border="0"></a></td>
            <td width="52" height="40" align="right" valign="top"><a href="../contact.htm" target="_self" onMouseOver="MM_swapImage('Contact','','../images/buttons/contact_blue.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/buttons/contact.jpg" alt="Contact" name="Contact" width="40" height="40" border="0"></a></td>
          </tr>
          <tr class="css">
            <td height="39" align="right" valign="top">Home</td>
            <td align="right" valign="top">Help</td>
            <td align="right" valign="top">Sitemap</td>
            <td align="right" valign="top">Glossary</td>
            <td align="right" valign="top">Contact</td>
          </tr>
        </table>
      </div></td>
    <td width="0%" rowspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4" align="left" valign="top" bgcolor="#0066CC"><p align="center"><a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0527155109_0,0,25,null,'image1')" onMouseOut="MM_startTimeout();"><img src="../images/buttons/course_information.jpg" alt="Course Information" name="image1" width="150" height="25" border="1" id="image1"></a><a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0527163649_0,0,25,null,'image2')" onMouseOut="MM_startTimeout();"><img src="../images/buttons/course_content.jpg" alt="Course Content" name="image2" width="150" height="25" border="1" id="image2"></a><a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0527165220_0,0,25,null,'image3')" onMouseOut="MM_startTimeout();"><img src="../images/buttons/Activities.jpg" alt="Activities" name="image3" width="150" height="25" border="1" id="image3"></a><a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0527165719_0,0,25,null,'image4')" onMouseOut="MM_startTimeout();"><img src="../images/buttons/communicate.jpg" alt="Communicate" name="image4" width="150" height="25" border="1" id="image4"></a><a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0527165856_0,0,25,null,'image5')" onMouseOut="MM_startTimeout();"><img src="../images/buttons/resources.jpg" alt="Resources" name="image5" width="150" height="25" border="1" id="image5"></a></p></td>
  </tr>
  <tr>
    <td width="10%" align="left" valign="top" bgcolor="#FFFFFF">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    <p>&nbsp;</p></td>
    <td colspan="2" align="left" valign="top" bgcolor="#FFFFFF"><!-- TemplateBeginEditable name="EditRegion2" -->
      <table width="100%"  border="0" cellspacing="5" cellpadding="5">
        <tr>
          <td width="62%" align="center" valign="top"><object
id="MediaPlayer"
style="background-color: #FFCCFF; layer-background-color: #FFCCFF; border: 1px none #000000;"
classid="6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase=
"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"
width=340 height=240
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
              <param name="FileName" value="Playlist2.asx">
              <param name="TransparentAtStart" value="false">
              <param name="AutoStart" value="false">
              <param name="AnimationatStart" value="true">
              <param name="ShowControls" value="true">
              <param name="ShowPositionControls" value="true">
              <param name="ShowStatusBar" value="true">
              <param name="autoSize" value="false">
              <param name="displaySize" value="0">
              <embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
src="Playlist3.asx"
width="340" height="340"
name=MediaPlayer
autostart="False"
showcontrols="True"
showstatusbar="true"
showdisplay="true"
enabled="true"
autorewind="True"></embed>
          </object></td>
          <td width="38%" colspan="6" align="left" valign="top"><p class="css">Hello from your course instructor Yasmine Howard! I hope you're having a great day. </p>
              <p class="css">Click the Play button to listen to the video online.</p>
              <table width="95%"  border="0" cellpadding="0" cellspacing="0" bgcolor="#6699FF">
                <tr>
                  <td colspan="6" class="css style13">Or download content in a usable format to your computer: </td>
                </tr>
                <tr>
                  <td><img src="images/video.jpg" width="45" height="45"></td>
                  <td><img src="images/audio.jpg" width="45" height="45"></td>
                  <td><img src="images/ipod.jpg" width="45" height="45"></td>
                  <td><img src="images/html.jpg" width="45" height="45"></td>
                  <td><img src="images/adobe.jpg" width="45" height="45"></td>
                  <td><img src="images/word.jpg" width="45" height="45"></td>
                </tr>
                <tr>
                  <td height="28" align="left" valign="top" bgcolor="#6699FF"><span class="style12">Video</span></td>
                  <td align="left" valign="top" bgcolor="#6699FF"><p class="style1 style12">Mp3<br>
              Audio</p></td>
                  <td align="left" valign="top" bgcolor="#6699FF"><span class="style12">IPod Audio </span></td>
                  <td align="left" valign="top" bgcolor="#6699FF"><span class="style12">Text</span></td>
                  <td align="left" valign="top" bgcolor="#6699FF"><span class="style12">Text</span></td>
                  <td align="left" valign="top" bgcolor="#6699FF"><span class="style12">Text</span></td>
                </tr>
              </table>
              <p align="right" class="css">&nbsp;</p>
              <p align="right" class="css">&nbsp;</p>
              <p align="right" class="css"><a href="feedback.htm" target="_self"><img src="images/sendemail.jpg" alt="Feedback" width="24" height="25" border="0"></a><a href="feedback.htm" target="_self">Write Feedback</a> <br>
            </p></td>
        </tr>
      </table>
      <p>&nbsp;</p>
      <!-- TemplateEndEditable --></td>
    <td width="18%" align="left" valign="top" bgcolor="#FFFFFF"><font color="#000000"><!-- TemplateBeginEditable name="EditRegion3" --><!-- TemplateEndEditable --></font></td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top" bgcolor="#0066CC"><a href="../myprofile.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('My_Profile','','../images/buttons/myprofile_lightblue.jpg',1)"><img src="../images/buttons/myprofile.jpg" alt="My Profile" name="My_Profile" width="150" height="25" border="1"></a><a href="../instructorprofile.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Instructor_Profile','','../images/buttons/instructorprofile_lightblue.jpg',1)"><img src="../images/buttons/instructorprofile.jpg" alt="Instructor Profile" name="Instructor_Profile" width="150" height="25" border="1"></a><a href="../whosonline.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Whos_Online','','../images/buttons/whosonline_lightblue.jpg',1)"><img src="../images/buttons/whosonline.jpg" alt="Who's Online?" name="Whos_Online" width="150" height="25" border="1"></a></td>
    <td align="right" valign="top" bgcolor="#0066CC"><a href="http://fcms.its.utas.edu.au/educ/educ/pagedetails.asp?lpersonId=3531" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Exit_Courseware','','../images/buttons/exit_lightpink.jpg',1)"><img src="../images/buttons/exit.jpg" alt="Exit Courseware" name="Exit_Courseware" width="150" height="25" border="0"></a></td>
  </tr>
  <tr>
    <td colspan="4" bgcolor="#33FF33">&nbsp;</td>
  </tr>
</table>
</body>
</html>
0
 

Author Comment

by:angmine
ID: 16894528
I should probably let you know that I used Dreamweaver inbuilt futo build the code above.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now