Highlighted

Javascript function not working

Community Beginner ,
Sep 17, 2017

Copy link to clipboard

Copied

I am using a Javascript function for my navigation menu. Why isnt the function working? Do I need a different function for each menu item?

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>100 Black Men of San Antonio - Prototype</title>

<link href="100style.css" rel="stylesheet" type="text/css">

</head>

<body>

<nav class = "container">

<div class = "home_nav">

<a href="#home" class = "nav_Links"><img src="100bmosalogo.jpg" width="25" height="12" alt="Home Logo"/>Home</a>

</div>

   <div class="dropdown_about_us">

    <button class="dropbtn" onclick="myFunction()">About Us</button>

    <div class="dropdown-content" id="myDropdown">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div>

    <div class="dropdown_events">

    <button class="dropbtn" onclick="myFunction()">

    <a href="#" class = "nav_Links">Events/Calendar</a>

</button>

<div class="dropdown-content" id="myDropdown">

<a href="#">2017 Annual Awards Dinner</a>

<a href="#">2017 Fatherhood Jubilee</a>

<a href="#">Educational Choice Townhall</a>

</div>

</div>

   <div class="dropdown_get_involved">

    <button class="dropbtn" onclick="myFunction()">

    <a href="#" class = "nav_Links">Get Involved</a>

</button>

<div class="dropdown-content" id="myDropdown">

<a href="#">Membership</a>

<a href="#">Mentor</a>

<a href="#">Mentee</a>

</div>

</div>

  <div class = "nav_programs">

    <a href="#" class = "nav_Links">Programs</a>

</div>

  <div class = "nav_donate">

    <a href="#" class = "nav_Links">Donate</a>

</div>

    <div class="dropdown_more">

    <button class="dropbtn" onclick="myFunction()">

    <a href="#" class = "nav_Links">More</a>

</button>

<div class="dropdown-content" id="myDropdown">

<a href="#">100 Black Men</a>

<a href="#">Black Men's Health Project</a>

<a href="#">Member's Only</a>

</div>

</div>

    </nav>

<script>

function myFunction() {

    document.getElementById("myDropdown").classList.toggle("show");

}

// Close the dropdown if the user clicks outside of it

window.onclick = function(event) {

  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");

    var i;

    for (i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns;

      if (openDropdown.classList.contains('show')) {

        openDropdown.classList.remove('show');

      }

    }

  }

}

</script>

</body>

</html>

@charset "UTF-8";

/* CSS Document */

.dropbtn{

    background-color: rgba(48,48,48,1.00);

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

}

.dropdown {

    position: relative;

    display: inline-block;

}

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}

.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

    display: block;

}

.dropdown:hover .dropbtn {

    background-color: #3e8e41;

}

.container {

background-color: rgba(48,48,48,1.00);

color: rgba(255,255,255,1.00);

display: block;

margin-left: -10px;

margin-right: -10px;

}

.nav_Links{

color: rgba(255,255,255,1.00);

margin-top: 50px;

text-decoration: none;

font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;

font-style: normal;

}

.nav_programs {

margin-left: 514px;

margin-top: -34px;

max-width: 70px;

}

.nav_donate {

margin-left: 626px;

margin-top: -18px;

max-width: 55px;

}

.dropdown_more {

margin-left: 707px;

margin-top: -35px;

max-width: 55px;

}

.dropdown_about_us {

margin-left: 100px;

background-color: rgba(48,48,48,1.00);

color: white;

font-size: 16px;

border: none;

cursor: pointer;

max-width: 103px;

margin-top: -35px;

}

.dropdown_events {

margin-left: 210px;

margin-top: -50px;

max-width: 125px;

}

.home_nav {

margin-top: 0px;

padding-top: 50px;

padding-left: 1px;

max-width: 67px;

margin-left: 0px;

}

.dropdown_get_involved {

margin-left: 355px;

margin-top: -50px;

max-width: 115px;

}

.dropbtn_au{

    background-color: rgba(48,48,48,1.00);

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

}

.dropdown-content_au {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}

Views

875

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Javascript function not working

Community Beginner ,
Sep 17, 2017

Copy link to clipboard

Copied

I am using a Javascript function for my navigation menu. Why isnt the function working? Do I need a different function for each menu item?

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>100 Black Men of San Antonio - Prototype</title>

<link href="100style.css" rel="stylesheet" type="text/css">

</head>

<body>

<nav class = "container">

<div class = "home_nav">

<a href="#home" class = "nav_Links"><img src="100bmosalogo.jpg" width="25" height="12" alt="Home Logo"/>Home</a>

</div>

   <div class="dropdown_about_us">

    <button class="dropbtn" onclick="myFunction()">About Us</button>

    <div class="dropdown-content" id="myDropdown">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div>

    <div class="dropdown_events">

    <button class="dropbtn" onclick="myFunction()">

    <a href="#" class = "nav_Links">Events/Calendar</a>

</button>

<div class="dropdown-content" id="myDropdown">

<a href="#">2017 Annual Awards Dinner</a>

