dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: [RESOLVED] JS dropdown not working.

  1. #1
    Join Date
    Jun 2017
    Posts
    21

    resolved [RESOLVED] JS dropdown not working.

    New here!
    Iím starting this thread to ask for some help regarding my JS code.
    Iíve looked around and I could not find anything similar to my issueÖ so here it goes:

    Iím creating a button in HTMl, CSS and JS that once itís clicked/tapped, it would pop up a dropdown menu. For some reason itís not working and I was wondering what am I doing wrong?
    Could someone take a look and shed some light?

    JSFiddle link: https://jsfiddle.net/#&togetherjs=F3UEsrAz69

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,244
    No use posting on an external site, you should post your code here using the BB Forum code tags.

    A web form can fail for a couple of reasons, often theres no <form> present, when code isn't working its either a typo or JQuery is being used...

    If you are using JQuery (not JavaScript) then you should be asking in the JavaScript Frameworks forum.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jun 2017
    Posts
    21
    My apologies.

    Here's my code:


    HTML

    Code:
    <html>
    <head>
    <title>My Title</title>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel ="stylesheet" href="CSS/1.css">
    </head>
    <body>
    
    <button onclick="aboutb()" class="infoplus">About</button>
      <div id="infodrop">
        <ul>
    	<li><a href="">test</a> </li>
    	<li><a href="">test</a> </li>
    	<li><a href="">test</a> </li>
    	<li><a href="">test</a> </li>
    	<li><a href="">test</a> </li>
    	<li><a href="">test</a> </li>
    	</ul>
      </div>
    
    
    </body>
    <script src="JS/1.js">
    </script>
    </html>

    CSS


    Code:
    /*info  */ 
    #infodrop ul{width:50%; height:30%; background-color:blue; list-style-type:none; overflow:hidden; position:fixed; top:7%; left:0%; display:none;  }
    #infodrop li a{ background-color:black; width:100%; height:17%; color:white; display:block;  }
    .reveal{display:block; } 
    .infoplus{background:rgba(0,0,0,0.8); width:15.5vw; height:9vh; position:absolute; top:0px; left:150px;  padding:0; border-radius:10px; color:white; z-index:3;   }



    Javascript


    Code:
     /*About button*/
    /* When the user clicks on the button,
    toggle between hiding and showing the dropdown content */
    function aboutb() {
        document.getElementById("infodrop").classList.toggle("reveal");
    }
    
    // Close the dropdown menu if the user clicks outside of it
    
    /* */ window.onclick = function(event) {
      if (!event.target.matches('.infoplus')) {
    
        var drinfo = document.getElementsByClassName("infoplus");
        var i;
        for (i = 0; i < drinfo.length; i++) {
          var odinfo = drinfo[i];
          if (odinfo.classList.contains('reveal')) {
            odinfo.classList.remove('reveal');
          }
        }
      }
    }

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,244
    What is .toggle() all about? I don't recall it being a JavaScript method. If you are using a JavaScript tool like JQuery, then your question belongs in the JavaScript Frameworks forum.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,561
    Moved as .toggle() is jQuery

  6. #6
    Join Date
    Jun 2017
    Posts
    21
    Thanks for moving my post in the right section.
    I was wondering if I can accomplish the same technique as above without Jquery and other JS based frameworks?
    What I want to accomplish is a clickable dropdown menu that shows the menu when clicked and closes when clicked again or when clicking outside of it?

  7. #7
    Join Date
    Jun 2017
    Posts
    21
    Bump

    Does anyone know how to resolve this?

  8. #8
    Join Date
    Dec 2012
    Posts
    1,494
    ??? There is no jQuery in the code you posted. toggle() is a method of classlist and works fine in your code:
    https://developer.mozilla.org/de/doc...ment/classList

    The reason why your code doesn't work is that this CSS:
    HTML Code:
            #infodrop ul {
                width: 50%;
                height: 30%;
                background-color: blue;
                list-style-type: none;
                overflow: hidden;
                position: fixed;
                top: 7%;
                left: 0%;
                display: none;
            }
    is more specific and thus has a higher priority than this:
    HTML Code:
    .reveal {
                display: block;
            }
    Therefore the latter does not take effect.
    Fixing is easy by changing the CSS to:
    HTML Code:
            #infodrop.reveal ul {
                display: block;
            }
    Last edited by Sempervivum; 06-15-2017 at 01:41 AM.

  9. #9
    Join Date
    Jun 2017
    Posts
    21
    Sempervivum

    Thanks a million!
    It worked!

    I was wondering if it's possible for the menu to close when clicking on other elements?
    I've implemented this earlier, but I've made so many changes that it's not working anymore.

  10. #10
    Join Date
    Dec 2012
    Posts
    1,494
    I was wondering if it's possible for the menu to close when clicking on other elements?
    Yes, this is possible by adjusting the function calls and the selectors to the appropriate values:
    Code:
            // Close the dropdown menu if the user clicks outside of it
            window.onclick = function (event) {
                if (!event.target.matches('.infoplus') &&
                    !event.target.matches('#infodrop')) {
    
                    var drinfo = document.getElementById("infodrop");
                    if (drinfo.classList.contains('reveal')) {
                        drinfo.classList.remove('reveal');
                    }
                }
            }

  11. #11
    Join Date
    Jun 2017
    Posts
    21
    Sempervivum

    Thank you again for your help!
    I'm still a newbie when it comes to JS and I'm trying to get used to it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles