Lunarpages Web Hosting Forum

Author Topic: JavaScript question  (Read 3199 times)

Offline absolutezero3424

  • Spaceship Navigator
  • *****
  • Posts: 97
    • The Apostolics of Taylor
JavaScript question
« on: January 06, 2007, 09:28:24 AM »
I have a problem with my JavaScript menus on my site....look at these pages:

www.apostolicsoftaylor.com/delete.shtml
www.apostolicsoftaylor.com/videos.shtml

If you rollover the menus they will appear "hidden" by either the RealPlayer plugin
or the .swf file depending on which page you are looking at....I need the JavaScript menus
to be "on top" of everything, including .swf files and the RealPlayer plugin.  Is this possible, and if so how do I accomplish it?  Thanks!

Offline Onideus_Mad_Hatter

  • MR-Disabled
  • Intergalactic Cowboy
  • *
  • Posts: 59
  • My Pointy Teeth
    • Backwater Productions
Re: JavaScript question
« Reply #1 on: January 06, 2007, 10:16:55 AM »
I have a problem with my JavaScript menus on my site....look at these pages:

www.apostolicsoftaylor.com/delete.shtml
www.apostolicsoftaylor.com/videos.shtml

If you rollover the menus they will appear "hidden" by either the RealPlayer plugin
or the .swf file depending on which page you are looking at....I need the JavaScript menus
to be "on top" of everything, including .swf files and the RealPlayer plugin.  Is this possible, and if so how do I accomplish it?  Thanks!

...well, the best advice I can give you is to hire a web designer.  But if you REALLY wanna keep DIYing it yer gonna need to use divs with CSS z-indexing to put whatever you want on top, on top.  You ~could~ simply put the code to the flash stuff first and the menus last...but your code is already such a horrible explosion of spaghetti mashed insanity...I don't even know where you would begin (besides starting over from scratch and using YOUR OWN code).  *shrugs*

Offline absolutezero3424

  • Spaceship Navigator
  • *****
  • Posts: 97
    • The Apostolics of Taylor
Re: JavaScript question
« Reply #2 on: January 07, 2007, 02:40:30 PM »
Thanks, I think?

anyways....I looked into the z-index thing and I need help with that, I played around with it because I have some understanding of CSS, but I couldn't figure out how to do it...could someone look at:

www.apostolicsoftaylor.com/delete.shtml

and tell me how to get the menu to appear "on top" of the flash stuff?  Thanks!
« Last Edit: January 13, 2007, 11:19:16 AM by absolutezero3424 »

Offline fretnmore

  • Grandma Looney
  • Über Jedi
  • *****
  • Posts: 2841
    • Tri Wolf Studios
Re: JavaScript question
« Reply #3 on: January 07, 2007, 05:32:42 PM »
Hi absolutezero34,

