I am trying to implement a Selectbox which have some checkboxes in that selectbox like an image below. When i click on the select box it open the check box which exist in other div i have used z-index but its not working
it looks like this
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one"/>First checkbox</label>
<label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
<label for="three"><input type="checkbox" id="three"/>Third checkbox</label>
</div>
</div>
</form>
<div class="styled-select slate">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>
This is CSS:-
<style>
.multiselect {
width: 200px;
height: 20px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 14px;
height: 29px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 268px;
}
.styled-select.slate
{
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 34px;
width: 240px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 34px;
width: 268px;
}
#Sheraz, rather than modifying your code simply update with the following working code:
HTML
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Apple" />Apple</li>
<li>
<input type="checkbox" value="Blackberry" />Blackberry</li>
<li>
<input type="checkbox" value="HTC" />HTC</li>
<li>
<input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
<li>
<input type="checkbox" value="Motorola" />Motorola</li>
<li>
<input type="checkbox" value="Nokia" />Nokia</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
CSS
body {
font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
color: #fff;
padding: 50px;
width: 300px;
margin: 0 auto;
background-color: #374954;
}
.dropdown {
position: absolute;
top:50%;
transform: translateY(-50%);
}
a {
color: #fff;
}
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.dropdown dt a {
background-color: #4F6877;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #4F6877;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
button {
background-color: #6BBE92;
width: 302px;
border: 0;
padding: 10px 0;
margin: 5px 0;
text-align: center;
color: #fff;
font-weight: bold;
}
JS
/*
Dropdown with Multiple checkbox select with jQuery - May 27, 2013
(c) 2013 #ElmahdiMahmoud
license: http://www.opensource.org/licenses/mit-license.php
*/
$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
$(".hida").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
}
});
http://codepen.io/elmahdim/pen/hlmri
Hope that helps, Good luck.
#Sheraj use this plugin from jquery..
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-with-Checkboxes-MultiSelect/
Related
I have a div, which acts as a landing place for a selection, kind of like a custom selection input. If you click on "Make Selection", a menu appears below. Then your selection (one or more items) will appear in that div.
I am having two issues I cannot figure out.
How to get each selection to show wrapped in .drop-item-selected, so that the selections look like individual boxes. (Right now the div wraps all the selection choices, if more than one is selected).
How to remove the .drop-item-inputs if they are checked from the drop down. The commented out javascript is what I tried, but that just removed the whole list.
Anyone have any ideas?
For #1, I am wanting the boxes to be wrapped in the divs, separately, so they appear like this:
Here is a jsfiddle.
$('#proposal-type').click(function() {
$('#proposal-type-drop').addClass('active');
});
$('.drop-item-input').on('change', function() {
var proposalVal = "";
$('.drop-item-input').each(function() {
if ($(this).is(":checked")) {
proposalVal += $(this).val();
//$(this).fadeOut();
};
/*if ($('.drop-item-input').is(':checked')) {
$('.drop-item').fadeOut();
}*/
$('#proposal-type').val(proposalVal).html("<div class='drop-item-selected'>" + proposalVal + "</div>");
$('#proposal-type-drop').removeClass('active');
});
});
#proposal-type-drop {
width: 45%;
display: none;
position: absolute;
}
#proposal-type-drop.active {
background: rgba(0, 0, 0, 1);
display: block;
height: auto;
z-index: 1;
}
[contentEditable=true]:empty:not(:focus):before {
content: attr(data-text)
}
.drop-item {
color: #FFF;
font-size: .9rem;
padding: 5px;
background: #000;
display: block;
width: 100%;
cursor: pointer;
}
.drop-item-input {
display: none;
}
.drop-item-selected {
background: blue;
padding: 5px;
font-size: .9rem;
width: auto;
display: inline-block;
margin: 0 3px;
}
.proposal-text {
width: 95%;
display: block;
height: 6em;
margin: 1.5% 2% 2.5% 2%;
!important
}
#proposal-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="proposal-type" contentEditable=true name="proposal_type" class="proposal-input" data-text="Make Selection"></div>
<div id="proposal-type-drop">
<label class="drop-item">A<input type="checkbox" class="drop-item-input" value="A"></label>
<label class="drop-item">B<input type="checkbox" class="drop-item-input" value="B"></label>
<label class="drop-item">C<input type="checkbox" class="drop-item-input" value="C"></label>
</div>
For what you asked for, just do:
$('#proposal-type').click(function() {
$('#proposal-type-drop').addClass('active');
});
$('.drop-item-input').on('change', function() {
var proposalVal = "";
var proposalHtml = "";
$('.drop-item-input').each(function() {
if ($(this).is(":checked")) {
proposalVal += $(this).val();
proposalHtml += '<span class="drop-item-selected">' + $(this).val() + '</span>';
$(this).closest('label').fadeOut();
};
$('#proposal-type').val(proposalVal).html(proposalHtml);
$('#proposal-type-drop').removeClass('active');
});
});
#proposal-type-drop {
width: 45%;
display: none;
position: absolute;
}
#proposal-type-drop.active {
background: rgba(0, 0, 0, 1);
display: block;
height: auto;
z-index: 1;
}
[contentEditable=true]:empty:not(:focus):before {
content: attr(data-text)
}
.drop-item {
color: #FFF;
font-size: .9rem;
padding: 5px;
background: #000;
display: block;
width: 100%;
cursor: pointer;
}
.drop-item-input {
display: none;
}
.drop-item-selected {
display: inline-block;
background: blue;
padding: 5px;
font-size: .9rem;
width: auto;
display: inline-block;
margin: 3px;
}
.proposal-text {
width: 95%;
display: block;
height: 6em;
margin: 1.5% 2% 2.5% 2%;
!important
}
#proposal-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="proposal-type" contentEditable=true name="proposal_type" class="proposal-input" data-text="Make Selection"></div>
<div id="proposal-type-drop">
<label class="drop-item">A
<input type="checkbox" class="drop-item-input" value="A">
</label>
<label class="drop-item">B
<input type="checkbox" class="drop-item-input" value="B">
</label>
<label class="drop-item">C
<input type="checkbox" class="drop-item-input" value="C">
</label>
</div>
Also on JSFiddle.
$('#proposal-type').click(function() {
$('#proposal-type-drop').addClass('active');
});
$('.drop-item-input').on('change', function() {
var proposalVal = "";
if ($(this).is(":checked")) {
proposalVal += $(this).val();
$('#proposal-type').append("<div class='drop-item-selected'>" + proposalVal + "</div> ");
$('#proposal-type-drop').removeClass('active');
$(this).closest('label').fadeOut();
}
/*if ($('.drop-item-input').is(':checked')) {
$('.drop-item').fadeOut();
}*/
});
#proposal-type-drop {
width: 45%;
display: none;
position: absolute;
}
#proposal-type-drop.active {
background: rgba(0, 0, 0, 1);
display: block;
height: auto;
z-index: 1;
}
[contentEditable=true]:empty:not(:focus):before {
content: attr(data-text)
}
.drop-item {
color: #FFF;
font-size: .9rem;
padding: 5px;
background: #000;
display: block;
width: 100%;
cursor: pointer;
}
.drop-item-input {
display: none;
}
.drop-item-selected {
background: blue;
padding: 5px;
font-size: .9rem;
width: auto;
display: inline-block;
margin: 0 3px;
}
.proposal-text {
width: 95%;
display: block;
height: 6em;
margin: 1.5% 2% 2.5% 2%;
!important
}
#proposal-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="proposal-type" contentEditable=true name="proposal_type" class="proposal-input" data-text="Make Selection"></div>
<div id="proposal-type-drop">
<label class="drop-item">A<input type="checkbox" class="drop-item-input" value="A"></label>
<label class="drop-item">B<input type="checkbox" class="drop-item-input" value="B"></label>
<label class="drop-item">C<input type="checkbox" class="drop-item-input" value="C"></label>
</div>
when one of menus is chosen and option in select tag, apply button can be worked to be placed to be dynamic html element in Panel below. when a user clicks cancel button, that dynamic html element will be deleted.
As for an issue, when a user chooses one menu, dynamic html element will be redundantly placed to be in panels.
For example,
apply menu 2 > create dynamic html element in panel of menu2 > cancel menu 2 > apply menu other menu (3 or 1) > redundantly create dynamic html elements in previous panel of menu 2 and current panel of menu.
How am I able to completely delete dynamic html element when I click cancel button??
$(function() {
$(".section4 ul li:first-child").addClass("on");
//section4 ul li on
$("section.section4 ul li").click(function() {
$(this).addClass("on");
$("section.section4 ul li.on").not(this).removeClass("on");
});
// panel
$(".PaNel").hide();
$(".PaNel:eq(0)").show();
//addEventListner
$(".section4 ul li").click(function() {
$(".PaNel").hide();
$("#tab" + ($(this).index() + 1)).show();
});
//메뉴 선택
$(".section2").find("article").click(function() {
$(this).addClass("On");
$("article.On").not(this).removeClass("On");
});
//비활성신청
$(".btn2").css({
"display": "none"
});
//상단 메뉴
$("article").click(function() {
if ($(this).hasClass("On") && $("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"background": "red"
});
//$(".btn2").css({"display":"block"});
} else {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
});
// while article is clicked, menuSelect.index() > 0
$("body").click(function() {
if ($("article").hasClass("On")) {
if ($("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"display": "none"
});
$(".btn2").css({
"display": "block"
});
}
}
})
$(".area_popup").addClass("none")
$(".end").addClass("none");
$(".section2").children("article").one("click", function() {
console.log($(this).index())
var target = $("#tab" + $(this).index())
$("#Apply").click(function() {
var menuSelect = document.getElementById("menuSelect");
//console.log(menuSelect);
switch (menuSelect.value) {
case "a":
case "b":
case "c":
case "d":
target.find(".Apply_Check").append("<div class='User'>" + menuSelect.value + "</div>");
break;
}
$(".end").removeClass("none");
$("#Apply").addClass("none");
//alert("신청 완료 되었습니다")
})
})
$(document).on("click", '.end', function() {
//본인꺼만
$(".User").remove();
$(".end").addClass("none");
$("#Apply").removeClass("none");
});
$("article").click(function() {
if (parseInt($(this).find("span").text()) == 0) {
//$(".button").css({"display":"none"});
//$(".btn1,.btn2, .end").css({"display":"none"})
//$(".btn4").css({"display":"block"});
$(".area_popup3").css({
"display": "block"
});
} else {
//$(".button").css({"display":"block"});
//$(".btn4").css({"display":"none"});
}
});
//메뉴 하$(단 클릭시 섹션 2 남은 수량이 없는 경우
$(".section4 ul").children("li").click(function() {
var article = $('article:eq(' + $(this).index() + ')')
if (parseInt(article.find("span").text()) == 0) {
$(".area_popup3").css({
"display": "block"
});
}
})
$("body").click(function(e) {
if ($("#menuSelect option:selected").index() == 0) {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
})
});
function fn_popup_close(name) {
//$('body').removeClass('fixed');
//body class removeClass
$('.' + name).hide();
}
function fn_popup_open(name) {
//$('body').addClass('fixed');
$('.' + name).show();
}
/*//////////////////reset//////////////////////////////////////*/
* {
margin: 0;
padding: 0;
}
body,
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
margin: 0;
padding: 0;
}
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
display: block;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
/*a:hover, a:focus{color:#aaa; text-decoration:none;}*/
body {
color: #333;
}
li {
list-style: none;
}
input[type="button"] {
cursor: pointer;
}
input[type=button],
select {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/*//////////////////reset//////////////////////////////////////*/
#wrap {
max-width: 100%;
margin: 0 auto;
}
/*//////////////section1/////////////////////////////////////*/
section.section1 {
width: 100%;
/*background:#F87141;*/
}
section.section1 .screen_info {
width: 100%;
overflow: hidden;
}
section.section1 .screen_info ul {
width: 300%;
overflow: hidden;
}
section.section1 .screen_info ul li {
width: 31.63%;
float: left;
padding: 10px 1% 10px .7%;
}
/*//////////////section2/////////////////////////////////////*/
section.section2 {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section2 h3 {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-indent: 2%;
}
section.section2 article {
width: 31.33%;
padding-left: 2%;
height: 100px;
float: left;
}
section.section2 article div {
border-right: 1px solid #ccc;
}
.On {
background: #d4dbdd;
}
/*section.section2 article:last-child{border-right:none;}*/
section.section2 article h2 {
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
}
section.section2 article p.FoodName {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 900;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
section.section2 article p.FoodCnt {
width: 90%;
height: 30px;
line-height: 30px;
text-align: right;
font-size: 13px;
}
/*//////////////section2/////////////////////////////////////*/
/*//////////////section3/////////////////////////////////////*/
section.section3 {
width: 100%;
padding-top: 30px;
}
section.section3 .Select {
border-top: 1px solid #ccc;
position: relative;
}
.Select {
display: block;
content: "";
clear: both;
}
section.section3 .Select p.Selected {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
section.section3 .Select p {
font-weight: 900;
text-indent: 9%;
}
section.section3 .Select p.Selected span {
cursor: pointer;
position: absolute;
right: 20px;
top: 4px;
}
section.section3 .Select p.Selected span img {
width: 10px;
}
.selection {
border-bottom: 1px solid #ccc;
}
/*.on{background:#ccc;}*/
section.section3 select {
width: 100%;
height: 30px;
background: #ECEFF0;
border: 1px solid #ccc;
border-width: 1px 0;
}
select#menuSelect::-ms-expand {
display: none;
}
/*IE*/
select#menuSelect {
appearance: none;
-webkit-appearance: none;
/*for chrome*/
-moz-appearance: none;
/*for firefox*/
background: url(./images/next_shadow.png) no-repeat right;
background-position-x: 97%;
background-size: 14px 24px;
text-indent: 2%;
}
section.section3 p.Avail_time {
width: 95%;
text-align: right;
line-height: 30px;
height: 30px;
padding-right: 5%;
}
section.section3 p input[type=button] {
width: 100%;
border: 1px solid #ccc;
border-width: 1px 0;
background: #F87141;
height: 40px;
color: #fff;
}
section.section3 p.btn1 input[type=button] {
background: #aaa;
}
section.section3 p.end input[type=button] {
background: #aaa;
}
.none {
display: none;
}
/*//////////////section3/////////////////////////////////////*/
/*//////////////section4/////////////////////////////////////*/
section.section4 {
padding-top: 30px;
}
section.section4 ul {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section4 ul li {
width: 25%;
height: 30px;
line-height: 30px;
float: left;
font-weight: 900;
font-size: 13px;
text-align: center;
background: #fff;
}
section.section4 ul li a {
display: block;
border-right: 1px solid #ccc;
}
.on>a {
background: #aaa;
color: #fff;
}
section.section4 ul li:last-child a {
border: none;
}
section.section4 .memo {
width: 100%;
}
section.section4 .memo input {
width: 100%;
}
section.section4 article.PaNel {
width: 98%;
padding-left: 2%;
height: 400px;
}
.Apply_Check {
width: 100%;
}
.Apply_Check p.Count {
width: 100%;
height: 50px;
line-height: 50px;
font-weight: 900;
}
#tab4 {
padding: 10px;
}
#tab4 p {
padding-bottom: 20px;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
.User {
width: 100%;
height: 50px;
background: #aaa;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="section2">
<h3>choose menu</h3>
<article>
<div>
<h2>menu 1.</h2>
</div>
</article>
<article class="scene_two">
<div>
<h2>menu 2.</h2>
</div>
</article>
<article class="scene_three">
<div>
<h2>menu 3.</h2>
</div>
</article>
</section>
<section class="section3">
<select id="menuSelect">
<option value="menu" selected="selected">choose one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<!--<div class="Select">
<p class="Selected" id="reasonSelect" onclick="result();">신청사유 선택<span><img src="./images/next_shadow.png" alt="arrow"/></span></p>
<div class="selection">
<p>외근/출장</p>
<p>당직</p>
<p>당직</p>
<p>기타</p>
</div>
</div>-->
<p class="btn1 button"><input type="button" value="apply" /></p>
<p class="btn2 button"><input type="button" value="apply" id="Apply" /></p>
<p class="end button"><input type="button" value="cancel" onclick="fn_popup_open('area_popup')" /></p>
<!--<p class="btn4 button"><input type="button" value="신청 마감" onclick="fn_popup_open('area_popup')"/></p>-->
<!--<select>
<option>dd</option>
<option>dd</option>
<option>dd</option>
<option>ddd</option>
</select>-->
</section>
</section>
<section class="section4">
<ul>
<li>menu1</li>
<li class="scene_two">menu2</li>
<li class="scene_three">menu3</li>
<li>info</li>
</ul>
<article class="PaNel" id="tab1">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl1">1</span></p>
</div>
</article>
<article class="PaNel" id="tab2">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl2">2</span></p>
</div>
</article>
<article class="PaNel" id="tab3">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl3">3</span></p>
</div>
</article>
<article class="PaNel" id="tab4">
information
</article>
</section>
</div>
You could use JQuery's empty command, it removes all child elements from the parent element
$("#parent").empty()
I am making multiselect on jQuery.
I have a some problems:
I need unique for each output. There are 3 blocks of choosing in code. i have an icons from font-awesome. Below I have inserted just a photos. I have to press on 1 icon and 1(!!!) block will open. How I have to do this? Please help!
$(".filterBlock .filter-ico").on('click', function() {
$(".filterDropdown dd ul").slideToggle('fast');
});
$(".filterDropdown dd ul li a").on('click', function() {
$(".filterDropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("filterDropdown")) $(".filterDropdown dd ul").hide();
});
$('.multiselect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.resultSelect').append(html);
$(".resultFilter").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".resultFilter");
$('.filterDropdown dt a').append(ret);
}
});
.filters {
width: 20%;
height: 100%;
background-color: #fff;
border-right: 1px solid #f7f7f7;
position: relative;
display: inline-block;
}
.filterBlock {
margin: 0 0 50px 0;
position: relative;
}
.filterBlock h3 {
margin: 30px 0 0 40px;
color: #a6a6a6;
font: 16px Helvetica;
}
.filterBlock .filter-ico {
position: absolute;
left: 100px;
font-size: 25px;
color: #5795f9;
cursor: pointer;
}
.filterBlock .filter-ico.sphere {
left: 190px;
}
.filterBlock .filter-ico.show {
left: 200px;
}
.filterDropdown {
position: absolute;
top: 10px;
left: 20px;
z-index: 5;
transform: translateY(-10%);
transform: translateX(10%);
}
.filterDropdown a {
color: #5795f9;
}
.filterDropdown dd,
.filterDropdown dt {
margin: 0px;
padding: 0px;
}
.filterDropdown ul {
margin: -1px 0 0 0;
}
.filterDropdown dd {
position: relative;
}
.filterDropdown a,
.filterDropdown a:visited {
color: #5795f9;
text-decoration: none;
outline: none;
font-size: 12px;
}
/*.filterDropdown dt a {
background-color: #fff;
display: block;
padding: 8px 20px 5px 10px;
min-height: 15px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 152px;
border:1px solid black;
}*/
.filterDropdown dt a span,
.resultSelect span {
cursor: pointer;
display: inline-block;
color: #5795f9;
margin: 0 0 0 20px;
/* padding: 0 6px 2px 0;*/
}
.filterDropdown dd ul {
background-color: #fff;
border: 0;
color: #5795f9;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 180px;
border: 1px solid black;
box-shadow: 0 0 10px 0 rgba(0, 0.5, 0, 0);
border-left: none;
border-top: none;
list-style: none;
height: 100px;
overflow: auto;
}
.filterDropdown span.value {
display: none;
}
.filterDropdown dd ul li a {
padding: 5px;
display: block;
}
.filterDropdown dd ul li a:hover {
background-color: #5795f9;
}
/* */
.mainSection {
width: 78%;
position: absolute;
display: inline-block;
}
.infoBlock {
display: block;
width: 520px;
height: 280px;
background: #fff;
margin: 50px 0 0 225px;
}
.infoBlock.new {
margin: 20px 0 0 225px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class = "filters">
<div class = "filterBlock">
<h3>Регіон</h3>
<span class = "filter-ico"><img src = "menu_dropdown_9971.ico"></span>
<dl class = "filterDropdown first">
<dt>
<span class = "resultFilter"></span>
<p class = "resultSelect"></p>
</dt>
<dd>
<div class = "multiselect">
<ul>
<li><input type="checkbox" value="Київ">Київ</li>
<li><input type="checkbox" value="Київ">Київ</li>
<li><input type="checkbox" value="Київ">Київ</li>
</ul>
</div>
</dd>
</dl>
</div>
<div class = "filterBlock sphere">
<h3>Сфера діяльності</h3>
<span class = "filter-ico"><img src = "menu_dropdown_9971.ico"></span>
<dl class = "filterDropdown first">
<dt>
<span class = "resultFilter"></span>
<p class = "resultSelect"></p>
</dt>
<dd>
<div class = "multiselect">
<ul>
<li><input type="checkbox" value="Судова система">Судова система</li>
<li><input type="checkbox" value="Прокуратура">Прокуратура</li>
</ul>
</div>
</dd>
</dl>
</div>
<div class = "filterBlock show">
<h3>Показувати спочатку</h3>
<span class = "filter-ico"><img src = "menu_dropdown_9971.ico"></span>
<dl class = "filterDropdown first">
<dt>
<span class = "resultFilter"></span>
<p class = "resultSelect"></p>
</dt>
<dd>
<div class = "multiselect">
<ul>
<li><input type="checkbox" value="Осіб з більшим показником ризику">Осіб з більшим показником ризику</li>
<li><input type="checkbox" value="Осіб з меньшим показником ризику">Осіб з меньшим показником ризику</li>
</ul>
</div>
</dd>
</dl>
</div>
</section>
This is the code that breaks the single click
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("filterDropdown")) $(".filterDropdown dd ul").hide();
});
You need to refactor that and figure out what the parent of the target SHOULD be to allow it to close when you click outside
I found perfect code for drop down nav bar. But I'm stuck trying to edit it for my needs. Original complete code is situated here: https://github.com/vandoan/Elli/blob/master/dropDownNav.html
And how it looks: http://codepen.io/Xia-lj/pen/KdKOxw
HTML:
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc...
</div>
</div>
</div>
CSS:
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS:
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
What I'm trying to get: drop down nav bar like in example, but with three buttons "History", "Philosophy", "Physics". And each of this three sections must contain few books' names, e.g:
History:-
The History of Herodotus.
Titus Livius. The History of Rome.
Ivan Krypiakevych. The Great History of Ukraine.
"Philosophy":-
Works by Plato.
Nicomachean Ethics By Aristotle.
Fables And Aphorisms by Hryhorii Skovoroda.
"Physics":-
Stephen Hawking. A Brief History of Time.
Yakov Perelman. Physics for Entertainment.
I would be grateful to hear from anyone who may be able to help. I'm new in Web-development.
How about something like this CodePen which is same example you provided just a bit modified on the HTML and CSS parts, inside div#sections_panel I've added 3 divs - you mentioned 3 sections in the question - with a .sub_sections class name.
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
padding:0 10px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > .sub_sections {
background: #333;
padding: 10px;
height: 258px;
margin:10px 2px 0 0;
color: #FC0;
width:calc(31% - 10px);
display:inline-block;
float:left;
}
#sections_panel > .sub_sections > a{
color:#EEE;
display:block;
padding:10px 5px;
text-decoration:none;
border-bottom:1px dotted #666;
}
#sections_panel > .sub_sections > a:hover{
color:#333;
background-color:orange;
}
#sections_panel > .sub_sections > h3{
color:orange;
text-align:center;
padding-bottom:5px;
border-bottom:1px #222 solid;
}
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div class="sub_sections">
<h3>Search Engines</h3>
Google
Yahoo!
Bing
</div>
<div class="sub_sections">
<h3>Social Networks</h3>
Facebook
Twitter
</div>
<div class="sub_sections">
<h3>Video Networks</h3>
Youtube
Vimeo
</div>
</div>
</div>
try this......
Html
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('The History of Herodotus,Titus Livius. The History of Rome,Ivan Krypiakevych. The Great History of Ukraine','sections_panel')">History <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Works by Plato,Nicomachean Ethics By Aristotle,Fables And Aphorisms by Hryhorii Skovoroda','sections_panel')">Philosophy <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Stephen Hawking. A Brief History of Time,Yakov Perelman. Physics for Entertainment','sections_panel')">Physics <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
</div>
</div>
</div>
CSS
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: auto;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS
function toggleNavPanel(text,x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
var books=text.split(",");
var html='';
for(var i=0; i<books.length; i++){
html+=(i+1)+") "+books[i]+"<br/>";
}
if (panel.style.height == maxH) {
panel.style.height = "0px";
panel.innerHTML="";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
panel.innerHTML="<div>"+html+"</div>";
navarrow.innerHTML = "▴";
}
}
are you looking for something like http://codepen.io/fwpolice/pen/pqlgy
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font: 13px Helvetica, Tahoma, serif;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 1 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Drop Item 1
</a>
</li>
<li>
<a href="#">
Drop Item 2
</a>
</li>
<li>
<a href="#">
Drop Item 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
asdf
</a>
</li>
</ul>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Maybe this toolbar is one for you:
http://w2ui.com/web/demo/toolbar
Hi guys I got an issue removing the class attribute from the grand parent of an input.
Here is my html:
<div class="settings">
<div class="settings-content">
<ul class="general-settings">
<li>
<label>Name</label>
<span class="hidden_elm">
<form class="name_form" id="myform" method="post" action="#">
<ul>
<li><label>First</label><input class="input-log" type="text" name="firstname" placeholder="First Name..."></li>
<li><label>Last</label><input class="input-log" type="text" name="lastname" placeholder="Last Name..."></li>
<li><hr></li>
</ul>
<input class="log-btn success-btn" type="submit" value="Save">
<input class="log-btn close_current" type="reset" value="Cancel">
</form>
</span>
</li>
</ul>
</div>
</div>
jQuery:
$(document).ready(function(){
var hide_elm = $('span.hidden_elm');
var clickon_elm = $('ul.general-settings > li');
var ul_backgrounf = $('ul.general-settings');
clickon_elm.on('click',function(){
//remove the class if it exists
$('.show_elm').removeClass('show_elm');
$('.current_elm').removeClass('current_elm');
//add the class attr to the current element
$(this).addClass('current_elm');
$(this).children('span').toggleClass('show_elm');
//$(this).css({'height':'auto'});
});
$('.close_current').on('click',function(){
//$(this).removeClass('current_elm');
$('.current_elm').removeClass('current_elm');
$(this).parent('span').removeClass('show_elm');
});
})
CSS:
div.settings{
margin-top: 10px;
}
ul.general-settings{
width: 100%;
/*padding-top:8px;*/
padding-bottom:8px;
border-top: 1px solid #ccc;
/*background-color: #f2f2f2;*/
/*border-bottom: 1px solid #ccc;*/
}
ul.general-settings > li{
width: auto;
padding: 1px;
margin: 0 auto;
height: 30px;
display: block;
line-height: 1em;
vertical-align: middle;
border-bottom: 1px solid #ccc;
}
/** change style of the li element of the current show_elm **/
li.current_elm{
background-color: #f2f2f2 !important;
height: auto !important;
cursor: default !important;
}
ul.general-settings > li:hover{
cursor: pointer;
background-color: #f2f2f2;
}
ul.general-settings > li > label{
position: relative;
float: left;
width: 20%;
text-align: left;
padding: 10px 5px;
color: #000;
font-size: 1em;
font-weight: 700;
}
ul.general-settings > li > label:hover{
cursor: pointer;
}
/** show the hidden element **/
ul.general-settings > li > span.show_elm{
margin: 0 auto;
padding: 0;
display: inline-block;
width: 70%;
padding: 5px 0;
}
span.hidden_elm{
display: none;
}
span.hidden_elm > form{
margin:0 auto;
padding: 0;
display: inline-block;
}
span.hidden_elm > form > input.log-btn{
top: 0;
right: 0;
float: left;
border: none;
cursor: pointer;
margin: 0 3px 0 0;
}
span.hidden_elm > form > ul{
width: 100%;
}
span.hidden_elm > form > ul > li{
display: block;
margin-bottom: 5px;
text-align: right;
width: 388px;
}
span.hidden_elm > form > ul > li > label{
padding-right: 5px;
}
hr{
background: #d9d9d9;
border-width: 0;
color: #d9d9d9;
height: 1px;
}
so i want to remove the class:current_elm and class:show_elm after i click on the cancel button which is an input:type=reset
Try using parents()
$('.close_current').on('click',function(){
$(this).parents('.current_elm').removeClass('current_elm');
$(this).parents('span').removeClass('show_elm');
});
If I understand what you need, you can try with this:
$( "input:reset" ).on("click", function() {
$(this).parents('span').removeClass("show_elm current_elm");
});