Revealing/Hiding a Div

So, my boss has decided that he wants Semi-Transparent Drop Down Menus that float over the rest of the page *groan*

I decided that the best way to do this would probably be to have each menu as a semi-transparent Div with contents that had styles that forced them solid again, position these relatively (because the site is centered), and then use Javascript to show/hide them on demand

The trigger event to show the divs is the user clicking on the flash button at the top of the menus, this part of the script is working, as I have confirmed that flash is deffinitly calling the function when this happens

The trigger event to hide them again is OnMouseOut(), again I have confirmed that this is deffinitly calling the right function

The first drop down has the following code:

Code:

        function RevealTV(){
            document.tvframe.style.display= ""
        }
        function HideTV(){
            document.tvframe.style.display = "none"
        }

I have tried using display="block" in the top function, and I've tried using visibility = "visible/hidden" as well

and on the page:

Code:

<div name='tvframe' id='tvframe' style='display:none' background='images/default/gray.png' class='menu' onmouseout='HideTV()'>"

the menu class is doing the transparency using an external style sheet, and I've yet to start on positioning or floating the divs because if this doesn't work then theres no point as I'll have to go think of another solution

again, I've tried with using visibility= in that tag as well

The confusing thing is that none of the solutions I've found online seem to work, while the people posting in those threads seem very happy that it did for them

If I can't get this working, then I'm probably out of a job, as my employer is very attached to the idea of these menus and won't accept another solution

Thanks in advance
-Mordax Praetorian

 

Hello,

As per what I understood you must use something which will get the object directly. Below are the 3 ways to do so.

Code:

// Way 1

function $(id) { return document.getElementById(id); }
function show() { $("tvframe").style.display=""; }
function hide() { $("tvframe").style.display="none"; }

Code:

// Way 2

function show() { document.getElementById("tvframe").style.display=""; }
function hide() { document.getElementById("tvframe").style.display="none"; }

Code:

// Way 3

document.write("<script src='use_prototype_js.js'></script>");
// Paste the URL for Prototype JS
 function show() { $("tvframe").style.display=""; }
 function hide() { $("tvframe").style.display="none"; }
 

Regards