SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why does this element stay displayed while the display ID is taken away?

    Hi,

    I am making an onclick fly-out menu for touchscreens. In principle it is working and it looks like this:
    HTML Code:
    <!DOCTYPE html>
    <head>
    <style type="text/css">
    body {
        font: normal .8em Verdana;
        }
    #navDiv ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        }
    #navDiv li {
        width: 100px;
        position: relative;
        margin-bottom: 15px;
        }
    #navDiv li ul {
        position: absolute;
        left: 100px;
        top: 0;
        display: none;
        }
    #navDiv li#dynamicID ul {
        display: block;
        }
    #navDiv a {
        display: block;
        background: orange;
        color: blue;
        text-decoration: none;
        }
    </style>
    <script>
    function manageID(selectedElement)
    {
        var possessor = document.getElementById('dynamicID');
        if (possessor == null)
        {
            selectedElement.id = 'dynamicID';
        }
        else if (possessor == selectedElement)
        {
            selectedElement.id = '';
        }
        else if (possessor != selectedElement)
        {
            possessor.id = '';
            selectedElement.id = 'dynamicID';
        }
    }
    function takeawayID()
    {
        var possessor = document.getElementById('dynamicID');
        possessor.id = '';
        document.getElementById('IDdisplay').innerHTML = 'The possessor has now this ID: '+possessor.id;
    }
    </script>
    </head>
    <body>
    <div id="navDiv">
        <ul>
            <li onclick="takeawayID()"><a href="#">Hyperlink 1</a></li>
            <li onclick="manageID(this)"><a href="#">Hyperlink 2 &rarr;</a>
                <ul>
                    <li onclick="takeawayID()"><a href="#">Hyperlink 2-A</a></li>
                    <li><a href="#">Hyperlink 2-B</a></li>
                    <li><a href="#">Hyperlink 2-C</a></li>
                </ul>
            </li>
            <li onclick="manageID(this)"><a href="#">Hyperlink 3 &rarr;</a>
                <ul>
                    <li><a href="#">Hyperlink 3-A</a></li>
                    <li><a href="#">Hyperlink 3-B</a></li>
                    <li><a href="#">Hyperlink 3-C</a></li>
                </ul>
            </li>
            <li onclick="takeawayID()"><a href="#">Hyperlink 4</a></li>
        </ul>
    </div>
    <p id="IDdisplay">&nbsp;</p>
    </body>
    </html>
    Here it is live: http://jsfiddle.net/8ceXt/1/

    The manageID function is working beautifully. However, I've come to know a number of mobile and tablet browsers to be so unpredictable that I want the assigned ID taken away entirely if a child menu item is clicked. And I need that takeawayID function for three-level menus.

    Now, while the IDdisplay shows that when child menu hyperlink 2A is clicked (the only one I 'loaded up' with an onclick="takeawayID"), any ID is indeed taken away, but the child menu stays on display. And to add to the fun & confusion, if the line possessor.id = ' ' is outcommented, the reverse behavior is seen: any assigned ID is not taken away, but the child menu disappears...

    How must the code be changed so that it works properly?

    Thanks in advance.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solved

    I found part of the answer. The child menu is part of the parent menu item, so when I click the child menu item I am virtually also clicking the parent menu item. And then both functions are executed. Thus, the ID is taken away anyway when I click a child menu item, also without the takeawayID function. So that problem is solved.

    What remains is how I get the three-level menu to work. But I will probably start a new thread for that, because I think that will bring up a different question.


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
  •