<a href="#">2017 Fatherhood Jubilee</a>

<a href="#">Educational Choice Townhall</a>

</div>

</div>

   <div class="dropdown_get_involved">

    <button class="dropbtn" onclick="myFunction()">

    <a href="#" class = "nav_Links">Get Involved</a>

</button>

<div class="dropdown-content" id="myDropdown">

<a href="#">Membership</a>

<a href="#">Mentor</a>

<a href="#">Mentee</a>

</div>

</div>

  <div class = "nav_programs">

    <a href="#" class = "nav_Links">Programs</a>

</div>

  <div class = "nav_donate">

    <a href="#" class = "nav_Links">Donate</a>

</div>

    <div class="dropdown_more">

    <button class="dropbtn" onclick="myFunction()">

    <a href="#" class = "nav_Links">More</a>

</button>

<div class="dropdown-content" id="myDropdown">

<a href="#">100 Black Men</a>

<a href="#">Black Men's Health Project</a>

<a href="#">Member's Only</a>

</div>

</div>

    </nav>

<script>

function myFunction() {

    document.getElementById("myDropdown").classList.toggle("show");

}

// Close the dropdown if the user clicks outside of it

window.onclick = function(event) {

  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");

    var i;

    for (i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns;

      if (openDropdown.classList.contains('show')) {

        openDropdown.classList.remove('show');

      }

    }

  }

}

</script>

</body>

</html>

@charset "UTF-8";

/* CSS Document */

.dropbtn{

    background-color: rgba(48,48,48,1.00);

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

}

.dropdown {

    position: relative;

    display: inline-block;

}

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}

.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

    display: block;

}

.dropdown:hover .dropbtn {

    background-color: #3e8e41;

}

.container {

background-color: rgba(48,48,48,1.00);

color: rgba(255,255,255,1.00);

display: block;

margin-left: -10px;

margin-right: -10px;

}

.nav_Links{

color: rgba(255,255,255,1.00);

margin-top: 50px;

text-decoration: none;

font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;

font-style: normal;

}

.nav_programs {

margin-left: 514px;

margin-top: -34px;

max-width: 70px;

}

.nav_donate {

margin-left: 626px;

margin-top: -18px;

max-width: 55px;

}

.dropdown_more {

margin-left: 707px;

margin-top: -35px;

max-width: 55px;

}

.dropdown_about_us {

margin-left: 100px;

background-color: rgba(48,48,48,1.00);

color: white;

font-size: 16px;

border: none;

cursor: pointer;

max-width: 103px;

margin-top: -35px;

}

.dropdown_events {

margin-left: 210px;

margin-top: -50px;

max-width: 125px;

}

.home_nav {

margin-top: 0px;

padding-top: 50px;

padding-left: 1px;

max-width: 67px;

margin-left: 0px;

}

.dropdown_get_involved {

margin-left: 355px;

margin-top: -50px;

max-width: 115px;

}

.dropbtn_au{

    background-color: rgba(48,48,48,1.00);

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

}

.dropdown-content_au {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}

Views

876

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 17, 2017 0
Adobe Community Professional ,
Sep 17, 2017

Copy link to clipboard

Copied

<div class="dropdown-content" id="myDropdown">

ID's can only be used once per document. In you case

document.getElementById("myDropdown").classList.toggle("show");

has a choice of 3 ID's to choose from, sending it into a frenzy

Have a look at this answer using the data- attribute: javascript - Dropdown menu using data- to show the submenu - Stack Overflow


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2017 1
LEGEND ,
Sep 18, 2017

Copy link to clipboard

Copied

If you are prepared to use jquery the script below should work, without having to alter any of your html coding.

<script

src="https://code.jquery.com/jquery-3.2.1.min.js"

integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.dropbtn').css('cursor' , 'pointer').click(function(){

$('.dropdown-content').hide();

$(this).next('.dropdown-content').show();

});

$('.dropdown-content').css('cursor' , 'pointer').mouseleave(function(){

$('.dropdown-content').hide();

});

});

</script>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2017 0
Adobe Community Professional ,
Sep 18, 2017

Copy link to clipboard

Copied

osgood_  wrote

If you are prepared to use jquery the script below should work, without having to alter any of your html coding.

The multiple use of the same ID still needs to be resolved.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2017 1
LEGEND ,
Sep 18, 2017

Copy link to clipboard

Copied

BenPleysier  wrote

osgood_   wrote

If you are prepared to use jquery the script below should work, without having to alter any of your html coding.

The multiple use of the same ID still needs to be resolved.

Just delete the id, as its redundant.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2017 0
Community Beginner ,
Sep 18, 2017

Copy link to clipboard

Copied

In the example, you sent me, what is the "data-related-panel"?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2017 0
osgood_ LATEST
LEGEND ,
Sep 19, 2017

Copy link to clipboard

Copied

kingpat27  wrote

In the example, you sent me, what is the "data-related-panel"?

I didn't send you the example, Ben did.

The 'data-related-panel' attribute looks for unique 'section' ids when you click on a link to show that specific section.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 19, 2017 1