How to replace the selection in the class="selected"?
For example, if I select "Select 1" from drop down, it will become:
<span class="selected">Select 1</span>
and vice versa if select "Select 2" from drop down, it will become:
<span class="selected">Select 2</span>
html
<section class="data-tab">
<div class="rank-dropdown" data-id="item">
<span class="selected">Select 1</span>
<ul class="dropdown-list">
<li class="dropdown-item hide" data-id="item">Select 1</li>
<li class="dropdown-item">Select 2</li>
</ul>
</div>
<div id="item" class="rank-list-wrap">
added class show-origin
</div>
</section>
javascript
$(document).ready(function(){
$('.dropdown-list .dropdown-item').click(function(){
var tab_id = $(this).attr('data-id');
var parent = $(this).closest('.data-tab');
$(parent).find('.dropdown-item').removeClass('hide');
$(parent).find('.rank-list-wrap').addClass('show-origin');
$(this).addClass('hide');
$(parent).find("#"+tab_id).removeClass('show-origin');
})
})
jsfiddle: https://jsfiddle.net/e9nrzmfL/3/
To achieve this you can set the text of the related .selected to match that of the clicked dropdown item.
Also note that parent in your code is already a jQuery object so you don't need to wrap it again multiple times. Additionally, jQuery 1.9.1 is rather outdated. You should update to at least 1.12.4 if you still need to support IE9 and lower, ideally 3.x if not.
$(document).ready(function() {
$('.dropdown-list .dropdown-item').click(function() {
var $item = $(this);
var tab_id = $item.data('id');
var $parent = $item.closest('.data-tab');
$parent.find('.dropdown-item').removeClass('hide');
$parent.find('.rank-list-wrap').addClass('show-origin');
$parent.find("#" + tab_id).removeClass('show-origin');
$parent.find('.selected').text($item.text()); // set the selected text
$item.addClass('hide');
})
})
.rank-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
background-color: #fff;
cursor: default;
padding: 0 7px;
height: 22px;
line-height: 22px;
border: 1px solid #ccd0d7;
border-radius: 4px;
}
.rank-dropdown:hover {
border-radius: 4px 4px 0 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
}
.rank-dropdown .selected {
display: inline-block;
vertical-align: top;
}
.rank-dropdown .dropdown-list .dropdown-item:hover {
background-color: #e5e9ef;
}
.rank-dropdown .dropdown-list {
position: absolute;
width: 100%;
background: #fff;
border: 1px solid #ccd0d7;
border-top: 0;
left: -1px;
top: 6px;
z-index: 10;
display: none;
border-radius: 0 0 4px 4px;
padding-inline-start: 0px;
}
.rank-dropdown:hover .dropdown-list {
display: block;
}
.rank-dropdown .dropdown-list .dropdown-item {
cursor: pointer;
margin: 0;
padding: 3px 7px;
}
.rank-list-wrap {
height: 500px;
display: none;
}
.rank-list-wrap.show-origin {
display: block;
}
.dropdown-item.hide {
display: none;
}
li {
list-style: none;
}
a[href]:focus,
*:focus {
outline: none;
}
ol,
ul {
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="data-tab">
<div class="rank-dropdown" data-id="item">
<span class="selected">Select 1</span>
<ul class="dropdown-list">
<li class="dropdown-item hide" data-id="item">Select 1</li>
<li class="dropdown-item">Select 2</li>
</ul>
</div>
<div id="item" class="rank-list-wrap">
added class show-origin
</div>
</section>
Related
I tried to implement Tab controls. However, when I run the page, the 1st instance will have all the fields from other tabs visible in the 1st tab itself. If I click on 2nd tab and then comeback to 1st tab, I works as expected.
View:
<style>
.tabs {
height: 1475px; width: 100%; text-align: left; }
.tab-nav-wrapper {
width: 100%; overflow-x: auto; position: relative !important; z-index: 999 !important; top: 3px; }
.tabs ul {
display: block; overflow-y: hidden; margin: 0px; }
.tabs ul li {
display: inline-block; border: 1px solid grey; border-bottom: 3px solid blue; background-color: white; }
.tabs ul li.active {
border: 1px solid black; border-bottom: 3px solid white; }
.tabs ul li a {
text-decoration: none; color: blue; padding: 10px; line-height: 25px; position: relative; font-weight: bold; }
.tab-content-wrapper {
position: relative !important; z-index: 1 !important; border: 3px solid blue; padding: 20px; min-height: 40px; }
.tab-content {
display: block; height: 700px; width: 100%; }
</style>
<body>
<div class="tabs">
<div class="tab-nav-wrapper">
<ul>
<li id="tab1Section" class="active">Corporation Details</li>
<li id="tab2Section">Contact Information</li>
<li id="tab3Section">Documents</li>
</ul>
</div>
<div class="tab-content-wrapper">
<div id="tab1" class="tab-content">
Content 1
</div>
<div id="tab2" class="tab-content">
Content 2
</div>
<div id="tab3" class="tab-content">
Content 3
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$(".tab-nav-wrapper li").click(function (e) {
e.preventDefault();
e.stopPropagation();
$(".tab-nav-wrapper li").removeClass("active");
$(this).addClass("active");
var target = $(this).find("a").attr("href");
$(".tab-content-wrapper").find(".tab-content").hide();
$(".tab-content-wrapper").find(target).show();
})
});
</script>
Below is the result I have. As you can see, last field in the tab 1 is the button. But, I am getting that Tab 2 connect below that and tab 3 content after tab 2.
When I click on tab 2 and comeback to tab 1, it works as expected.
Can someone, help me with this please?
Change to
.tab-content {
display: none;
height: 700px;
width: 100%; }
.tab-content + .tab-content{
display: none;
It should hide all tabs but first one.
than your script will activate necessary tab
I have two drag and two drop zones that I'd like to keep exclusive from one another. I've been playing around with the connectWith argument unsuccessfully and was hoping to get some help connecting sortable_alpha to droppable_alpha and sortable_numbers to droppable_numbers. I also need to be able to use the .append function to add a delete button inside the drop divs which I have code for in the second chunk I realize there's lots of great JQuery draggable posts but couldn't find one on distinguishing separate drop zones so thanks for any help!
Drag Works but Not Drop
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable();
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
Working on an Answer
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable({
drop: function (event, ui) {
// take the id of the dropped block
// then create a new, unique id
// then append a delete button to the block
// inside the drop numbers
var draggableId = ui.draggable.attr("id");
var newid = getNewId(draggableId);
$(this).append("
<div>
<div>
<div class="form-group drop_area">
<label class="control-label" for="${newid}">${newid}</label>
<button class="delete">Delete</button>
</div>
</div>
</div>")
}
}
});
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
In my page header I have a list of 6 categories and I'd like to add a sub menu for each category, but display it only when category is clicked. (I'd like to use only one handler in my script.js file, not add one for each category in particular. - less code)
Here is my HTML for the list in header:
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class=“sub-menu”></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class=“sub-menu”></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class=“sub-menu”></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class=“sub-menu”></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class=“sub-menu”></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class=“sub-menu”></div>
</li>
</ul>
This is the SCSS:
#menu {
position: absolute;
right: 25px;
top: 25px;
.menu_item {
position:relative;
font-family: $OpenSansSemibold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
div.sub-menu {
position:absolute;
top:40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
&:hover{
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
}
}
And here is what I tried so far, but it doesn't work:
$( ".menu_item" ).each(function() {
$(this).children().find(".sub-menu").toggle();
});
Any help would be much appreciated, thank you!
Just remove the .children() and it should work. .children() accesses direct children already, while .find() will traverse down the DOM tree from that element. So in your code, you were looking for any child (grandchild, etc) of direct children of .menu_item that was clicked. .sub-menu wasn't a child of direct children of .menu_item, but was rather already that element ;) I am using the .find() method here because it'll still work, even if your DOM changes. If you won't change anything in regards to your DOM structure of the menu, you are safe to use $(this).children().toggle();
var $subMenus = $(".menu_item").find(".sub-menu");
$(".menu_item").on("click", function() {
$subMenus.addClass("hidden");
$(this).find(".sub-menu").removeClass("hidden");
});
SCSS:
#menu {
.menu_item {
div.sub-menu {
....
&.hidden {
display: none;
}
}
}
}
Please try this:
jQuery( ".menu_item" ).click(function(e) {
jQuery(this).closest('#menu').find('.sub-menu').filter(':visible').hide(); // hides other open sub-menus
jQuery(this).find(".sub-menu").toggle(); // opens the clicked item's sub-menu
});
#menu {
position: absolute;
right: 25px;
top: 25px;
}
#menu .menu_item {
position: relative;
font-family: 'OpenSansSemibold';
font-size: 14px;
color: #333; /*fff; changed just for display */
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
}
#menu .menu_item div.sub-menu {
position: absolute;
top: 40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
#menu .menu_item:hover {
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class="sub-menu"></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class="sub-menu"></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class="sub-menu"></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class="sub-menu"></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class="sub-menu"></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class="sub-menu"></div>
</li>
</ul>
I am trying to make a drop down menu, but I want to show and hide drop down just by click on the button. Currently drop down is hiding even when I click on one of the children. How to fix it?
Fiddle:
<ul id="nav">
<li class="parent"><button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
Try it:
http://jsfiddle.net/zyfv6nd0/
$(document).ready(function() {
$('button').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
Change your selector from $('.parent') to $('.parent button'):
$(document).ready(function() {
$('.parent button').click(function() {
$(this).next('.sub-nav').toggleClass('visible');
});
});
#nav {
list-style: none;
padding: 0;
margin: 0;
}
#nav > li {
display: inline-block;
vertical-align: top;
position: relative;
}
#nav ul.sub-nav {
position: absolute;
min-width: 200px;
display: none;
top: 100%;
left: 0;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">
<button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li class="parent">
<button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
Drop down menu only by click on button example classList.toggle pure js
/* Cross-browser solution for classList.toggle() */
function myFunction2() {
var x = document.getElementById("myDropdown");
if (x.classList) {
x.classList.toggle("show");
} else {
var classes = x.className.split(" ");
var i = classes.indexOf("show");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("show");
x.className = classes.join(" ");
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
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: #f1f1f1}
.show {display:block}
<p>The classList property is not supported in Internet Explorer 9 and earlier.</p>
<div class="dropdown">
<button id="myBtn" class="dropbtn" onclick="myFunction2()">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
I am attempting to make a tabbed "table" of sorts but I am having trouble making it display the information.
$(document).ready(function() {
$('#orenk ul a').click(function() {
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
('.' + $(this).attr('id') + '_content').html()
);
});
});
body,
html,
div,
ul,
li,
a {
margin: 0;
padding: 0;
}
body {
font-family: arial;font-size:12px; color:#222;}
.clear {
clear: both;
}
a img {
border: none;
}
ul {
list-style: none;
position: relative;
z-index: 2;
top: 1px;
border-left: 1px solid #f5ab36;
}
ul li {
float: left;
width: 12.5%;
}
ul li a {
background: #ffd89b;
color: #222;
display: block;
padding: 6px 0px;
text-decoration: none;
border-right: 1px solid #f5ab36;
border-top: 1px solid #f5ab36;
border-right: 1px solid #f5ab36;
text-align: center;
}
ul li a.selected {
border-bottom: 1px solid #fff;
color: #344385;
background: #fff;
}
h1 {
display: block;
width: 600px;
margin: 0 auto;
padding: 20px 0;
color: #fff;
}
#orenk {
width: 900px;
margin: 0 auto;
}
#tabs {
width: 900px;
margin: 0 auto;
}
#content {
width: 900px;
margin: 0 auto;
height: 270px;
background: #fff;
z-index: 1;
text-align: center;
margin-bottom: 20px;
}
<div class="titlebg" style="padding: 4px; text-align: left; font-size: 20px;">
ORENK PROVINCE
</div>
<div id="orenk">
<ul>
<li>ORENK PROVINCE
</li>
<li>Glass Shores
</li>
<li>Torrid Terrain
</li>
<li>Muculent Plains
</li>
<li>Ambrosial Marsh
</li>
<li>Viscid Expanse
</li>
<li>Opulent Retreat
</li>
<li>Reedy Knolls
</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<div id="orenk_changer">
<img src="http://placehold.it/900x270">
</div>
<div id="glass_content" style="display: none;">Glass content test</div>
<div id="torrid_content" style="display: none;">torrid content test</div>
<div id="plains_content" style="display: none;">plains content test</div>
<div id="marsh_content" style="display: none;">marsh content test</div>
<div id="expanse_content" style="display: none;">expanse content test</div>
<div id="Opulent_content" style="display: none;">opulent content test</div>
<div id="knolls_content" style="display: none;">knolls content test</div>
</div>
I am VERY new to javascript and I can get it to display the id where I want the content but when I attempt to get it to show the html inside the container I am trying to call, it does nothing. It's incredibly frustrating. Any one care to point out what I am doing wrong and how to fix it?
jsBin demo
Two things wrong with your ('.' +
$('.' + ›missing $
$('#' + ›you need to target # (Id) elements, not .(class)
$('#orenk ul a').click(function( evt ) {
evt.preventDefault();
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
$('#'+ this.id +'_content').html() // missing $ and # instead of .
);
});
Also, a href="#" (instead of a href="javascript:void(0);") is quite enough if than inside JS you do Event.preventDefault()