Making changes in HTML Table using Dropdown List - javascript

I want to show changes made to the value in any cell in a one row table from a drop down list to be in red. Each cell has an associated dropdown. However if the same value in the dropdown and the cell is clicked the value in the cell shouldn’t change color. I thought I could keep a cloned copy of the original Table cell data in a separate function - then compare any changes if they are made. However this information is deleted each time in the function shown here as a user goes from cell to cell. The table consists of a series of cells - one cell is included here.
// Attach listeners
window.onload = function() {
var cellData = document.querySelectorAll('.dropdown-content p').forEach(
node => node.addEventListener('click', displayCellData, false)
);
}
function displayCellData(evt) {
// to display the previous cell data
evt.stopPropagation();
var cell = this.closest('td');
var origCellVal = [];
// Array of original cell values
var previous = cell.previousElementSibling.innerHTML;
console.log(previous);
var cellVal = $(evt.target).text();
origCellVal[cell.cellIndex] = previous;
document.getElementById("displayArray").innerHTML = origCellVal;
if (cellVal != previous) {
previous = cellVal;
// only change the text color if cellVal changed
cell.previousElementSibling.innerHTML = "<span class='color-red'>" +
cellVal + "</span>";
if (previous = origCellVal[cell.cellIndex]) {
cellVal.innerHTML = "<span class='color-black'>" + cellVal +
"</span>";
}
}
}
table#t00, th,td {
border: 1px solid red;
width:80%;
margin-left:15%;
margin-right:15%;
}
table#t01 {
table-layout: fixed;
width: 100%;
background-color: #f1f1c1;
height: 50px;
text-align: center;
font-size: large;
}
table#t02 {
table-layout: fixed;
width: 100%;
background-color: #f1f1c1;
height: 50px;
text-align: center;
font-size: large;
}
.equal-width td {
width: 5%;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 5px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
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;
}
.color-red{
color: #F00;
}
.color-black{
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="displayArray"></p>
<table>
<tr>
<td>Closed</td>
<td>
<div class="dropdown">
<button class="dropbtn">Change?</button>
<div class="dropdown-content">
<p>OPEN</p>
<p>Closed</p>
</div>
</div>
</td>
</td>
. .
</tr>
</table>

You're creating a new, empty origCellValue array every time you call displayCellData(), so it doesn't hold the values from previous calls.
However, rather than using a separate array, I suggest you save the information in the DOM itself. You can use a dataset attribute on the element to save the information.
And rather than inserting new HTML with <span> elements, you can simply change the class list of the <td> itself.
cellVal.innerHTML is just wrong. cellVal is a string, not a DOM element.
// Attach listeners
window.onload = function() {
var cellData = document.querySelectorAll('.dropdown-content p').forEach(
node => node.addEventListener('click', displayCellData, false)
);
}
function displayCellData(evt) {
// to display the previous cell data
evt.stopPropagation();
var cell = this.closest('td');
var prev = cell.previousElementSibling;
if (!prev.dataset.origVal) {
prev.dataset.origVal = prev.innerText;
}
var origVal = prev.dataset.origVal;
if (evt.target.textContent == origVal) {
prev.classList.remove("color-red");
prev.classList.add("color-black");
} else {
prev.classList.remove("color-black");
prev.classList.add("color-red");
}
prev.textContent = evt.target.textContent;
}
table#t00,
th,
td {
border: 1px solid red;
width: 80%;
margin-left: 15%;
margin-right: 15%;
}
table#t01 {
table-layout: fixed;
width: 100%;
background-color: #f1f1c1;
height: 50px;
text-align: center;
font-size: large;
}
table#t02 {
table-layout: fixed;
width: 100%;
background-color: #f1f1c1;
height: 50px;
text-align: center;
font-size: large;
}
.equal-width td {
width: 5%;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 5px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.8);
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;
}
.color-red {
color: #F00;
}
.color-black {
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="displayArray"></p>
<table>
<tr>
<td>Closed</td>
<td>
<div class="dropdown">
<button class="dropbtn">Change?</button>
<div class="dropdown-content">
<p>OPEN</p>
<p>Closed</p>
</div>
</div>
</td>
</td>
. .
</tr>
</table>

Related

How to make Custom CSS select list appear as a modal when the button is clicked?

I have created a custom CSS select and need help to make the #drop in form of a modal.
So that whenever a user clicks on the dropdown button, it will open a modal containing a list of options. And selecting a list will show information on that particular list option.
Also, the #drop div does not appear in the middle of the screen.
I'm new to JS and have managed to create a structure. I'm sharing the code below. Please help me with the modal so that the entire thing works perfectly.
Thanks in advance.
PS: If you think there's some easy way of doing this please add the code to the answer.
<!-- HTML -->
<div class="dropdown">
<button onclick="toggleDrop(document.querySelector('#drop'))" class="dropbtn"></button>
<div id="drop" class="dropdown-content d-none">
<ul>
<li>Click for Bird Name</li>
<li>Click for Animal Name</li>
</ul>
</div>
</div>
<div class="tabs">
<!-- Bird Name -->
<div tab-name="dl-tabOne" class="dl-tabcontent">
Parrot
</div>
<!-- Animal Name -->
<div tab-name="dl-tabTwo" class="dl-tabcontent d-none">
Lion
</div>
</div>
<!-- CSS -->
.d-none {
display: none;
}
.dropbtn {
display: block;
font-size: 40px;
font-weight: 700;
margin: auto;
width: auto;
outline: none;
border: none;
border-bottom: 2px solid ;
border-bottom-style: dotted;
height: 60px;
cursor: pointer;
overflow: hidden;
color: #150ee6;
background: none;
}
.dropdown {
position: relative;
margin: 30px 30px 10px;
text-align: center;
}
.dropdown-content {
position: absolute;
background-color: #fff;
min-width: 250px;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 5px 4px -5px rgba(0, 0, 0, 0.1);
z-index: 1;
text-align: left;
padding: 20px;
}
.dropdown-content ul {
padding: 0;
}
.dropdown-content li {
list-style-type: none;
border-bottom: 1px solid #dfe1e5;
}
.dropdown-content li:last-child{
border: none;
}
.dropdown-content a {
color: #0d0d21;
padding: 15px 10px;
font-size: 1rem;
text-decoration: none;
list-style-type: none;
display: block;
font-weight: 600;
}
.dropdown-content a:hover {
background-color: #f2f2f2;
}
.tabs {
max-width: 720px;
margin: 0 auto;
}
.dl-tab-abt{
margin-top: 25px !important;
}
<!-- JS -->
setButtonInnerText(document.querySelector(".dropbtn"))
function openPage(id, a) {
const p = document.querySelector("[tab-name='" + id + "']");
const tabs = document.querySelectorAll(".tabs .dl-tabcontent");
for (var x = 0; x < tabs.length; x++)
tabs[x].classList.add("d-none");
if (p !== null) {
document.querySelector(".dropbtn").innerHTML = a.innerHTML;
p.classList.remove("d-none");
}
}
function toggleDrop(drop) {
drop.classList.toggle("d-none");
drop.onclick = function (e) {
drop.classList.add("d-none");
}
}
function setButtonInnerText(btn) {
const firstOption = btn.parentElement.querySelector("#drop a:first-child");
btn.innerHTML = firstOption.innerHTML;
}

Click for Dropdown not working when generated in a loop

I have a table that is populated from a database with a dropdown menu that is populated along side the table which is generated from code in the php. Im tying to use javascript and css to make each drop down open on click but I cannot seem to get it to work. I've included the code below. I initilly had the script working but it only worked on the first instance of the dropdown. I reviewed a similar post to what Im looking to do but it was to no avail.
CSS
background-color: #04AA6D;
color: white;
padding: 5px;
font-size: 12px;
border: none;
text-transform: uppercase;
}
.yardDropbtn i{
font-size: 12px;
top: 1px;
position: relative;
}
.yardDropdown{
position: relative;
display: inline-block;
}
.yard-dropdown-content{
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.yard-dropdown-content a{
color: black;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.yard-dropdown-content a:hover {
background-color: #ddd;
}
.yardDropBtnCt {
display: none;
background-color: #f1f1f1;
color: black;
/*margin-left: 5px;*/
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
text-transform: uppercase;
font-size: 12px;
}
.yardDropBtnCt:hover {
background-color: #ddd;
}
.trackBtn{
display: none;
background-color: #f1f1f1;
color: black;
margin-left: 5px;
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
}
.trackBtn:hover{
background-color: #ddd;
}
/*.yard-dropdown-content:hover{
background-color: #ddd;
}*/
.show_yard_Dropdown .yard-dropdown-content {
display: block;
}
.show_yard_Dropdown .yardDropbtn {
background-color: #3e8e41;
}
JavaScript
var dropDownDivY = document.querySelector(".yardDropdown");
/*dropDownButton.addEventListener("click", function(){
dropDownDivY.classList.toggle('show_yard_Dropdown');
});*/
dropDownButton.forEach(btn => {
btn.onclick = function() {
dropDownDivY.style.display = "block";
}
});
HTML
<tr>
<td width='50px' class='yard8'>6400'</td>
<td width='100px' class='yard8 track'>Receiving 1</td>
<td width='150px' class='yard8'></td>
<td width='150px' class='yard8'>
<td width='250px' class='yard8 destination'></td>
<td width='100px'class='yard8 length'>3455'</td>
<td width='100px' class='yard8 weight'></td>
<td width='150px' class='yard8 status'></td>
<td class='yard8'>
<div class='progressContainer'>
<div class='progress' style='width:54%'>54%</div>
</div>
</td>
<td class='yard8 remarks'></td>
<td width='59px'>
<div class="yardDropdown">
<button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
<div class="yard-dropdown-content">Edit TrackAEI Populate</div>
</div>
</td>
</tr>
<form action="" method="POST"></form>
document.querySelector(".yardDropdown");
The querySelector method only returns the first element matching the selector, so it can never work for more than the first row.
You need to use querySelectorAll instead and then loop over all the elements found:
let dropDowns = document.querySelectorAll(".yardDropdown");
for (let i = 0; i < dropDowns.length; i++) {
let dropDown = dropDowns[i]
dropDown.addEventListener('click', function () {
// do something, you can use the `i` variable to know which row has been clicked if you need to
})
}

Close dropdown menu when clicked on different dropdown

I wrote this HTML to create 2 dropdowns :
window.onclick = function(event) {
var targ = event.target;
var drp = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < drp.length; i++) {
if (drp[i].previousElementSibling == targ) {
targ.nextElemntSibling.classList.toggle("active");
targ.nextElemntSibling.classList.toggle("show");
} else {
drp[i].classList.remove('show');
drp[i].previousElementSibling.classList.remove('active')
}
}
}
.searchGrid {
display: flex;
grid-template-columns: repeat(4, 25%);
gap: 30px;
place-items: center;
}
/* CHOOSE CITY*/
.chooseCity {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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: #ddd
}
.show {
display: block;
}
/* CHOOSE YEAR*/
.chooseyear {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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: #ddd
}
.show {
display: block;
}
<div class="searchGrid">
<div class="chooseCity">
<button onclick="CityFunc()" class="dropbtn">Choose city</button>
<div id="cityDropdown" class="dropdown-content">
Los Angeles
New York
Toronto
Las Vegas
</div>
</div>
<div class="chooseyear">
<button onclick="yearFunc()" class="dropbtn">Choose year</button>
<div id="yearDropdown" class="dropdown-content">
1960
1970
1980
</div>
</div>
</div>
I found the JavaScript function which should close the dropdowns when I click on a different location in the website
But, When I click on the "Choose city" button, it opens the dropdown and when I click on the "Choose year" button, it will close the "Choose city" dropdown and open the new one, like it should.
For some reason when I click on the "Choose year" button and then click on the "Choose city", it will open the "Choose city" dropdown but won't close the "Choose year"
What am I missing here?
You have one mistake targ.nextElemntSibling it return undefined. Also
not declared functionsCityFunc() yearFunc(). See correct example in here
window.onclick = function (event) {
var targ = event.target;
var drp = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < drp.length; i++) {
if (drp[i].previousElementSibling === targ) {
drp[i].classList.toggle("show");
drp[i].previousElementSibling.classList.toggle("active");
} else {
drp[i].classList.remove("show");
drp[i].previousElementSibling.classList.remove("active");
}
}
};

