1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Revealing/Hiding a Div

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

  1. Mordax Praetorian

    Mordax Praetorian New Member

    Joined:
    Mar 28, 2009
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    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
     
  2. akshits

    akshits New Member

    Joined:
    May 10, 2009
    Messages:
    23
    Likes Received:
    2
    Trophy Points:
    0
    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
     

Share This Page