Develop Reference

Javascript Dropdown Staying open

In my site I made a simple dropdown menu, but my problem is that it won't close if mouseleave happens on the <span> that triggers the dropdown.
Here is my code:
//Find the dropdown span
var header = document.getElementById('drop');
//Find the ul with the links
var ul = document.getElementById('nav-dropdown');
//Get the width and apply it to the dropdown items
var width = drop.getBoundingClientRect().width;
ul.style.minWidth = width + "px";
//Round the corners on the last link
var links = document.getElementsByClassName('dropdown-link');
links[links.length - 1].style.borderRadius = "0 0 7px 7px";
var open = 0;
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
//What I've tried to fix it:
/*
header.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
});
*/
/*Stylesheet for this stuff*/
* {
font-family: arial;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
text-decoration: none;
list-style: none;
}
a:visited {
color: white;
}
a,
#drop {
color: white;
}
a:hover {
color: coral;
}
.header-links-container {
position: relative;
top: 0;
background: rgb(63, 83, 95);
width: 100%;
height: 80px;
opacity: .8;
z-index: 999;
}
.title {
font-weight: bold;
font-size: 30px;
padding: 20px 50px;
position: relative;
float: left;
color: white;
}
.header-links {
position: relative;
float: right;
vertical-align: middle;
}
.nav-links {
margin: auto;
padding-top: 20px;
padding-right: 30px;
}
.nav-link {
position: relative;
float: right;
padding: 0 20px;
font-size: 23px;
padding: 5px 10px;
margin: 5px;
background: #4471ba;
border-radius: 7px;
}
.nav-link:hover {
background: #4480ba;
color: #d1d1d1;
}
#nav-dropdown {
display: none;
margin-top: 42px;
margin-left: 5px;
position: absolute;
}
.dropdown-link {
color: black;
background-color: #ccc;
padding: 5px 10px;
}
.dropdown-link:hover {
color: #000;
background-color: #a7a7a7;
}
.dropdown-link:active {
color: white;
background-color: #3b8cfa;
}
<div class="header-links-container">
<h2 class="title">Title</h2>
<div class="header-links">
<ul class="nav-links">
<li class="nav-link">Photo Gallery</li>
<li class="nav-link">SLAP</li>
<li id="drop" class="nav-link"><span>Dropdown</span></li>
<ul id="nav-dropdown" class="jim">
<a href="#">
<li class="dropdown-link">Link 1</li>
</a>
<a href="#">
<li class="dropdown-link">Link 2</li>
</a>
<a href="#">
<li class="dropdown-link">Longer Link</li>
</a>
<a href="#">
<li class="dropdown-link">Vacuum</li>
</a>
</ul>
</ul>
</div>
</div>
<p>
Relavent JS lines start at Line 16
</p>
And here is the fiddle that might make more sense: https://jsfiddle.net/dLw1hu5n/6/
I've tried closing the dropdown like in the last code block, but then it won't stay open when you go to hover over the links. I've also tried making the menu close when the mouse hovers over the navbar div, but no luck there either.
Can I fix this or do I need to start from square 1?

I would prefere to solve this via css. However, in your case you can try the following:
function displayDropdown() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
}
function hideDropdown() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
}
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
displayDropdown();
});
ul.addEventListener("mouseover", function() {
displayDropdown();
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
hideDropdown();
});
header.addEventListener("mouseleave", function() {
hideDropdown();
});

Your JS is fine but your event listener for mouseleave needs to be on the enclosing div. This way your element stays open until you hover outside of the header
t.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
What is t?
var t = document.getElementById(t);
What element has id T?
Try this fiddle to find out https://jsfiddle.net/dLw1hu5n/12/

How can I make clickable list with sublinks ?

i am trying to make a clickable menu, and trying to make it toggle using javascript and css, but I want to make the each also to have sub-menus also toggle, and I trying to do it mainly with javascript, how can I make it?
Here is my code:
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">|||</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
<div class="child-dropdown">
Sublink 1
Sublink 1
Sublink 1
</div>
Link 3
<div class="child-dropdown">
Sublink 1
Sublink 1
Sublink 1
</div>
</div>
</div>
Javascript:
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
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[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
css
.dropbtn {
background-color: #cc0000;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
position:relative;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #e6e6e6;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e6e6e6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #cc0000}
.show {display:block;}

With the given markup, javascript would not be even necessary for links inside #myDropdown: you could just use :focus pseudoclass like so
#myDropdown a:focus + div {
display: block;
}
Of course this works as long as your link is focused: if you want to be able to have something else focused (or open many submenus) you could use a bit of javascript like
[].forEach.call(document.querySelectorAll('#myDropdown > a'), function(l) {
l.addEventListener('click', function() {
l.classList.toggle('open');
}, false);
});
or with event delegation on #myDropdown
document.getElementById('myDropdown').addEventListener('click', function(evt) {
var target = evt.target;
if (target.nodeName.toLowerCase() === 'a') {
target.classList.toggle('open');
}
}, false);
and this CSS
#myDropdown div { display: none; }
#myDropdown a.open + div { display: block; }
Codepen Demo

Disappearing drop down menu

I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}

Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.

You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>

With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>

html multiple columns unordered list with header

I have a unordered list that based on my Style Sheet will either have 1, 2 or 3 columns.
I want to create a heading for the list and it should also respond to the screen size, so if I have 2 column list I should see 2 headings align with the list, or 3 if I have 3 columns.
The list if items will be dynamic so there can be any amount of items listed.
Example
http://jsfiddle.net/francoist/AtX4K/1/
NOTE: the Log No Dimension (heading) in picture below is what I'm trying to add.
Result
CSS
body{
font-family: "Tahoma";
}
ul {
border-bottom: 1.5px solid #ccc;
border-top: 1.5px solid #ccc;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
margin: 0;
padding: 0;
list-style: none;
}
li{
position: relative;
border-bottom: 1px dotted #ccc;
list-style: none;
list-style-type: none;
width: 100%;
padding: 0;
}
ul li a {
float: right; /* width of icon + whitespace */
padding: 5px;
font-size: 14px;
}
labeltotal{
float: right;
font-size: 24px;
}
labeldetail{
font-size: 24px;
}
labeldetailsmall{
font-size: 14px;
}
#media (min-width: 480px) {
ul {
border-bottom: 1.5px solid #ccc;
border-top: 1.5px solid #ccc;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
margin: 0;
padding: 0;
list-style: none;
}
}
#media (min-width: 568px) {
ul {
border-bottom: 1.5px solid #ccc;
border-top: 1.5px solid #ccc;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
margin: 0;
padding: 0;
list-style: none;
}
}
#media (min-width: 768px) {
ul {
border-bottom: 1.5px solid #ccc;
border-top: 1.5px solid #ccc;
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
margin: 0;
padding: 0;
list-style: none;
}
}
HTML
<ul>
<li>
<labeldetailsmall>LOG000001 </labeldetailsmall><labeldetail>2,1 x2,3</labeldetail>
edit
delete
</li>
<li>
<labeldetailsmall>LOG000002 </labeldetailsmall><labeldetail>2,1 x 2,3</labeldetail>
edit
delete
</li>
<li>
</ul>

I do not recommend you to use this function, as it is rife with improper programming practices and may not be that efficient.
It works fine on the first page load, but on window resize, it becomes a 'little' hectic.
However, I wanted to challenge myself today and I took it on.
What this function basically does is that it gets the coordinates of all occurrences of a specified HTML tag (labeldetailsmall in this case), picks the elements closest to the top and appends a heading to each while removing the previously inserted heading elements.
The CSS is fuzzy and needs improving (for there is some overlapping of elements).
Once again, use this at your own risk... I just wanted to play with code, and ended up with this.
I just hope that you would get an idea of one way you could use to achieve what you want.
[UPDATED]
The jQuery:
function addThoseHeadings(elementTagInput, yourHEADING){
var elementTag = $( elementTagInput );
var allElementsObject = {positions : {}};
$(elementTag).each(function( index ) {
var theOffset = $(this).offset();
allElementsObject.positions[index] = {
left: theOffset.left,
top: theOffset.top
};
});
var arr = Object.keys( allElementsObject ).map(function ( key, subkey ) { return allElementsObject[key][subkey]['top']; });
var minimumOffset = Math.min.apply( null, arr );
$.each(allElementsObject.positions, function( indexUnwanted, valueOffsets ) {
if( valueOffsets.top == minimumOffset ){
var elementToAppendTo = document.elementFromPoint( valueOffsets.left, valueOffsets.top );
$( elementToAppendTo ).before( '<span class="replaceThese" style="left:'+(valueOffsets.left)+'px;top:'+(valueOffsets.top-35)+'px;">'+yourHEADING+'</span>' );
}
});
}
var yourHEADING = "Log No";
addThoseHeadings( "labeldetailsmall", yourHEADING );
$(window).resize(function() {
$( ".replaceThese" ).remove();
addThoseHeadings( "labeldetailsmall", yourHEADING );
});
The CSS (needs working on):
span {
display: inline-block;
position: fixed;
}
I hope that this would be of some use to someone!

Try this:
Instead of using px(pixels) for size, try using %.
eg: font-size: 300%;
Note: % value can be increased or decreased as you need.

Advanced Tab - Tab inside the Tab - JQuery

I am having a problem creating a Tab inside my already existing tab. The tab I have right now can be found http://jakobmillerwt.com/scripts.html. What it does right now is that I can tab between All-Knight-Paladin-Mage and open up alternatives underneath. What I want to do is to create a tab for each of the links inside the nav.
For instance. I press Knight and then open up links Killer Caiman, Blue Djnn and Quara. When I press any of those, I want the tab to slide to the side like the main tab does and it will show a div over the content inside.
<ul class="nav">
<li class="nav-one">All</li>
<li class="nav-two">Knight</li>
<li class="nav-three">Paladin</li>
<li class="nav-four last">Mage</li>
</ul>
<div class="list-wrap">
<ul id="featured">
<li>[30+] Terramite - Farmine </li>
<li>[30+] Chakoya - Svargrond</li>
</ul>
<ul id="core" class="hide">
<li>[100+] Killer Caiman - Farmine</li>
<li>[100+] Blue Djinn - Yalahar</li>
<li>[140+] Quara - Hydra Island</li>
</ul>
<ul id="jquerytuts" class="hide">
<li>Stuff in here!</li>
</ul>
<ul id="classics" class="hide">
<li>Stuff in here!</li>
</ul>
</div> <!-- END List Wrap -->
Here is the HTML code I have right now.
#example-one {
background: #E1E1E1;
padding: 10px;
margin: 0 0 15px 0;
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
width:420px;
border-radius:6px;
margin-left:auto;
margin-right:auto;
border:1px solid #CCC;
}
#example-one .nav { overflow: hidden; margin: 0 0 10px 0;}
#example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 14px; text-align: center; border: 0; border-radius:3px; font-family:Arial, Helvetica, sans-serif;}
#example-one .nav li a:hover { background-color: #111; }
#example-one ul { list-style: none; text-decoration:none;}
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; text-decoration:none;}
#example-one ul li a:hover, #example-one ul li a:focus { background: #999; color: white; border-radius: 3px; }
#example-one ul li:last-child a { border: none; }
#example-one li.nav-one a.current, ul.All li a:hover { background-color: #03F; color: white; }
#example-one li.nav-two a.current, ul.Knight li a:hover { background-color: #03F; color: white; }
#example-one li.nav-three a.current, ul.Paladin li a:hover { background-color: #03F; color: white; }
#example-one li.nav-four a.current, ul.Mage li a:hover { background-color: #03F; color: white; }
The CSS.
(function($) {
$.organicTabs = function(el, options) {
var base = this;
base.$el = $(el);
base.$nav = base.$el.find(".nav");
base.init = function() {
base.options = $.extend({},$.organicTabs.defaultOptions, options);
// Accessible hiding fix
$(".hide").css({
"position": "relative",
"top": 0,
"left": 0,
"display": "none"
});
base.$nav.delegate("li > a", "click", function() {
// Figure out current list via CSS class
var curList = base.$el.find("a.current").attr("href").substring(1),
// List moving to
$newList = $(this),
// Figure out ID of new list
listID = $newList.attr("href").substring(1),
// Set outer wrapper height to (static) height of current inner list
$allListWrap = base.$el.find(".list-wrap"),
curListHeight = $allListWrap.height();
$allListWrap.height(curListHeight);
if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
// Fade out current list
base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
// Fade in new list on callback
base.$el.find("#"+listID).fadeIn(base.options.speed);
// Adjust outer wrapper to fit new list snuggly
var newHeight = base.$el.find("#"+listID).height();
$allListWrap.animate({
height: newHeight
});
// Remove highlighting - Add to just-clicked tab
base.$el.find(".nav li a").removeClass("current");
$newList.addClass("current");
});
}
// Don't behave like a regular link
// Stop propegation and bubbling
return false;
});
};
base.init();
};
$.organicTabs.defaultOptions = {
"speed": 200
};
$.fn.organicTabs = function(options) {
return this.each(function() {
(new $.organicTabs(this, options));
});
};
})(jQuery);
And the Javascript.
I have tried to put the function inside the tab by using
$(function() {
$("#example-one").organicTabs();
});
But it does not want to work.