We Keep Coding

Remove double-click on dropdown link

I'm not very knowledgeable in javascript. But I need a dropdown on a vertical menu that is pure javascript, so I copied/paste the script from W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
and modified it to fit the page style. This menu needs to be on multiple pages, so it's also an html include. I got it to somewhat work, but you have to double click the drop-drop down in order to close it and this needs to be a single-click. I've been searching for a solution for a couple weeks now and still not sure what I'm doing wrong. I can't use jquery, bootstrap or any outside library since it's not connected to the internet.
HTML:
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Codepen

The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.
You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:
(Run code snippet)
There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.
var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display= "block";
}
});
#content {
margin: 1.875em 0px 0.625em 0px;
width: auto;
background-color: #002f6c;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
display: inline-block;
overflow: hidden;
top: 9.375em;
}
.quick {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
font-family: sans-serif;
}
.quick a {
display: block;
height: auto;
padding-top: 0.625em;
padding-bottom: 0.625em;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
text-align: center;
text-decoration: none;
background-color: #888B8D;
}
.quick a:hover {
display: block;
width: auto;
height: auto;
color: #002F6C;
background-color: #FFD300;
}
.topvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmverthome {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.vertheader {
width: auto;
padding: 2%;
display: block;
text-align: center;
}
.vertbtn {
width: auto;
cursor: pointer;
display: block;
}
.vertbtn :hover {
background-color: #FFD300;
position: relative;
display: block;
}
a.backhome {
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
color: #fff;
text-align: center;
padding: 2%;
box-sizing: border-box;
}
a.backhome:hover {
color: #002f6c;
background-color: #FFD300;
position: relative;
display: block;
}
.quicklinks {
color: #fff;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
}
.drop-button {
padding-top: 0.625em;
padding-bottom: 0.625em;
text-decoration: none;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
color: #fff;
display: block;
border: none;
background-color: #888B8D;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.drop-button:hover {
color: #002f6c;
background-color: #FFD300;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.active {
background-color: #06a7e0;
color: white;
}
.dropdown-container {
display: none;
background-color: #b4e4f5;
border-bottom: solid 2px #06a7e0;
}
.dropdown-container > a {
background-color: #50c1e9;
border-bottom: solid 1px #06a7e0;
}
a {
display: block;
position: relative;
color: #f3f3f3;
text-decoration: none;
}
a:hover {
color: #fff;
position: relative;
}
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div>Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>

How to sort divs according to color?

What I need: I am developing a website using HTML, CSS, Javascript/JQuery. I have 6 divs. Based on conditions divs have to change their color,size, text and divs have to sort according to colors(red, orange and then green).
What I implemented: I have created three classes in CSS reddivs, orangedivs, and greendivs. Now the divs are changing their colors but they are not sorting according to colors. I tried to prepend them, then it's not according to expectations.
What I am struggling: I am unable to sort the divs according to colors. Any ideas are welcome! Below are supplements
createDiv_111(5100);
function createDiv_111(num) {
if (num >= 5000 && num <= 5300) {
var resize_to_red = document.getElementById('box0');
resize_to_red.classList.add("reddivs");
resize_to_red.innerHTML = "ERROR";
$("#divs_container").prepend(document.getElementById('yellow_reach_limit_box'));
} else if (num >= 20 && num <= 30) {
var resize_to_orange = document.getElementById('box0');
resize_to_orange.classList.add("orangedivs");
resize_to_orange.innerHTML = "changed to orange";
$("#divs_container").prepend(document.getElementById('yellow_reach_limit_box'));
} else if (num >= 30 && num <= 40) {
var resize_to_green = document.getElementById('box0');
resize_to_green.classList.add("greendivs");
resize_to_green.innerHTML = "changed to green";
}
}
.reddivs {
position: relative;
top: 15px;
width: 590px;
height: 155px;
background: #BE0A26;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
float: left;
color: white;
text-align: center;
margin: 10px 25px 10px 23px;
}
.orangedivs {
position: relative;
top: 30px;
line-height: 26px;
width: 151px;
height: 109.5px;
background: #E86B0B;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 10px 26px 10px 23px;
}
.greendivs {
position: relative;
top: 35px;
width: 140px;
height: 70px;
background: #00A096;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 40px 30px 20px 24px;
}
.container_for_alldivs {
width: 660px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_for_alldivs" id="divs_container">
<div id="box0" class="alldivs"></div>
<div id="box1" class="alldivs"></div>
<div id="box2" class="alldivs"></div>
<div id="box3" class="alldivs"></div>
<div id="box4" class="alldivs"></div>
<div id="box5" class="alldivs"></div>
</div>
I am posting code for box0 div, but condition for remaining divs are same except the id changes to box1 or box2,...,box5

flexbox is widely supported and you can also use it to reorder divs with css only:
Just add the following to your container:
display: flex;
flex-direction: column;
And add the order for the div, like this:
order: 3;
I also updated your script to loop through all boxes and take a random number from an array to test this.
Green divs are always first, then orange second and finally red third. Update the css to specify the ordering you require.
Example
//options array
var options = [25, 35, 5250];
$(".alldivs").each(function(i, box)
{
//get random number from array
var number = options[Math.floor(Math.random()*options.length)];
createDiv_111(number, box);
});
function createDiv_111(num, box)
{
if (num >= 5000 && num <= 5300)
{
var resize_to_red = box;
resize_to_red.classList.add("reddivs");
resize_to_red.innerHTML = "ERROR";
}
else if (num >= 20 && num <= 30)
{
var resize_to_orange = box;
resize_to_orange.classList.add("orangedivs");
resize_to_orange.innerHTML = "changed to orange";
}
else if (num >= 30 && num <= 40)
{
var resize_to_green = box;
resize_to_green.classList.add("greendivs");
resize_to_green.innerHTML = "changed to green";
}
}
.reddivs, .orangedivs,.greendivs {
/* No need to repeat these */
position: relative;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
text-align: center;
float: left;
color: white;
}
.reddivs {
top: 15px;
width: 590px;
height: 155px;
background: #BE0A26;
margin: 10px 25px 10px 23px;
order: 3;
}
.orangedivs {
top: 30px;
line-height: 26px;
width: 151px;
height: 109.5px;
background: #E86B0B;
margin: 10px 26px 10px 23px;
order: 2;
}
.greendivs {
top: 35px;
width: 140px;
height: 70px;
background: #00A096;
margin: 40px 30px 20px 24px;
order: 1;
}
.container_for_alldivs {
display: flex;
flex-direction: row;
width: 660px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_for_alldivs" id="divs_container">
<div id="box0" class="alldivs"></div>
<div id="box1" class="alldivs"></div>
<div id="box2" class="alldivs"></div>
<div id="box3" class="alldivs"></div>
<div id="box4" class="alldivs"></div>
<div id="box5" class="alldivs"></div>
</div>
p.s. I also tidied up your css to recycle any styles reused between colored divs.

If you really want to sort by css class names (which i find a bit of a hack) You can grab all elements and sort them by their className attribute.
Simple example:
$('#sort').on('click', function() {
var sortedElements = $('.greendivs, .orangedivs, .reddivs').sort(function(a, b) {
debugger
return a.className > b.className;
});
$('.container_for_alldivs').html(sortedElements);
});
.reddivs {
position: relative;
top: 15px;
width: 590px;
height: 155px;
background: #BE0A26;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
float: left;
color: white;
text-align: center;
margin: 10px 25px 10px 23px;
}
.orangedivs {
position: relative;
top: 30px;
line-height: 26px;
width: 151px;
height: 109.5px;
background: #E86B0B;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 10px 26px 10px 23px;
}
.greendivs {
position: relative;
top: 35px;
width: 140px;
height: 70px;
background: #00A096;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 40px 30px 20px 24px;
}
.container_for_alldivs {
width: 660px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sort">Sort</button>
<div class="container_for_alldivs" id="divs_container">
<div id="box0" class="alldivs">
</div>
<div id="box1" class="alldivs greendivs">
</div>
<div id="box2" class="alldivs orangedivs">
</div>
<div id="box3" class="alldivs reddivs">
</div>
<div id="box4" class="alldivs greendivs">
</div>
<div id="box5" class="alldivs reddivs">
</div>
</div>

jQuery click event is not working

I have a menu on the left where all the elements have the same class. I've added the event $('.menuitem').click and also tried several other options, even calling the event based on the div id but without success.
As there aren't any error messages on the browser console, I'm kinda lost on the search for the error. I appreciate if you could help me figure out what the problem is.
Here is the Fiddle
HTML:
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'><p class='glyphicon glyphicon-triangle-right'>ENTITIES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>COURSES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>STUDENTS</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>CLASSES</p></div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
DOM:
$(document).ready(function(){
console.log("loaded");
$('.menuitem').click(function(){
console.log("CLICKED 1");
});
$('#entity').click(function(){
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function(){
console.log('CLICKED 3');
});
});
As you can see, I tried adding the click event through several methods and I'm not getting it. Thanks a ton for your help.

Negative z-index will not let event to dispatch on elements.
$(document).ready(function() {
console.log("loaded");
$('.menuitem').click(function() {
console.log("CLICKED 1");
});
$('#entity').click(function() {
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function() {
console.log('CLICKED 3');
});
});
.header {
position: absolute;
background-color: #525252;
height: 5%;
width: 100%;
min-height: 30px;
display: block;
margin: 0;
z-index: 0;
font-weight: 700;
line-height: 175%;
font-size: 1.4em;
text-align: center;
color: #FFFFFF;
display: inline-block
}
.mainwindow .menupane {
position: relative;
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
//z-index: -1;
padding-top: 40px;
}
.mainwindow .contentpane {
position: relative;
display: inline-block;
width: 100%;
background-color: #FFFFFF;
margin: 0;
//z-index: -2;
padding-top: 40px;
}
.menuitem {
background-color: #525252;
position: relative;
width: 75%;
height: 1.5em;
min-height: 10px;
border-radius: 0.65em;
margin: 7.5%;
color: lightgray;
/*font-size: 0.8vw;*/
/*line-height: 1.5em;*/
padding-left: 10%;
border: 0.05em solid lightgray;
/*box-shadow: 0px 0px 1px 1px gray;*/
}
glyphicon-triangle-right {
transition: transform 180ms ease-in;
}
glyphicon-triangle-right.rotate90 {
transform: rotate(90deg);
transition: transform 180ms ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='header'>SISTEMA CONTROLE DE CURSOS</div>
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>ENTITIES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>COURSES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>STUDENTS</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>CLASSES</p>
</div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
Fiddle Demo

Your z-index CSS was causing issues. Here is an updated example without those so you can fix from there: https://jsfiddle.net/zxgkprw9/1/

your issue is not the binding of the event but the class .mainwindow .menupane having this property position: relative;
the events is added properly but due to this class the actual position of the element is different . Remove this property and all work fine
jsfiddle : https://jsfiddle.net/zxgkprw9/3/
.mainwindow .menupane{
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
z-index: -1;
padding-top: 40px;
}

Fading in an object when hovering over another one

I'd like to slide down a tooltip element when hovering on another element.
I tried using jQuery, but i'm experiencing that nothing will be faded in if I hover on countbox1. countbox1 is a timer made with javascript.
I don't think the script is wrong. I think it doesn't detect jQuery for some reason.
I also tried to download jQuery and put this in the "src:" directly.
$(document).ready(function(){
$("#countbox1").onmouseover(function(){
$("#tooltip").fadeIn();
});
$("#countbox1").onmouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="home">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
<div id="countbox1"></div>
<hr style="width: 500px;">
</div>

If all you want is the tooltip to enter the screen on hover of something else, I'd suggest using CSS transition.
If you nest the <p id="tooltip"> within the #countbox1 and put a :hover-event on that, you can get exactly the thing you want.
HTML
<div id=home>
<div id="countbox1">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
</div>
<hr style="width: 500px;">
</div>
CSS
#home {
height: 50%;
background: red;
}
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
height: 50px;
background: #f4f4f4;
}
#countbox1:hover #tooltip {
opacity: 1;
}
#tooltip {
width: 500px;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
height: 30px;
background: #0000ff;
position: absolute;
left: 50%;
margin-left: -250px;
top: -15px;
opacity: 0;
transition: all 1s;
}
Here's a working demo. Hover over the grey area for the tooltip to enter the view.
Here's a working demo where the tooltip enters the screen from the top.

You might be using deprecated methods.
Replace your code for the one below, and try again:
$(document).on('ready',function(){
$("#countbox1").on('mouseover',function(){
$("#tooltip").stop(true).fadeIn();
});
$("#countbox1").on('mouseout',function(){
$("#tooltip").stop(true).fadeOut();
});
});

You should use mouseover instead of onmouseover:
$(document).ready(function(){
$("#home").mouseover(function(){
$("#tooltip").fadeIn();
});
$("#home").mouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div id=home>
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p><div id="countbox1"></div>
<hr style="width: 500px;">
</div>
</body>
Check it out also on this JSFiddle.

Hover over div content to reveal new div content

<center>
<div class="trivlimp">
<center><div class="lyrics"><!-- |field_1| --></div></center>
</div>
<div class="imp">
<div class="trgls"><!-- |points| --> Gallons</div><br>
<div class="trals"><!== |field_2| --></div><br>
<div class="trpc"><!-- |posts| --> posts</div><br>
<div class="trttr"><!-- |field_3| --></div><br>
</div>
</center>
I'd like to be able to hover over the div "trivlimp" to show the div "imp" right on top of "trivlimp"; hiding the first div underneath the div "imp". I tried doing this by :hover but completely failed and only ended up making it more frustrating for myself. I'm not against using Jquery, but I'd like to do this completely by css; but if it is easier using jquery I'll use it.

http://jsfiddle.net/Thrw2/3/
html code
<center>
<div class="trivlimp">
<center><div class="lyrics"> |field_1| </div></center>
</div>
<div class="imp">
<div class="trgls"> |points| Gallons</div><br>
<div class="trals">|field_2| </div><br>
<div class="trpc"> |posts| posts</div><br>
<div class="trttr">|field_3|</div><br>
</div>
css code
.trivlimp { background-color:#FF0000;
width: 260px;
height: 400px;
text-align: center;
position: absolute; }
.imp { width: 260px;
height: 400px;
background-color:#676767;
display: none;
position: absolute;
top: 0; }
.lyrics {
margin-top: 50%;
background-color: #CC0066;
width: 180px;
padding: 5px;
height: 130px
overflow: auto;
text-align: justify;
text-transform: uppercase;
font-family: Georgia;
font-style: italic;
font-size: 10px;
line-height: 10px;
}
.trgls {
width: 190px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color:#6666FF;
text-transform: uppercase;
}
.trals {
width: 170px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #00FF00;
text-transform: uppercase;
}
.trpc {
width: 150px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #FFCC00;
text-transform: uppercase;
}
.trttr {
width: 130px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #009900;
text-transform: uppercase;
}
jquery
$(function(){
$('.trivlimp').hover(function() {
$('.imp').show();
},
function() {
$('.imp').hide();
});
});

I don't quite understand your question, but you could use the following:
.imp {
display: none;
}
.trivlimp:hover + .imp {
display: block;
}

I would use jQuery to work with the hover states. I'm somewhat not following the question as well. So I popped your code into JSFiddle and brewed up what I thought was along the lines of what you're looking for. I used jQuery's mouseover/mouseout:
$('.trivlimp').mouseover(function() {
$('.imp').show();
});
$('.trivlimp').mouseout(function() {
$('.imp').hide();
});
​http://jsfiddle.net/arsCr/

Do something like this: http://jsfiddle.net/chanckjh/PWtTw/
html:
<div class="trivlimp">
</div>
<div class="imp">
</div>​
css:
.trivlimp{
border: 1px solid red;
width: 500px;
height: 300px;
}
.imp{
border: 1px solid blue;
width: 500px;
height: 300px;
background: blue;
display: none;
}
​
jquery:
$(function() {
$('.trivlimp').hover(function() {
$('.imp').show();
}, function() {
$('.imp').hide();
});
});​