Revealing/Hiding a Div

Discussion in 'JavaScript and AJAX' started by Mordax Praetorian, Mar 28, 2009.

  1. Mordax Praetorian

    Mordax Praetorian New Member

    Mar 28, 2009
    Likes Received:
    Trophy Points:
    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:
            function RevealTV(){
            function HideTV(){
       = "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:
    <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
  2. akshits

    akshits Guest


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

    // Way 1
    function $(id) { return document.getElementById(id); }
    function show() { $("tvframe").style.display=""; }
    function hide() { $("tvframe").style.display="none"; }
    // Way 2
    function show() { document.getElementById("tvframe").style.display=""; }
    function hide() { document.getElementById("tvframe").style.display="none"; }
    // 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"; }

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice