I'm trying to figure out how I can use bind to move the selected li's from box1 to box2 and from box2 back to box1. Stuck on this and need some help. Also when a li is selected and moved over to the next box by clicking Move Right, they stack on every click. How can I fix that?
code:
$(document).ready(function(){
$(".box1 ul li").click(function(){
if($(this).hasClass("active-li")==true)
{
$(this).removeClass("active-li");
}
else
{
$(this).addClass("active-li");
}
});
$(".box1 ul li").click(function(){
var x=$(this).data("drink");
$("#btt1").click(function(){
$(".box2 ul").append(x);
$(x).bind("click", bindLi);
});
});
$(x).bind("click", bindLi);
});
function bindLi(){
alert("hello");
}
CSS:
.box1{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:50px;}
.box2{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:100px;}
.button-container{width:80px; height:30px; float:left; margin-top:200px; margin-left:100px;}
.active-li{background-color:yellow;}
ul li:hover{cursor:pointer;}
HTML:
<div class="box1" id="box1">
<ul>
<li data-drink="beer">
Beer
</li>
<li data-drink="water">
Water
</li>
<li data-drink="soda">
Soda
</li>
<li data-drink="juice">
Juice
</li>
</ul>
</div>
<div class="button-container">
<input type="button" id="btt1" name="btt1" value="Move Right" />
<input type="button" id="btt2" name="btt2" value="Move Left" />
</div>
<div class="box2" id="box2">
<ul></ul>
</div>
JSFiddle:
https://jsfiddle.net/fgo455zt/
Please take a look at below code:
https://jsfiddle.net/fgo455zt/5/
We can simply the code as follows:
$(document).ready(function() {
$(".box1 ul li, .box2 ul li").click(function() {
$(this).toggleClass("active-li"); //highlight the clicked li
});
$("#btt1, #btt2").click(function() {
var sourceUL = null;
var targetUL = null;
//depending upon which button clicked we are moving selected li to and from source to target UL
if ($(this).attr("id") == "btt1") {
sourceUL = $(".box1 ul");
targetUL = $(".box2 ul");
} else {
sourceUL = $(".box2 ul");
targetUL = $(".box1 ul");
}
$(sourceUL).find("li.active-li").each(function() {
$(this).removeClass("active-li"); //removing the active class before moving the li
$(targetUL).append($(this));
});
});
});
Related
How in this example can I set the highlight of the selected tab?
And how can I set the first tab to be active when the page is opened, if none is set?
var $tabs = $('.tabs > div'), _currhash, $currTab;
function showTab() {
if($currTab.length>0) {
$tabs.removeClass('active');
$currTab.addClass('active');
}
}
$tabs.each(function() {
var _id = $(this).attr('id');
$(this).attr('id',_id+'_tab');
});
function anchorWatch() {
if(document.location.hash.length>0) {
if(_currhash!==document.location.hash) {
_currhash = document.location.hash;
$currTab = $(_currhash+'_tab');
showTab();
}
}
}
setInterval(anchorWatch,300);
.tabs > div { display:none;}
.tabs > div.active { display:block;}
a { display:inline-block; padding:0.5em;}
.tabs > div { padding:1em; border:2px solid #ccc;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
tab1
tab2
tab3
<div class="tabs">
<div id="tab1">content one</div>
<div id="tab2">content two</div>
<div id="tab3">content three</div>
</div>
Thank you!
JSFiddle
I have the following code. As soon as I move away the cursor the background color back to white right now. How can I select the li element when the user clicks?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-sm-2 col-md-2" id="sidebar-wrapper">
<div id="sidebar">
<ul class="nav list-group" style="cursor:pointer;">
<li class="active">
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order</a>
</li>
<li>
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order Jobs</a>
</li>
</ul>
</div>
</div>
Since you already use jQuery, why not just using the click function.
For selecting only one item:
$('.nav li').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
jsFiddle
For selecting multiple items:
$('.nav li').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
jsFiddle
In your CSS, override the background-color as follows. It's actually set on the <a> tag, not the <li> in Bootstrap.
.nav>li.active>a {
background-color: #ccc;
}
Use it like this:
<style type="text/css">
.nav li.active {
background-color:grey;
}
</style>
<div class="col-sm-2 col-md-2" id="sidebar-wrapper">
<div id="sidebar">
<ul class="nav list-group" style="cursor:pointer;">
<li class="active">
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order</a>
</li>
<li>
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order Jobs</a>
</li>
</ul>
</div>
</div>
and jQuery like this:
<script type="text/javascript">
$(document).ready(function() {
$("#sidebar li").click(function(){
$("#sidebar li").removeClass('active');
$(this).addClass('active') ;
});
});
</script>
You can do like this, where you add a label and an input to your li, and no script is needed.
Update fiddle
HTML
<label><input type="radio" class="hideme" name="li">
<a class="list-group-item">
<i class="icon-home icon-1x"></i>Work Order Jobs
</a>
</label>
CSS
label {
display: inline-block;
width: 100%;
}
.hideme {
display: none;
}
.hideme:checked + .list-group-item{
background-color: gray
}
You can add an active class to your links.
HTML
<a class="list-group-item active>Work Order</a>
CSS
.list-group-item.active {
background-color: gray
}
To change background-color on click, you have to use jQuery.
$( document ).ready(function() {
$(".nav li a").click(function(){
$('li a.active').removeClass('active');
$(this).addClass('active') ;
});
});
Updated JSFiddle
put your li tag in another a tag then use any of these pseudo-classes
w3schools pseudo classes
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
I am modifying some jQuery that shows a div when nav links are hovered.
html:
About
<div class="drop" id="drop-about">
<div class="drop-holder">
<div class="grey-block">
<strong class="title">Sub Nav</strong>
<ul>
more links ...
</ul>
</div>
</div>
</div>
jQuery to show dropdowns:
function initSlideDrops() {
var activeClass = 'drop-active';
var animSpeed = 300;
jQuery('#nav ul li').each(function() {
var item = jQuery(this);
var link = item.find('>a[data-drop^="#"]');
//if (!link.length) return;
// Modifications to add hover events to nav menu
if (!link.length) {
jQuery(this).on('mouseover', function (e) {
jQuery("li").removeClass("drop-active");
jQuery('.drop').each(function () {
jQuery(this).stop().animate({
height: 0
}, animSpeed);
});
});
return;
};
var href = link.data('drop');
var drop = jQuery(href).css({
height: 0
});
if(!drop.length) return;
var dropHolder = drop.find('>.drop-holder');
var close = drop.find('.btn-close');
function showDrop(elem) {
elem.stop().animate({
height: dropHolder.innerHeight()
}, animSpeed, function() {
elem.css({
height: ''
});
});
}
function hideDrop(elem) {
elem.stop().animate({
height: 0
}, animSpeed);
}
link.on('click', function(e) {
e.preventDefault();
item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);
if(item.hasClass(activeClass)) {
showDrop(drop);
hideDrop(drop.siblings());
} else {
hideDrop(drop);
location.href = link.attr('href');
}
});
close.on('click', function(e) {
e.preventDefault();
item.add(drop).removeClass(activeClass);
hideDrop(drop);
});
// Modifications to add hover events to nav menu
link.on('mouseover', function (e) {
e.preventDefault();
item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);
if (item.hasClass(activeClass)) {
showDrop(drop);
hideDrop(drop.siblings());
} else {
hideDrop(drop);
//location.href = link.attr('href');
}
});
drop.on('mouseleave', function (e) {
e.preventDefault();
item.add(drop).removeClass(activeClass);
hideDrop(drop);
});
});
}
This is all working, however the dropdown navigation causes the content to bump down, rather than sliding on top of the site body. I would like the main content to remain where it is, with the navigation showing on top when hovered. I have tried adding z-index during the animate event but could not get it to work. What is the proper way to accomplish this?
Any help is appreciated.
Edit:
SASS:
.drop{
#extend %clearfix;
overflow:hidden;
text-transform:uppercase;
letter-spacing: 1.65px;
.drop-holder{
overflow:hidden;
}
}
Try Adding position:absolute; to .drop-holder. See snippet below.
You will also want to remove overflow:hidden; from .drop.
.drop{
#extend %clearfix;
/* overflow:hidden; - Remove this */
text-transform:uppercase;
letter-spacing: 1.65px;
position:relative; /* add this so .drop is positioned relative to .drop */
}
.drop-holder {
position:absolute;
border:solid 1px teal; /*for demonstration*/
}
About
<div class="drop" id="drop-about">
<div class="drop-holder">
<div class="grey-block">
<strong class="title">Sub Nav</strong>
<ul>
more links ...
</ul>
</div>
</div>
</div>
<div>content <br />content <br />content <br />content <br />content <br />content <br />content <br />
</div>
Positioning property must be specified when using z-index.
Example. Apply
.drop{
#extend %clearfix;
overflow:hidden;
text-transform:uppercase;
letter-spacing: 1.65px;
position:relative; /*Positioning applied here*/
z-index:1;
}
This should fix your problem.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Having a nightmare ...
I have a list of social icons three social account, Twitter, Facebook, Pinterest.
However, as I have three twitter accounts I want it that when you click on the twitter icon you then see a sub menu of uls containing three li's for my other Twitter accounts.
<div class="socials">
<ul>
<li id="tweeter">
<a href=""><i class="icon icon-twitter">Twitter</i>
<ul class="subicons">
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</a>
</li>
<li><i class="icon icon-linkedin">Facebook</i></li>
<li><i class="icon icon-linkedin">Pinterest</i></li>
</ul>
</div>
CSS to pistion the list of three Twitter Accounts above
.socials ul li ul.subicons {
position:absolute;
top:-55px;
padding:0;
margin:0;
width:152px;
left:50%;
margin-left:-57px;
text-align:center;
}
.socials ul li ul.subicons li {display:block; margin:0 5px; width:40px; height:40px; text-indent:-9999px;}
.socials ul li ul.subicons li a.twitter-one {
background:red;
width:40px;
height:40px;
display:block;
}
.socials ul li ul.subicons li a.twitter-two {
background:blue;
width:40px;
height:40px;
display:block;
}
.socials ul li ul.subicons li a.twitter-three {
background:yellow;
width:40px;
height:40px;
display:block;
}
Based on the answer on that other thread Danko pointed to, your jQuery would have to look something like this:
Show/hide on click:
Option 1:
$('#tweeter').on('click', function(e){
e.preventDefault();
$(this).css( "display", $(this).css("display") === "none" ? "block" : "none" );
});
Option 2:
$(document).ready(function () {
$("#tweeter", this).on("click", function(e) {
e.preventDefault();
$(this).find(".subicons").toggle();
});
});
Show on click, hide on blur:
$(document).ready(function () {
$(".icon-twitter-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
$(".icon-twitter-2").on({
"click": function (e) {
e.preventDefault();
$(this).siblings(".subicons").show();
},
"blur": function () {
$(this).siblings(".subicons").animate({"opacity": "1"}, 500, function(){$(this).hide();});
}
});
});
Explanation:
The blur event handler uses an animation to delay the hide() command, so that users can click on any of the shown Twitter links (which will trigger the blur event) before they are hidden.
Demo:
Notice: I changed your original html a bit.
$(document).ready(function () {
$(".icon-twitter-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
$(".icon-twitter-2").on({
"click": function (e) {
e.preventDefault();
$(this).siblings(".subicons").show();
},
"blur": function () {
$(this).siblings(".subicons").animate({"opacity": "1"}, 500, function(){$(this).hide();});
}
});
});
a.trigger {
color:#000;
cursor:pointer;
display:block;
margin-bottom:10px;
text-decoration:none;
}
.subicons
/*, div.blur:blur p.twitter */
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<ul>
<li>
<a id="tweeter" href="" class="icon icon-twitter icon-twitter-1"><i>Twitter</i></a>
<ul class="subicons">
<li>Twitter 1</li>
<li>Twitter 2</li>
<li>Twittee 3</li>
</ul>
</li>
</ul>
</div>
<p style="margin-top:30px"><strong>Show on click, hide on blur:</strong></p>
<div class="socials click">
<ul>
<li>
<a id="tweeter" href="" class="icon icon-twitter icon-twitter-2"><i >Twitter</i></a>
<ul class="subicons">
<li>Twitter 1</li>
<li>Twitter 2</li>
<li>Twittee 3</li>
</ul>
</li>
</ul>
</div>
So I have a drop down menu:
JSFiddle Link:
http://jsfiddle.net/cGt4h/3/
HTML:
<div id="container">
<ul>
<li>
<a class='sign-in' href='#'>Login</a>
<div id="loginForm" class='log-content'>
<div>
User name:
<input type='text' />
</div>
<div>
Password:
<input type='text' />
</div>
<div>
<input type='button' value='Login' />
</div>
</div>
</li>
</ul>
</div>
SCRIPT:
$('.sign-in').click(function(e) {
e.preventDefault();
$('#loginForm').toggle();
});
$("#loginForm").mouseup(function() {
return false;
});
$(document).mouseup(function(e) {
if ($(e.target).parent(".sign-in").length == 0) {
$('#loginForm').hide();
}
});
CSS:
#container {margin: 0 auto;width:400px; position:relative; }
#loginForm {
width:200px;
background-color:gray;
color:white;
padding:10px;
display:none;
}
li {list-style: none;}
.sign-in {
background-color:gray;
color:white;
text-decoration:none;
}
.sign-in:hover {background-color:red;}
.open-menu {
display:block !important;
left:0;
}
It works fine but when I click on the .sign-in selector the dropdown doesn't close after it has been opened.
That's because your document.mousedown function is causing the form to hide, then your .sign-in click handler is toggling the form, causing it to show. This line:
if ($(e.target).parent(".sign-in").length == 0) {
evals to true, causing the form to hide, add an AND condition:
if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {
Demo: http://jsfiddle.net/cGt4h/4/
Try this:
$('.sign-in').click(function(e) {
e.stopPropagation();
e.preventDefault();
$('#loginForm').toggle();
});
$("#loginForm").mouseup(function() {
return false;
});
$(document).mouseup(function(e) {
if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {
$('#loginForm').hide();
}
});