Solved

re: Cascading menu disappears behind embedded windows media player

Posted on 2006-06-12
4
282 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 29

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

726 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