[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

re: Cascading menu disappears behind embedded windows media player

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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 …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

656 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