Change li Background Colour In Javascript - javascript

I wonder if someone can please advise me how I can do the following?
I have the below JS which changes the background colour of an li based on id (I'm using the li as buttons). When the li is clicked the background turns white. Can someone please tell me what I should add to return all other li elements to their original colour?
Many thanks
$(function () {
$("li").click(function (e) {
document.getElementById(e.target.id).style.backgroundColor = "#fff";
});
});

You can do this more easily with a class:
$('li').on('click', function() {
$('.whitebg').removeClass('whitebg');
$(this).addClass('whitebg');
});
body {
background: deepskyblue;
}
li {
background: green;
display: inline-block;
cursor: pointer;
padding: 4px 8px;
}
.whitebg {
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

Related

Jquery toggle selected items from multiple selectable lists (except the current selection) on selecting any of the items from either of the lists

I am attempting to use two selectable lists with the same selectable class, I want to toggle all the items irrespective of the parent list when a selection is made.
Currently when I select an item, only the selections from the same list get toggled/unselected, but the selected item from the other list remains selected.
Is there any way to have these as two separate lists but behave as the same one, for this specific function?
Any help would be appreciated. Thank You.
$( ".selectable" ).selectable();
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
div {border:1px solid black;}
.selectable .ui-selecting { background: #FECA40; }
.selectable .ui-selected { background: #F39814; color: white; }
.selectable { list-style-type: none; margin: 0; width: 60%; }
.selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<div id="div1">
<h4>List 1</h4>
<ul class="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="div2">
<h4>List 2</h4>
<ul class="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
I suppose what I was trying to achieve here is what is defined under a different widget, you would call menu.
Changing the script to:
$(".selectable").menu();
gave the desired result.

Animate a floating element

I have a list of elements that :
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
</ul>
The CSS for these are :
display: inline-block;
width: 45px;
height: 45px;
Then the ul tag is :
white-space: nowrap;
onClick I add a class which floats the element left. So they're all in a row. onClick whatever element I select floats to the left (first in the row).
$('li').on('click', function() {
$(this).toggleClass('left_align');
});
Here's the jsfiddle
How do I get it so it moves the other elements and scrolls across kind of animated.
Thanks!
There are several properties or values you’ll want to transition, but which are not supported by browsers. List of animatable CSS properties
float is not a css3 animatable property.
You can try this patch:
$('li').on('click', function() {
$(this).toggleClass('left_align');
});
li {
display: inline-block;
width: 45px;
height: 45px;
background: red;
transition: 500ms ease-in-out;
}
li:hover {
cursor: pointer;
}
.left_align {
position: relative;
margin-left: -5px;
background: yellow;
transition: 500ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
</ul>
Fiddle here
Unfortunately you can't use CSS to animate float properties.
The following SO post has an interesting solution to your problem:
Javascript animate CSS float property
If you still want to animate and not use floats, you can try using a solution employing margins. To fix the problem of spacing between list elements, you can just animate to negative margin values.
li {
display: inline-block;
width: 45px;
height: 45px;
background: red;
transition: 2s ease-in-out;
margin-left: 15px;
}
li:first-of-type {
margin-left: 0;
}
li:hover {
cursor: pointer;
}
.left_align {
margin-left: -4px;;
background: yellow;
transition: 1s ease-in-out;
}
https://jsfiddle.net/37naqebd/
The simplest way I found to do this in jQuery is to reorder the elements and adjust their 'left' css values (you do have to remove the floats from the li elements since transitions wont work with floats):
var lefts = [0,50,100,150,200,250]
for (i=0; i<6; i++) {
$('li:nth-child('+(i+1)+')').css('left', lefts[i]);
}
$('li').on('click', function() {
// reorder clicked element to move it to the top of the list
$(this).insertBefore($('li:nth-child(1)'));
//update element left values
for (i=0; i<6; i++) {
$('li:nth-child('+(i+1)+')').css('left', lefts[i]);
}
});
jsfiddle here.

Create an Accordion Menu for Mobile Site Jquery and CSS

I have recently started designing a mobile website using media queries and browsing a few websites to see what they've done it seems accordion navigation menus are the way to go, scaling up to a normal horizontal navigation bar. I have browsed and browsed the internet looking for an accordion walkthrough but I can not seem to find one that explains it well enough.
A good example is the one from microsoft on their website. Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
padding: 20px 0px 20px 0px;
border-top: 2px solid #abc;
}
nav ul ul {
height: 0;
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</html>
These navigation bars have submenus [nav ul ul] that slide out when nav ul li is clicked. I was hoping somebody could point me in the right direction as to how I go about making a slide down sub menu on click, or help me with the code.
I thought there may have been a basic one people could start using and edit to customise themselves.
Thanks for any help.
There is no need for Javascript - you may use a Checkbox instead.
Check out: http://codepen.io/TimPietrusky/pen/CLIsl
If you still want to do it with Javascript go for something like this:
// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
// prevent Click from redirecting
e.preventDefault();
// get the next ul after the li a clicked
if ($(this).hasClass('visible')) {
$(this).next('ul').slideUp(200).removeClass("visible");
} $(this).next('ul').slideDown(200).addClass("visible");
});
CSS animation for height form 0 to auto wont work. See: How can I transition height: 0; to height: auto; using CSS?
Check this out
https://jsfiddle.net/nqamazgz/3/
Unfortunately CSS does not have any click events, instead you will need to use JavaScript and/or jQuery. I used jQuery
All i did was add a class hide-nav to your nav with display none. And a button to click of course.
And a bit of jQuery
$(document).ready(function() {
$('#topMenu-btn').on('click', function() {
$('nav').slideToggle();
});
});
Try something like this:
http://jsfiddle.net/kb668aag/
You'll need to modify the code a bit.
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
CSS
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
padding: 20px 40px;
display: block;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
border-top: 2px solid #abc;
}
nav ul ul {
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
ul.sub-menu{
display: none;
}
.has_children > a{
color: #ddd;
}
JS:
var $menu_with_children = $('.has_children > a');
$menu_with_children.on('click', function(e){
e.preventDefault();
var $this = $(this);
if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
$this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
} else{
$this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
}
});

How to detect mouse is over a child element in jQuery?

I have a menu-submenu-subsubmenu construction in HTML like this:
<menu>
<li>Item 1</li>
<li><ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li><ul>
<li>Sub-subitem 1</li>
<li>Sub-subitem 2</li>
<li>Sub-subitem 3</li>
</ul>
Subitem 3</li>
<li>Subitem 4</li>
</ul>
Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
...using whit this css formating:
menu {
display: block;
width: 200px;
}
/* hide subitems */
menu li ul,
menu li ul li ul {
display: none;
position: absolute;
}
/* set up positions */
menu li ul {
left: 200px;
width: 200px;
}
menu li ul li ul {
left: 400px;
width: 200px;
}
I use this jQuery code:
$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */
$('menu li a').mouseenter(function() {
$(this).parent().children('ul').show();
}).mouseleave(function() {
$(this).parent().children('ul').hide();
});
});
How can I detect mouse is leaving the element to their child? Or how can I get the child element to stay if it's necessary?
Change your code to be like this:
$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */
// here, just select the direct child
$('menu').find('li > a, li > ul').mouseenter(function() {
var time = new Date().getTime();
$(this).parent().find('ul').show().data('showing-time', time);
}).mouseleave(function() {
var leaveTime = new Date().getTime();
var $this = $(this);
window.setTimeout(function () {
var $ul = $this.parent().find('ul');
var beginTime = $ul.data('showing-time') || 0;
if (leaveTime > beginTime) {
$this.parent().find('ul').hide().data('showing-time', 0);
}
}, 100);
});
});
Hope this helps.
update
Code updated.
I suggest just put the sub menus next to the parent menu item(here, means li > a element) to get a better result.
Here's how I would go about it. You don't need javascript at all, at least not for simple hiding/showing. But, if you want to add delays, I would strongly suggest using jquery only to add/remove appropriate css classes with a settimeout.
css:
.menu {
position: relative;
display: inline-block;
}
.submenu {
display: none;
position: absolute;
left: 100%;
}
.menu li:hover > .submenu, .submenu.show {
display: inline-block;
}
html:
<ul class="menu">
<li>Item 1</li>
<li><ul class="submenu">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li><ul class="submenu">
<li>Sub-subitem 1</li>
<li>Sub-subitem 2</li>
<li>Sub-subitem 3</li>
</ul>
Subitem 3</li>
<li>Subitem 4</li>
</ul>
Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
js:
$('body').on('mouseleave','.submenu', function(e) {
var jTarget = $(e.currentTarget).addClass('show');
setTimeout(function() {
jTarget.removeClass('show');
}, 500);
})
Check out this jsfiddle with the js delay:
http://jsfiddle.net/LxL4N/1/

How can I keep active state when clicking link

I know an active element is when you click the link. Is there anyway to carry the active state across to the next page.
Is there anyway to do it via javascript so it removes an active state and adds the active state to the next link. So i'm having a bit of problems with the active state, if anyone can help me out.
Here is the HTML
<ul class="list-type">
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
CSS
ul.list-type {
list-style-type: none;
padding: 0;
margin-left: 0;
text-align: left;
font-size: 16px;
}
ul.list-type li {
padding: 10px 25px 10px 25px;
}
ul.list-type li a {
color: #000;
}
ul.list-type li a:active {
color: #F00;
}
ul.list-type li a:hover {
color: #CCC;
}
Here is a JS Fiddle:
http://jsfiddle.net/dDcXC/
You can get the URL from document.URL from there it's as simple as iterating all links and
comparing their href
You can try something like:
var links = document.getElementsByTagName('a');
for (var i= 0 ; i<links.length ; i++){
if(links[i].href == document.URL){
var currentClass = links[i].className;
links[i].className = currentClass + " active";
}
}

Categories