SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question DOM scripting help

    function showMenu(menuDisplay) {
    var sCode = "display: none;"
    var source = menuDisplay.getAttribute("id");
    var changeSource = document.getElementById(source);
    changeSource.setAttribute("style",sCode);
    }

    I am trying to hide/unhide menu items when I roll-over them..

    But I have a 2 divs called the same ID's.. In this example when rolling over HOME tab I want the menu below it to appear by altering the DOM to display: block;

    <div id='menu1' onmouseover='showMenu(this);' class='divLeft menuTopDiv unlit'>
    <a href="#" style='display: block;'>HOME</a>
    </div>
    <div id='menu2' onmouseover='showMenu(this);' class='divLeft menuTopDiv unlit'>
    <a href="#" style='display: block;'>TOOLS</a>
    </div>
    <div id='menu3' onmouseover='showMenu(this);' class='divLeft menuTopDiv unlit'>
    <a href="#" style='display: block;'>AGENCIES</a>
    </div>
    <div id='menu4' onmouseover='showMenu(this);' class='divLeft menuTopDiv unlit'>
    <a href="#" style='display: block;'>HELP</a>
    </div>
    <br style='clear: both;' />

    <div id='menu1' style='display: none; position: static; top: 30px; left: 30px;'>
    <div id='homeMenu' class='menuTopDiv unlit' style='width: 160px;'>
    Welcome!
    </div>
    <div id='homeMenu2' class='menuTopDiv unlit' style='width: 160px;'>
    Impact 2000
    </div><br />
    </div>

  2. #2
    SitePoint Member
    Join Date
    May 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have gotten this far but still no workie!! Where is Jeremy Keith when I need him :P

    }
    .disNone {
    display: none;
    }
    .disIn {
    display: inline;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.unlit').hover(function(){
    $(this).addClass('highlighted');},function(){
    $(this).removeClass('highlighted');
    });
    });
    function showMenu(menuDisplay) {
    var source = menuDisplay.getAttribute("id");
    if (source == "menu1") {
    var source2 = "homeMenu";
    }
    if (source == "menu2") {
    var source2 = "newsMenu";
    }
    var changeSource = document.getElementById(source2);
    changeSource.setAttribute("class","disIn");
    }
    </script>
    </head>
    <body>

    <div id='menu1' onmouseover='showMenu(this);' class='divLeft menuTopDiv unlit'>
    <a href="#" style='display: block;'>HOME</a>
    </div>
    <div id='menu2' onmouseover='showMenu(this);' style='display: block;' class='divLeft menuTopDiv unlit'>
    <a href="#" style='display: block;'>NEWS</a>
    </div>
    <div id='menu3' onmouseover='showMenu(this);' style='display: block;' class='divLeft menuTopDiv unlit'>
    <a href="#" style='display: block;'>TOOLS</a>
    </div>
    <div id='menu4' onmouseover='showMenu(this);' class='divLeft menuTopDiv unlit'>
    <a href="#" style='display: block;'>AGENCIES</a>
    </div>
    <div id='menu5' onmouseover='showMenu(this);' class='divLeft menuTopDiv unlit'>
    <a href="#" style='display: block;'>HELP</a>
    </div>
    <br style='clear: both;' />

    <div id='homeMenu' class='disNone' style='position: static; top: 30px; left: 30px;'>
    <div id='homeMenu1' class='menuTopDiv unlit' style='width: 160px;'>
    Welcome!
    </div>
    <div id='homeMenu2' class='menuTopDiv unlit' style='width: 160px;'>
    Impact 2000
    </div><br />
    </div>

    <div id='newsMenu' class='disNone' style='position: static; top: 30px; left: 30px;'>
    <div id='newsMenu1' class='menuTopDiv unlit' style='width: 160px;'>
    News1
    </div>
    <div id='newsMenu2' class='menuTopDiv unlit' style='width: 160px;'>
    News2
    </div><br />
    </div>

  3. #3
    SitePoint Member
    Join Date
    May 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function showMenu(menuDisplay) {
    var source = menuDisplay.getAttribute("id");
    if (source == "menu1") {
    var source2 = "homeMenu";
    }
    if (source == "menu2") {
    var source2 = "newsMenu";
    }
    var changeSource = document.getElementById(source2);
    changeSource.className = "disIn";
    }
    function hideMenu(menuHide) {
    var source = menuHide.getAttribute("id");
    var changeSource = document.getElementById(source);
    changeSource.className = "disNone";
    }


    On my menu that displays below I have a main div around each individual menu item.
    I want the HIDE to only occur when the overall div is left. But now it is hiding when just the first tab "Welcome!" is left.. why doesn't it wait till I am down past "Impact 2000" where I would leave the div I put the onmouseout on?

    <div id='homeMenu' class='disNone' onmouseout='hideMenu(this);' style='position: static; top: 30px; left: 30px;'>
    <div id='homeMenu1' class='menuTopDiv unlit' style='width: 160px;'>
    Welcome!
    </div>
    <div id='homeMenu2' class='menuTopDiv unlit' style='width: 160px;'>
    Impact 2000
    </div><br />
    </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •