We Keep Coding

How to change script to use more UL select boxes?

I found this code for ul select box. I need 3 different ul select boxes. So I made some changes but now is slide up only last "Year" select box. Is there a problem with "selected" tag?
ORIGINAL CODE:
$("ul").on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').slideDown();
});
var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.slideUp();
});
ul {
height: 30px;
width: 150px;
border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }
a#submit { z-index: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li class="init">[SELECT]</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
<li data-value="value 3">Option 3</li>
</ul>
MY CODE:
$(".day ul").on("click", ".active", function() {
$(this).closest(".day ul").children('li:not(.active)').slideDown();
});
var allOptions = $(".day ul").children('li:not(.active)');
$(".day ul").on("click", "li:not(.active)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$(".day ul").children('.active').html($(this).html());
allOptions.slideUp();
});
$(".month ul").on("click", ".active", function() {
$(this).closest(".month ul").children('li:not(.active)').slideDown();
});
var allOptions = $(".month ul").children('li:not(.active)');
$(".month ul").on("click", "li:not(.active)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$(".month ul").children('.active').html($(this).html());
allOptions.slideUp();
});
$(".year ul").on("click", ".active", function() {
$(this).closest(".year ul").children('li:not(.active)').slideDown();
});
var allOptions = $(".year ul").children('li:not(.active)');
$(".year ul").on("click", "li:not(.active)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$(".year ul").children('.active').html($(this).html());
allOptions.slideUp();
});
.day, .month, .year{
float:left;
width:100px;
display:block;
width:auto;
height: 34px;
}
.day ul, .month ul, .year ul {
list-style-type:none;
cursor: pointer;
width: 100px;
}
.day ul li, .year ul li, .month ul li {
float: left;
width:100px;
text-indent: 5px;
height: 34px;
line-height: 34px;
border:1px solid #000;
background: #fff;
}
.day ul li.active, .month ul li.active, .year ul li.active {
}
.day ul li a, .month ul li a, .year ul li a {
text-decoration: none;
color: #000;
}
.day ul li:not(.active), .month ul li:not(.active), .year ul li:not(.active) {
float: left;
display: none;
}
.day ul li:not(.active):hover, .day ul li.selected:not(.active), .month ul li:not(.active):hover, .month ul li.selected:not(.active), .year ul li:not(.active):hover, .year ul li.selected:not(.active) {
background: #f5f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="day">
<ul>
<li class="active">Day</li>
<li>01.08</li>
<li>02.08</li>
<li>03.08</li>
<li>04.08</li>
<li>05.08</li>
</ul>
</div>
<div class="month">
<ul>
<li class="active">Month</li>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
<div class="year">
<ul>
<li class="active">Year</li>
<li>2016</li>
<li>2017</li>
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ul>
</div>

you just need to wrap up the original code with an iterator and your problem will be solved.
I have create an example on codepen with 3 UL tags, you can copy and paste the UL blocks to have the same code work on all UL tags
This is what your js code should look like.
JS:
$(document).ready(function(){
$("ul").each(function(){
var $thisUL = $(this);
$thisUL.on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').slideDown();
});
var allOptions = $thisUL.children('li:not(.init)');
$thisUL.on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$thisUL.children('.init').html($(this).html());
allOptions.slideUp();
});
});
});

A block element isn't displayed in Chrome under Mac OS

The submenu (the "lvl2" class) gets displayed upon mouseover in all browsers but MacOS Chrome.
OS version: 10.10.4,
chrome version: 45.0.2454.85
Here's the code: http://jsfiddle.net/166nj6rp/2/
JS
$(document).ready(function () {
$('#main_menu ul.lvl1 > li').on('mouseenter', function () {
$(this).find('ul').show(); //.css('display', 'block');
}).on('mouseleave', function () {
$(this).find('ul').hide();
});
});
HTML
<div id="main_menu">
<ul>
<li> Main
<ul class="lvl1">
<li> Mouseover here
<ul class="lvl2">
<li> First
</li>
<li> Second
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Styles
#main_menu {
background:#333;
color:#cccccc;
height:43px;
position:relative;
}
#main_menu ul {
list-style:none;
display:block;
padding-left:0px;
}
#main_menu > ul {
height:43px;
}
#main_menu > ul > li {
display:inline;
position:relative;
line-height: 37px;
}
#main_menu > ul > li > a {
padding:9px 3px 10px 8px;
}
#main_menu > ul > li > ul {
display:block;
background:#333;
position:absolute;
left:-1px;
top:30px;
min-width:180px;
z-index:999;
}
#main_menu > ul > li li a {
display:block;
}
#main_menu > ul > li li a:hover {
background:#555;
}
#main_menu ul.lvl1 > li:hover {
background:#555;
}
#main_menu ul.lvl1 > li {
position:relative;
}
#main_menu ul.lvl2 {
display:none;
position: absolute;
top:0px;
left:150px;
background:#333;
min-width:150px;
max-width:300px;
}
#main_menu > ul li > a {
color:#ccc;
font-size:15px;
}

If think its all with (absolute positioning inside inline element):
#main_menu > ul > li {
/* display: inline; */
}
Solution: wrap your second ul in div or get rid of "inline" property.

Change 'display:inline' into 'display:block'. It worked.
#main_menu > ul > li {
display:block;
position:relative;
line-height: 37px;
}

How to change visibility with onclick

Hi I'm new to Javascript and since there is no onclick for css I need a little help.
This is my html:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>
and this is my css:
#dropnav {
position:relative;
z-index:100;
top:-60px;
left:18%;
background-size:18%;
}
#dropnav ul {
padding:0px;
margin:0px;
}
#dropnav ul li {
display:inline;
float:left;
width:68.5%;
list-style-type:none;
border-style:solid;
border-width:1px;
font-family:arial;
height:50px;
}
#dropnav ul li a {
background-color:#808080;
color:#FFFFFF;
text-decoration:none;
line-height:50px;
display:block;
padding-left:36.2%;
width:63.8%;
}
#dropnav ul li a:hover {
background-color:#666666;
}
#dropnav ul li ul li {
width:99.8%;
}
#dropnav ul li ul li a{
background-color:#666666;
}
#dropnav ul li ul li a:hover {
background-color:#333333;
}
#dropnav ul li ul {
visibility:hidden;
}
#dropnav ul li:onclick ul {
visibility:visible;
}
Now I need the :onclick to work so if you could fix it that would be great. Thanks for your help

One way to change visibility onclick is by adding an event attribute to your html tag:
onclick="this.style.visibility='hidden';"
For example, here is your navigation bar with disappearing links:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>

Drop this (it's useless):
#dropnav ul li:onclick ul {
visibility:visible;
}
Add This:
#dropnav ul li.open ul {
visibility:visible;
}
JS:
$('#dropnav ul li').click(function(){
$(this).addClass('open');
});
Just adding a class, which can be further dealt with in plain CSS. This way your application won't be bound by any strict laws.

You can do this with pure css3 by abusing the :not pseudo class. For example you can trigger an animation after an onclick has happened.
Click
<style>
#btn:not(:active) {
/* now keep red background for 1s */
transition: background-color 1000ms step-end;
}
#btn:active {
background: red;
}
</style>
Try it - http://jsfiddle.net/WG4Sf/
Here is a good article on CSS click events and if you should use them. http://www.vanseodesign.com/css/click-events/

You can do something like this
<html>
<head>
<script type="text/javascript">
function change()
{
document.getElementById("d").style.visibility="hidden";
}
</script>
</head>
<body>
Click Me<br/>
<div id="d">This is just example</div>
</body>
</html>

Try this:
$('#dropnav ul li').click(function() {
$(this).parent().css('visibility','visible');
})

try this.
:active is ur required css property
WORKING SAMPLE
I have just changed the visibility property for my convinience. U can change it to what u need exactly.

Jquery ui: How to toggle backup when mouse out?

I have the following code. When I mouse over/hover over the drop down box it opens up.
How do I make the drop down box toggle back up for the mouseout?
CSS in the <head>
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a {color:0092DD !important;text-decoration:none; outline:none;}
.dropdown a:visited { color:#0092DD; text-decoration:none; outline:none;}
.dropdown a:hover { color:#0092DD;}
.dropdown dt a:hover, .dropdown dt a:focus
{ color:#0092DD !important; border: 1px solid #0092DD;}
.dropdown dt a {background:#fff url(./img/arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #0092DD; width:47px; border-radius:6px;
-moz-border-radius:6px }
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#ccc none repeat scroll 0 0; border:1px solid #000; color:#0092DD; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:117px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block; color:#000 !important;}
.dropdown dd ul li a:hover { background-color:#777; color:#fff !important}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>drop down with CSS and jQuery - demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<dl id="sample" class="dropdown">
<dt><span>Actions</span></dt>
<dd>
<ul>
<li>UK<img class="flag" src="br.png" alt="" /><span class="value">UK</span></li>
<li>France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>
Javascript also in the <head>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").hover(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
alert(getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('hover', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").hover(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>

Vertical sliding / toggle menu

I'd like to use the vertical sliding/toggle menu, please see my code below, at the moment the menu toggles only when you click on the + sign, please see the code below.
I'm trying to work out a way when you click on the category name eg Posts and the sub menu would open (same functionality with the +) and the page would go to Posts page. And when you click on the + sign, the function and the page stay the same.
How can I target this task? Your help / suggestion is appreciated.
Thank you!
<html>
<head>
<style type="text/css">
body{background:#CCC;}
#container{margin:0 auto; background:white; border:1px solid #999; width:400px; padding:20px; -moz-border-radius:10px;-webkit-border-radius:10px; overflow:hidden;}
#menu {text-align:left;}
/*Toggle Area*/
#menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px solid white; border-left:1px solid #E0E0E0; color:#999;}
#menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}
/*Menu Setup*/
#menu ul{padding:0; margin:0; width:150px;}
#menu ul ul{border:1px solid #CCC;overflow:hidden;}
#menu ul.navmenu li {margin:0; list-style:none;float:left;}
#menu ul.navmenu li li {float:none;}
/*Links*/
#menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
#menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
/*Heading Outer div*/
#menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
/*Header Links*/
#menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
/*Header Link Hover*/
#menu ul.navmenu .menutop a:hover{color:#333;}
/*Removes white border for the first header*/
#menu ul.navmenu li:first-child .menutop a {border-width:0px;}
/*Single Menu Width Fix*/
#menu ul.navmenu .menusingle a{width:140px;}
/*Border Radius and Special Border Width*/
#menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}
</script>
</head>
<body>
<div id="container">
<div id="menu">
<ul class="navmenu">
<li><div class="menutop">Posts<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Tags</li>
</ul>
</li>
<li><div class="menutop">Pages<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Edit</li>
</ul>
</li>
<li><div class="menutop menusingle">Comments</div></li>
<li><div class="menutop">Users<div class="toggle">+</div></div>
<ul class="submenu">
<li>Manage</li>
<li>Add New</li>
<li>Profile</li>
</ul>
</li>
</ul>
</div></div>
</body>
</html>

This is code I have used to do exactly that, except I used arrow images instead of + and - but you should be able to modify it. Hope it helps!
Edit:
I've put the code below onto JSFiddle so you can try it out: http://jsfiddle.net/CrxAg/3/
HTML:
<div id="menu">
<div class="submenublock" id="submenu1"><h3>Category1</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
<div class="submenublock" id="submenu2"><h3>Category2</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
</div>
JS:
$(document).ready(function(){
$('div.submenublock > ul').hide();
$("div.submenublock > h3").css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
$('div.submenublock > h3').click(function() {
$(this).next().slideToggle('fast',function(){
//set arrow depending on whether menu is shown or hidden
if ($(this).is(':hidden')) {
$(this).prev().css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
} else {
$(this).prev().css("background", "url(images/menuarrowup.gif) no-repeat right bottom");
}
return false;
});
});
/* change appearance of h3 element on hover to make it look like a link */
$('div.submenublock > h3').hover(over, out);
function over(event) {
$(this).find("a").css("color", "#663");
$(this).css("cursor", "pointer");
}
function out(event) {
$(this).find("a").css("color", "");
$(this).css("cursor", "default");
}
/*end hover code*/
});