?
Solved

re: Cascading menu disappears behind embedded windows media player

Posted on 2006-06-12
4
Medium Priority
?
298 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 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

765 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