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;
Related
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));
});
});
});
I am building a small drop-down container which appears when You hover on top of a menu item. When I hover on top of the menu item (e.g. Tools) the dropdown appears, I can move my mouse inside, but when the cursor leaves the dropdown menu, it does not go away. How am I able to achieve this?
I only managed to make it dissapear when you click somewhere outside of it.
Here is a Fiddle.
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
e.stopPropagation();
});
SOLUTION by anima_incognita:
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
$(".nav-dropdown").on('mouseleave',function(){
dropdown.slideUp();
});
e.stopPropagation();
});
here is edit in your code worked fine with me...added methods
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').mouseenter(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
$('#dropdownToggle').mouseleave(function(e) {
dropdown.slideUp();
});
e.stopPropagation();
});
Add this to end of your code:
$(".nav-dropdown").on('mouseleave',function(){
dropdown.hide();
});
Update your JS:
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
e.stopPropagation();
});
$(".nav-dropdown").on('mouseleave', function() {
dropdown.slideUp('fast');
});
.nav-list {
.nav-list-item {
float: left;
list-style: none;
padding: 2rem;
background: tomato;
font-family: 'Helvetica', 'Arial', sans-serif;
a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.nav-dropdown {
position: absolute;
background: turquoise;
padding: 2rem;
li {
margin-bottom: 2rem;
}
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-list">
<li class="nav-list-item">
Services
</li>
<li class="nav-list-item dropdown-wrapper">
<a href="#" id="dropdownToggle" class="nav-link tools">Tools
</a>
<!-- dropdown -->
<ul class="nav-dropdown active" style="display: block;">
<li class="nav-dropdown-item">
Buyer Cost Sheet
</li>
<li class="nav-dropdown-item">
Seller Net Sheet
</li>
<li class="nav-dropdown-item">
Mortage Calculator
</li>
<li class="nav-dropdown-item">
Title Fees
</li>
<li class="nav-dropdown-item">
Refi Calculator
</li>
<li class="nav-dropdown-item">
Real Estate Forms
</li>
</ul>
</li>
<li class="nav-list-item">
Buyers & Sellers
</li>
</ul>
As you are using the hover function, the hover function specifies two function to trigger mouseenter and mouseleave event
You have defined only the mouseenter function and not defined the mouseleave function. So below is the updated JS code:
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
e.stopPropagation();
}, function(e){
e.preventDefault();
dropdown.slideUp();;
dropdown.removeClass('active');
});
When I click different links from different accordion elements content is displayed below previous one
$('.accordion').on('click', '.accordion-control', function(e){
e.preventDefault(); // Prevent default action of button
$(this) // Get the element the user clicked on
.next('.accordion-panel') // Select following panel
.not(':animated') // If it is not currently animating
.slideToggle(); // Use slide toggle to show or hide it
});
$('.tab-list').each(function(){ // Find lists of tabs
var $this = $(this); // Store this list
var $tab = $this.find('li.active'); // Get the active list item
var $link = $tab.find('a'); // Get link from active tab
var $panel = $($link.attr('href')); // Get active panel
$this.on('click', '.tab-control', function(e) { // When click on a tab
e.preventDefault(); // Prevent link behavior
var $link = $(this), // Store the current link
id = this.hash; // Get href of clicked tab
if (id && !$link.is('.active')) { // If not currently active
$panel.removeClass('active'); // Make panel inactive
$tab.removeClass('active'); // Make tab inactive
$panel = $(id).addClass('active'); // Make new panel active
$tab = $link.parent().addClass('active'); // Make new tab active
}
});
});
When I click different links from different accordion elements content is displayed below previous one
/********** ACCORDION **********/
.accordion, .menu {
background-color: #f2f2f2;
color: #666;
margin: 0;
padding: 0;
overflow: auto;}
.accordion li {
padding: 0;
list-style-type: none;}
.accordion-control {
background-color: rgba(0,0,0,0);
color: red;
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.7em;
margin: 0;
}
.accordion-panel {
display: none;
}
.accordion-panel p {
margin: 20px;
}
.accordion-panel img {
display: block;
clear: left;
}
/*************** Panels ***************/
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
How do I make the previous content disappear?
<ul class="accordion">
<li class="active"><a class="tab-control" href="#tab-0">Misc Features</a></li>
<li>
<button class="accordion-control">Armory</button>
<div class="accordion-panel">
<ul class="tab-list">
<li><a class="tab-control" href="#tab-1">S grade</a></li>
<li><a class="tab-control" href="#tab-2">A grade</a></li>
<li><a class="tab-control" href="#tab-3">B grade</a></li>
<li><a class="tab-control" href="#tab-4">C grade</a></li>
</ul>
</div>
</li>
<li>
<button class="accordion-control">Weaponry</button>
<div class="accordion-panel">
<ul class="tab-list">
<li><a class="tab-control" href="#tab-5">Special Ability</a></li>
</ul>
</div>
</li>
<li>
<button class="accordion-control">Jewelry</button>
<div class="accordion-panel">
<ul class="tab-list">
<li><a class="tab-control" href="#tab-6">Raid Boss Jewelry</a></li>
</ul>
</div>
</li>
</ul>
<div class="content"> <!-- Content -->
<div class="tab-panel active" id="tab-0">misc features</div>
<div class="tab-panel" id="tab-1">armor S</div>
<div class="tab-panel" id="tab-2">armor A</div>
<div class="tab-panel" id="tab-3">armor B</div>
<div class="tab-panel" id="tab-4">armor C</div>
<div class="tab-panel" id="tab-5">weapon SA</div>
<div class="tab-panel" id="tab-6">RB jewelry</div>
</div>
Here is how you can do this:
$('.accordion .accordion-panel').not(this).slideUp();
$(this) // Get the element the user clicked on
.next('.accordion-panel') // Select following panel
.not(':animated') // If it is not currently animating
.slideToggle(); // Use slide toggle to show or hide it
Here is the demo.
Reference: jQuery: exclude $(this) from selector
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>
I have menu constructed by ul li with anchor tags in each. Css is applied to the anchor
and anchor:hover however I want the selected item to show that it is selected be changing the background a different color. anchor:active does not work.
I am trying javascript but not yet successful. Can this be soley done through css? I have looked at so many examples, but none actually worked right.
JAVASCRIPT
<script type="text/javascript">
function ChangeColor(obj) {
var li = document.getElementById(obj.id);
li.style.background = "#bfcbd6";
}
</script>
HTML
<div id="navigation">
<ul>
<li><a onclick="changecolor(this);" href="Default.aspx">Home</a></li>
<li><a onclick="changecolor(this);" href="View.aspx">View</a></li>
<li><a onclick="changecolor(this);" href="About.aspx">About</a></li>
</ul>
</div>
CSS - Simplified
#navigation ul {
list-style-type: none;
}
#navigation li
{
float: left;
}
#navigation a
{
background-color: #465c71;
}
#navigation a:hover
{
background-color: #bfcbd6;
}
you don't need to get id again for handling element. obj references the actual element.
<script type="text/javascript">
function ChangeColor(obj) {
obj.style.backgroundColor = "#bfcbd6";
}
</script>
Edit: And javaScript is case sensitive, so you should check your function names.
Here is a jsFiddle Demo
I have found a way to use JavaScript to solve this situation. This works for having MasterPage. Changing the id of the selected tab will then reference the css for that
selected tab only while setting the other tabs id's to null.
HTML
<div id="navbar">
<div id="holder">
<ul id="menulist">
<li><a onclick="SelectedTab(this);" href="#" id="onlink" >Home</a></li>
<li><a onclick="SelectedTab(this);" href="#" id="" >Products</a></li>
<li><a onclick="SelectedTab(this);" href="#" id="">Services</a></li>
<li><a onclick="SelectedTab(this);" href="#" id="">Gallery</a></li>
<li><a onclick="SelectedTab(this);" href="#" id="" >Contact</a></li>
</ul>
</div>
</div>
JavaScript
function SelectedTab(sender) {
var aElements = sender.parentNode.parentNode.getElementsByTagName("a");
var aElementsLength = aElements.length;
var index;
for (var i = 0; i < aElementsLength; i++)
{
if (aElements[i] == sender) //this condition is never true
{
index = i;
aElements[i].id="onlink"
} else {
aElements[i].id=""
}
}
}
Css for changing the background color after tab has been selected
#holder ul li a#onlink
{
background: #FFF;
color: #000;
border-bottom: 1px solid #FFF;
}