How do I create a filter for content displayed using Javascript?

I'm building a film review site, where all of the content is generated on the main page from data input in the admin panel and placed into a container div.
I've got a basic sorting system (by ID, ascending/descending) already which works fine on my end, but I also want to be able to filter the films by genre (e.g if film is marked as Action on database, make all non-action films hidden.
This cannot be done by CSS alone as I'm not able to add classes to the content within the containers, the container for the film image is generated via JS.
I'm assuming I need to create a new function such as
function getFilmListByGenre(genreName)
Or something along those lines, but I don't know how I'd make it work.
Here is the current Javascript that I have, which creates the sort feature.
let db = new PouchDB('films');
let radios = document.getElementsByName("sort");
radios[0].addEventListener("change", getFilmList);
radios[1].addEventListener("change", getFilmList);
getFilmList();
function getFilmList(){
db.allDocs({include_docs: true, descending: radios[0].checked}).then(function(films){
let listContents = '';
for(let i = 0; i < films.total_rows; i++) {
let thisFilm = films.rows[i].doc;
let image = '<a class="btn" href="viewFilm.html?id=' + thisFilm._id +'"><img class="filmImage" src="' + thisFilm.image +'"></a>';
listContents += '<div class="filmRow">'+ image + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
})
}
I basically want to grab the value for genre (which can only be "Action", "Comedy", "Horror" or "Other") for each film from the database, then if the corresponding radio (named filter) is selected, all of the films which aren't labelled as that genre are hidden.
#import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
h1 {
color: #aaaaaa;
text-align: left;
}
.sortFilms {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #B2365F;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}
.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
#media only screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}
#media screen and (max-width:800px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border: 2px solid #e0e0e0;
background-color: #e0e0e0;
display: block;
margin-bottom: .625em;
border-radius: 20px;
}
table td {
display: block;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 15px;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
.oldFilm {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}
#oldTitle {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
padding-bottom: 20px;
}
td {
padding: 5px;
font-weight: bold;
}
table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
background: #ff6699;
}
.reviewImage {
width: 200px;
border-radius: 20px;
}
.filmRow img {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}
.filmRow {
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#filmContainer {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#date {
padding: 5px;
text-align: left;
width: 30%;
}
#date input {
width: auto;
}
#date label {
display: -webkit-inline-box;
}
#oldTitle2 {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
}
.genre {
padding: 5px;
text-align: left;
width: 60%;
}
.genre input {
width:auto;
}
.genre label {
display: -webkit-inline-box;
}
<div class="sortFilms">
<h2 id="formTitle">Latest reviews</h2>
<div id='filmContainer'></div>
</div>
<div class="oldFilm">
<h2 id="oldTitle2">Sort by</h2>
<div id="date">
<p><b>Age of review</b></p>
<label>Newer<input type="radio" name="sort" checked/></label>
<label>Older<input type="radio" name="sort"/></label>
</div>
<div class="genre">
<p><b>Genre</b></p>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>
</div>
</div>
You should seperate your display logic and your fetching logic, then you can just filter out the results that aren't the genre you wanted. I would do it something like this:
var db = {
allDocs: () => {
return new Promise((resolve) => resolve([{genre: 'Horror', title: 'The Hills Have Eyes'}, {genre: 'Comedy', title: 'Dumb and Dumber'}]))
}
}
function getFilmList() {
return db.allDocs();
}
function getFilmsByGenre(genre) {
return getFilmList().then(films => films.filter(film => film.genre === genre));
}
function displayFilms(films) {
let listContents = '';
for(let i = 0; i < films.length; i++) {
let thisFilm = films[i].title;
listContents += '<div class="filmRow">'+ thisFilm + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
}
document.getElementById('all').addEventListener('click', () => {
getFilmList().then(displayFilms)
})
document.querySelectorAll('[name="filter"]').forEach(radio => radio.addEventListener('change', (event) => {
getFilmsByGenre(event.target.parentNode.textContent).then(displayFilms)
}))
<div id="filmContainer"></div>
<button id="all">All</button>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>

two functions interfering with each other

So my first stab at web development is proceeding reasonably well.
However... I want to have two separate drop down menus, but the JavaScript functions are interfering with each other... That is, if both functions are active at the same time, clicking on one drop down will cause the other drop down to react or stop working. It is probably something massively stupid, but I have little time left. here is the code:
//Control sliding menu on screens smaller than a specified breakpoint.
(function(menu_button, links, breakpoint)
{
"use strict";
var menulink = document.getElementById(menu_button),
menu = document.getElementById(links);
menu.className = "start";
setTimeout(function()
{
menu.className = "collapsed";
}, 20);
menuLink.onclick = function()
{
if (menu.className === "displayed")
{
menu.className = "collapsed";
}
else
{
menu.className = "displayed";
}
return false;
};
window.onresize = function()
{
if (window.innerWidth < breakpoint)
{
menu.className = "collapsed";
}
};
})("menuLink", "navLinks", 700);
That was function No.1, here is No.2:
function dropFunction()
{
"use strict";
document.getElementById("myDropdown").classList.toggle("drop");
}
window.onclick = function(e)
{
"use strict";
if (!e.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var d = 0; d < dropdowns.length; d++)
{
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains("drop"))
{
openDropdown.classList.remove("drop");
}
}
}
}
and HTML if at all usefull:
<nav>
<p id="menuLink">MENU</p>
<ul class="displayed" id="navLinks">
<li>Home</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="dropdownContent" id="myDropdown">
<img class="externalLink" src="images/faceBook.png" style="width:20px">
<img class="externalLink" src="images/linkedIn.png" style="width:20px">
<img class="externalLink" src="images/soundCloud.png" style="width:20px">
</div>
and CSS:
.nav
{
display: inline;
position: absolute;
bottom: 220px;
padding-right: 60px;
width: 100%;
background-color: transparent;
font-family: "verdana";
font-size: 20px;
text-align: center;
}
.nav li
{
display: inline;
}
.nav a
{
display: inline-block;
padding: 50px;
text-decoration: none;
color: #E4E4E4;
}
.nav a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
.nav a:active
{
color: #5B4CA8;
}
li.drops
{
display: inline-block;
}
.dropdownContent
{
display: none;
position: absolute;
background-color: transparent;
box-shadow: none;
minimum-width: 20px;
}
.dropdownContent a
{
color: transparent;
text-decoration: none;
display: block;
text-align: center;
}
.drop
{
display: block;
}
#menuLink
{
width: 100%;
background-color: transparent;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#menuLink a
{
text-decoration: none;
font-family: "helvetica";
color: #E4E4E4;
}
#menuLink a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#menuLink a:active
{
color: #5B4CA8;
}
#navLinks
{
position: absolute;
list-style-type: none;
width: 100%;
background-color: transparent;
padding: 0;
margin: 0;
text-align: center;
z-index: 1;
opacity: 1;
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
#navLinks a
{
display: block;
padding: 10px;
font-family: "helvetica";
color: #E4E4E4;
text-decoration: none;
font-size: 18px;
}
#navLinks a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#navLinks a:active
{
color: #5B4CA8;
}
#navLinks.start
{
display: none;
}
#navLinks.collapsed
{
top: -12em;
opacity: 0;
}
Thanks for your help!
You have used the window.Onlcick event to specify behaviors for the dropdowns if the user is not clicking on something with class "drop". This event will fire if you click on any item in that window because events bubble up like that in JavaScript.

Categories