How to make that one li element will be first one, as user in the next page click (www.url.com/demo/#collapse1) - should be the first one or (www.url.com/demo/#collapse5) - shoul be the first one? and the other elements will stay in their places, when you are in same page. www.url.com/demo
$('li').click(function() {
$(this).prependTo($(this).parent());
});
body {
font-family: verdana;
font-size: 12px;
}
a {
text-decoration: none;
color: #000;
display: block;
width: 100%;
padding: 8px 0;
text-indent: 10px;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
}
ul li {
background: #eee;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
I'm pretty sure you're looking for a way to swap between the first element and the clicked on element. Here's a way to accomplish that by using .detach. First, we grab the .siblings and then we grab the first element from the list via .eq. From there we detach it (or remove it from the HTML but keep it stored as a variable. Next we prepend our clicked on element to the parent, detaching that one too only after assigning first has been appended to after our current element. Basically, swapping the two elements.
$('li').click(function() {
first = $(this).siblings().eq(0).detach()
$(this).parent().prepend($(this).after(first).detach());
});
if (window.location.hash != "") {
$('li').eq(Number(window.location.hash.slice(1))-1).click();
}
body {
font-family: verdana;
font-size: 12px;
}
a {
text-decoration: none;
color: #000;
display: block;
width: 100%;
padding: 8px 0;
text-indent: 10px;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
}
ul li {
background: #eee;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
Related
With a for loop, I removed the active class inside the a tag. However, when I want to add a class when clicking nothing happens and the class gets added to the li and a tag but without the active class name.
This has been asked so many times but I still cannot figure it out. Any help is appreciated. Thank you!
Here is the example: https://jsfiddle.net/fu5e7946/
Basically you are looping within your loop twice. I have fixed that.
You simply need to remove the previous active class and add new one like this:
document.querySelector(".sidenav a.active-list").classList.remove("active-list");
e.target.classList.add('active-list');
You can this: codepen:link https://codepen.io/emmeiWhite/pen/jOMZRxd
let elements = document.querySelectorAll('div, ul, li, a');
elements.forEach(i => {
i.addEventListener('click', function(e) {
document.querySelector(".sidenav a.active-list").classList.remove("active-list");
e.target.classList.add('active-list');
});
});
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
overflow-x: hidden;
}
.sidenav ul {
background-color: black;
list-style: none;
padding: 0px;
padding-right: 0px;
}
.sidenav > ul > li {
color: white;
margin: 0px;
}
.sidenav a {
text-decoration: none;
font-size: 18px;
display: block;
line-height: 4em;
color: white;
background-color: black;
}
.sidenav a:hover {
color: grey;
}
.sidenav .active-list {
background-color: #e2c9be;
color: black;
}
<div id="active-buttons" class="sidenav" style="padding-top: 100px;">
<ul class="text-center">
<li>
Profile
</li>
<li>
Experience
</li>
<li>
Projects
</li>
<li>
Skills
</li>
</ul>
</div>
Try with toggle (more info: MDN). There you have working example:
let elements = document.querySelectorAll('div, ul, li, a');
elements.forEach(i => {
i.addEventListener('click', function() {
i.classList.toggle('active-list');
});
});
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
overflow-x: hidden;
}
.sidenav ul {
background-color: black;
list-style: none;
padding: 0px;
padding-right: 0px;
}
.sidenav > ul > li {
color: white;
margin: 0px;
}
.sidenav a {
text-decoration: none;
font-size: 18px;
display: block;
line-height: 4em;
color: white;
background-color: black;
}
.sidenav a:hover {
color: grey;
}
div ul li a.active-list {
background-color: #e2c9be;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="active-buttons" class="sidenav" style="padding-top: 100px;">
<ul class="text-center">
<li>
Profile
</li>
<li>
Experience
</li>
<li>
Projects
</li>
<li>
Skills
</li>
</ul>
</div>
I have a navigation bar with three buttons which I'm trying to highlight when they're active by applying "active" class to the li elements using jQuery - the border and font color are supposed to change. So far, only the border color changes while the text remains the same.
Also, I'd like to override or prevent the :hover pseudo class when the link is active.
Here's the codepen which will hopefully make this clearer.
Could you please advise how to override the a element's font color?
Thanks!
You have HTML looking like
<ul class="topnav">
<li class="topnavli">
Link 3
</li>
.......
Then styles for the anchors
.topnav a { color: #fff; }
then you add the active class to the LI elements, but the styles are only set as
.active { color: #FFADA0; }
That's just styling the LI element, not the anchors inside, and the specification states that by default an anchor tag does not inherit attributes like color from the parent element if a href attribute is present, so those styles must be set directly on the anchor with something like
li.active a { color: #FFADA0; }
As the border is set on the LI element, that should be changed with a specific style for that element, so you end up with
li.active {
border:3px solid #FFADA0;
}
li.active a {
color: #FFADA0;
}
Codepen
Add
.topnav .active a {
color: #FFADA0 ;
}
$('.topnav li').click(function() {
$(".topnav li.active").removeClass("active");
$(this).addClass('active');
});
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 44px;
letter-spacing: 3px;
margin: 0;
padding: 15px 0 15px 30px;
display: inline-block;
color: #fff;
}
.topnav {
position: fixed;
top: 0;
width: 100%;
list-style: none;
font-family: 'Montserrat', sans-serif;
background-color: #000;
z-index: 1;
}
.topnav li {
display: block;
float: right;
margin: 20px 8px 0 0;
}
.topnavli {
border: 3px solid #fff;
}
.topnav li:first-child {
margin-right: 50px;
}
.topnav li:hover {
border: 3px solid #6fb7b7;
transition: 0.3s;
}
.topnav .active a {
color: #FFADA0 ;
}
.topnav a {
display: block;
color: #fff ;
font-weight: 600;
padding: 10px 0 ;
font-family: 'Raleway', sans-serif;
text-align: center;
text-decoration: none;
width: 120px;
}
.topnav a:hover {
color: #6fb7b7;
text-decoration:none;
transition: 0.3s;
}
.active {
color: #FFADA0 ;
border:3px solid #FFADA0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="header">
<ul class="topnav">
<li class="topnavli">
Link 3
</li>
<li class="topnavli">Link 2</li>
<li class="topnavli">Link 1</li>
<h1>website</h1>
</ul>
</div>
Link to code: http://codepen.io/danessh/debug/uCBds
The desired effect is to have any added item to be appended to the menu with rounded corners. That part seems to work, but the CSS does not seem to work as I expected.
Issue:
The margin for any item added after the first overlaps instead of appearing like the last added item. I can see this because there is opacity set.
Question:
What is the possible cause of the first item being styled by CSS and all other items added in the same manner not displaying all the styling declarations?
Note: Items are being appended to $('#menu ul'); object. When I appended an item using $('li:last');, the first item displayed overlaps other menu items. margin: -2px; is set for the existing menu items so that no gaps appear.
The 2px spaces are actually coming from your markup (there are a bunch of articles on this). If you remove the whitespace between your <li> elements, the spaces will go away. This is a side effect of making your <li> elements inline.
The dynamically-created elements don't have this problem, so you're shifting them over 2px too far. To fix it, remove the negative margin completely and either remove the whitespace or float them to the left.
EDIT: I got your problem now, the problem is , when you are adding new li elements from code, there is no whitespace generated in the markup, as is there in the already added elements.
e.g from your markup:
<li><a id="first" href="#">Who</a></li>
<li>What</li>
<li><a id="last"href="#">When</a></li>
after adding your element on click
<li><a id="first" href="#">Who</a></li>
<li>What</li>
<li>When</li><li>Who</li><li><a id="last" href="#">What</a></li>
notice there are no whitespaces in the generatd markup
what you can try
menu.append('<li><a id="last" href="'+ itemUrl.val() + '">'+ item.val().toUpperCase() + '</a></li> ');
notice the extra two spaces after </li>
whitespace in the markup matters when you are dealing with inline elements.
try this css
#menu li {
display: inline;
float:left;
}
#menu a {
background-color: purple;
padding: 5px 30px;
color: white;
text-decoration: none;
font: 18px sans-serif;
opacity: .9;
text-transform: uppercase;
}
This is a known problem with DOM elements when using display: inline or inline-block.
What you need to be doing is float for the li elements.
Here's the updated codepen.
I've also made some modifications to your code like removing ids first & last and instead using css selectors: first-child and last-child.
JavaScript:
function addMenuItem () {
var menu = $('#menu ul');
var item = $('#itemName');
var itemUrl = $('#itemUrl');
if (item.val() && itemUrl.val()){
menu.append('<li>'+ item.val().toUpperCase() + '</li>');
item.val('');
itemUrl.val('');
}
}
CSS:
#menu ul {
list-style: none;
}
#menu li {
display: inline-block;
float: left;
}
#menu a {
background-color: purple;
padding: 5px 30px;
margin: 0px;
color: white;
text-decoration: none;
font: 18px sans-serif;
opacity: .9;
text-transform: uppercase;
}
li:first-child a {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
li:last-child a {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#menu a:hover {
background-color: orange;
}
button {
background-color: pink;
font-size: 14px;
color: white;
font-weight: bold;
border-radius: 3px;
margin-top: 5px;
padding: 15px 32px;
}
button:hover {
background-color: lightblue;
}
input {
background-color: whitesmoke;
margin-top: 5px;
padding: 10px 10px;
display: block;
font-weight: bold;
}
input, button {
border: none;
}
#workSpace {
width: 95%;
padding: 20px;
background-color: white;
}
body{
background-color: whitesmoke;
}
form {
clear: both;
margin-top: 50px;
}
HTML markup:
<div id="workSpace">
<div id="menu">
<ul>
<li>Who</li>
<li>What</li>
<li>When</li>
</ul>
</div>
<form>
<input id="itemName" type="text" placeholder="Menu Item" />
<input id="itemUrl" type="url" placeholder="Item URL" />
<button type="button" onclick="addMenuItem()">Add Menu Item</button>
</form>
</div>
try the css
#menu ul {
list-style: none;
margin: 0;
width: 100%;
display: block;
float: left;
margin-bottom: 20px;
}
#menu li {
float: left;
}
I want to highlight my current menu item in asp.net with jquery but I don't know why it is not working. Here is my code:
Site.css:
#menu {
background: #292929;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 0em 2em;
line-height: 80px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 1em;
font-weight: 700;
color: white;
}
#menu .current_page_item a {
background: #01A9DC;
color: #FFF;
}
#menu a:hover {
text-decoration: none;
background: #01A9DC;
color: #FFF;
}
#menu a:active {
background: #01A9DC;
color: #FFF;
}
Site.Master:
<div id="menu" class="container">
<ul>
<li>Home</li>
<li>Softcare</li>
<li>Softlearn</li>
<li>Software</li>
</ul>
</div>
jQuery (1.7.1) inside <head>:
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$("menu ul li a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('current_page_item');
}
});
I also tried with javascript and it didn't work out well either, i think jquery is the best at doing this job, any advice is appreciated.
This is the flawless way I have always used jQuery to highlight the current menu item
$(function () {
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('[href$="'+url+'"]').parent().addClass("active");
});
I have one little problem, I included submenu on this page: http://www.shadowopsweaponry.com/default.aspx.
On the left side there is 'gunsmithing' category and if you click on that link a new submenu pops up below that link.
Also there are two other submenus 'gun coating' and 'firearm training' which are acting same, even if you click on other main link after that, they are staying highlighted.
When I am clicking on some of the submenu links I want that selection to be highlighted and not the one which I selected before that, how can I achieve that?
Edit: Adding CSS.
.arrowsidemenu {
width: 180px; /*width of menu*/
background: #212121;
}
.menucontents div.selected a { /*header that's currently selected*/
color: #f93;
}
.arrowsidemenu .menuheaders a { }
.arrowsidemenu div a { /*header bar links*/
font-size: 12px;
display: block;
padding-left: 10px;
padding-top: 4px;
text-decoration: none;
}
.arrowsidemenu div a:link, .arrowsidemenu div a:visited {
color: #fff;
}
.arrowsidemenu div a:hover { }
.arrowsidemenu div.unselected a { /*header that's currently not selected*/
color: #fff;
}
.arrowsidemenu div.selected a { /*header that's currently selected*/
color: #f93;
}
.arrowsidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: inherit;
}
.arrowsidemenu ul li {
line-height: 8px;
padding-left: 12px;
}
.arrowsidemenu ul li a { /*sub menu links*/
display: block;
font-size: 12px;
text-decoration: none;
color: #FFF;
padding: 5px 0;
padding-left: 10px;
}
.arrowsidemenu ul li a:hover { }
.active-sub-menu {
color: #f93;
}
Your class called "selected" is being placed onto div > a href. You need that class instead to land on ul > li> a href. This is a problem in your .aspx, not really in the css.
If you get the html fixed, you'll want to change this line:
.arrowsidemenu div.selected a {
color: #FF9933;
}
At that point, probably you can just use .selected instead.
You can see these more easily by using Firebug, addon for Firefox. If you get it, you can right-click an item to see what styles are applied.