I can show you what the div code looks like for my site that puts the menu in front of forms (which is the only thing I have on the site that had difficulty with the drop down menu. This works - although I have not added flash or real player to any of my pages to have the same situation that you do.

Code: [Select]
<div id="link1layer" style="position:absolute; width:160px; z-index:2; visibility: hidden;" onMouseOver="MM_showHideLayers('link1layer','','show')" onMouseOut="MM_showHideLayers('link1layer','','hide')">
I'm not sure how much that will help you as the drop down menu came with the template. So once I got it customized for my site, I didn't worry about it much. I can show you the first page in the site where that code is used - www.saw-online.org - maybe that will be helpful too.

I cut and paste a lot, but do not really understand the nitty gritty of a lot of code. But maybe this will be enough to help you figure it out.
Life is not measured by the number of breaths we take, but by the moments that take our breath away.
----------------------------------------------------------
Tri-Wolf Studios
Lunarpages Web Hosting
Lunarpages Forums
Lunarpages Affiliate Program

Offline DSB

  • Computer Nerd
  • Jabba the Hutt
  • *****
  • Posts: 597
  • Programmer of things...
    • b-a-k-e-r.com
Re: JavaScript question
« Reply #4 on: January 07, 2007, 11:19:57 PM »
I haven't tested this but give it a shot...

Add this to the top of your HTML file/files or to an external CSS file (recommended):
Code: [Select]
<style type = "text/css">
#options td { z-index: 1 }
</style>

Then modify row 2 of your navigation menu:
Code: [Select]
<tr id = "options"><!-- row 2 --> // <----- Make change here
   <td><img name="navbar_r2_c1" src="images/navbar_r2_c1.gif" width="18" height="20" border="0" alt="nav_bar"></td>
   <td><a href="index.htm" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0303161748_0,0,20,null,'navbar_r2_c2');MM_swapImage('navbar_r2_c2','','images/navbar_r2_c2_f2.gif',1);"><img name="navbar_r2_c2" src="images/navbar_r2_c2.gif" width="112" height="20" border="0" alt="Home"></a></td>
   <td><img name="navbar_r2_c3" src="images/navbar_r2_c3.gif" width="8" height="20" border="0" alt="nav_bar"></td>
   <td><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0303162001_1,0,20,null,'navbar_r2_c4');MM_swapImage('navbar_r2_c4','','images/navbar_r2_c4_f2.gif',1);"><img name="navbar_r2_c4" src="images/navbar_r2_c4.gif" width="112" height="20" border="0" alt="Church"></a></td>
   <td><img name="navbar_r2_c5" src="images/navbar_r2_c5.gif" width="8" height="20" border="0" alt="nav_bar"></td>
   <td><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0303164716_2,0,20,null,'navbar_r2_c6');MM_swapImage('navbar_r2_c6','','images/navbar_r2_c6_f2.gif',1);"><img name="navbar_r2_c6" src="images/navbar_r2_c6.gif" width="112" height="20" border="0" alt="Events"></a></td>
   <td><img name="navbar_r2_c7" src="images/navbar_r2_c7.gif" width="9" height="20" border="0" alt="nav_bar"></td>
   <td><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0303165019_3,-23,20,null,'navbar_r2_c8');MM_swapImage('navbar_r2_c8','','images/navbar_r2_c8_f2.gif',1);"><img name="navbar_r2_c8" src="images/navbar_r2_c8.gif" width="112" height="20" border="0" alt="Media"></a></td>
   <td><img name="navbar_r2_c9" src="images/navbar_r2_c9.gif" width="8" height="20" border="0" alt="nav_bar"></td>
   <td><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0303165044_4,-8,20,null,'navbar_r2_c10');MM_swapImage('navbar_r2_c10','','images/navbar_r2_c10_f2.gif',1);"><img name="navbar_r2_c10" src="images/navbar_r2_c10.gif" width="112" height="20" border="0" alt="Links"></a></td>
   <td><img name="navbar_r2_c11" src="images/navbar_r2_c11.gif" width="9" height="20" border="0" alt="nav_bar"></td>
   <td><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0303165126_5,-109,20,null,'navbar_r2_c12');MM_swapImage('navbar_r2_c12','','images/navbar_r2_c12_f2.gif',1);"><img name="navbar_r2_c12" src="images/navbar_r2_c12.gif" width="112" height="20" border="0" alt="Contact Us"></a></td>
   <td><img name="navbar_r2_c13" src="images/navbar_r2_c13.gif" width="18" height="20" border="0" alt="nav_bar"></td>
   <td><img src="images/spacer.gif" width="1" height="20" border="0" alt=""></td>
</tr>
« Last Edit: January 07, 2007, 11:21:45 PM by DSB »

Offline Eidolon

  • Trekkie
  • **
  • Posts: 18
    • Wright Gallery
Re: JavaScript question
« Reply #5 on: January 08, 2007, 08:16:05 AM »
What I've done on several projects I've worked on is placed an IFRAME in the page that is hidden until the menu is displayed. The IFRAME is to be positioned directly where the menu is but with a z-index 1 below the menu's z-index. Position and size this to be exactly as your sub-menu. The submenu will then appear on-top of anything because the IFRAME supersedes every other HTML component. Do a search on the internet for "DIV ontop of SELECT" and you'll see many other people have approached the problem the same way.
Like paintings? Come see my gallery: www.razorsharpdesigns.com/~gallery