I'm trying to change the CSS of the cursor to default on a a href link of # on the menu-item-4082 "About" link below. And I don't know why this seemingly simple function doesn't want to work.
Must be something simple I'm not seeing. Is my CSS selector correct?
Or is there a different or better way to change the CSS with jQuery? What about removing the href="#" as well?
Fiddle: http://jsfiddle.net/2nbad1gc/
Function:
$("li#menu-item-4082 .not-click").css("cursor","default");
HTML
<ul id="menu-main-menu-bar">
<li id="menu-item-217" class="menu-item">
Home
</li>
<li id="menu-item-4082" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-has-children menu-item-4082
has-dropdown not-click">
About
</li>
<ul class="dropdown">
<li id="menu-item-158" class="menu-item menu-item-158">
Values
</li>
<li id="menu-item-4083" class="menu-item menu-item-4083">
Why
</li>
</ul>
Is my CSS selector correct?
No, it's incorrect. It should be:
$("li#menu-item-4082.not-click a").css("cursor","default");
You were trying to select the child of li#menu-item-4082 whose class is not-click. When in fact, the li itself had the class .not-click.
Remove the space between $("li#menu-item-4082 .not-click").
As a side note, I'd suggest adding a class rather than adding inline CSS.
$("li#menu-item-4082.not-click a").addClass('default-cursor');
.default-cursor {
cursor: default;
}
.. you could also remove the href attribute completely:
$("li#menu-item-4082.not-click a").removeAttr('href');
If you wanted to avoid jQuery completely, you could also remove the href attribute using plain JS:
Single element:
document.querySelector('#menu-main-menu-bar .not-click a').removeAttribute('href');
Multiple elements:
var anchors = document.querySelectorAll('#menu-main-menu-bar .not-click a');
Array.prototype.forEach.call(anchors, function (el, i) {
el.removeAttribute('href');
});
or you could avoid JS and just use CSS:
li#menu-item-4082.not-click a {
cursor: default;
}
Just use simple css
.not-click a{
cursor: default;
}
http://jsfiddle.net/2nbad1gc/14/
Your selector needs to be modified to
$('li#menu-item-4082.not-click a').css("cursor", "default");
Usually it is recommended to add a class to the HTML element that sets cursor to default rather than directly change the CSS with jQuery like this.
Related
I'm trying to change the colour of text in my a list on a button press.
My trouble is when I'm trying to get the colour to reset on other list items before applying the 'selected' colour. See code:
function changeNavColour(clicked_id) {
document.getElementById("navAbout").style.color = "black";
document.getElementById("navShows").style.color = "black";
document.getElementById("navPrices").style.color = "black";
clicked_id.style.color = "#c60707";
}
<html>
<nav class='navigation' id='navigation'>
<ul class="navbar" id='nav'>
<li class="navbar-item" id='navAbout'>ABOUT</li>
<li class='navbar-item'>-</li>
<li class="navbar-item" id='navShows'>SHOWS</li>
<li class='navbar-item'>-</li>
<li class="navbar-item" id='navPrices'>PRICES</li>
</ul>
</nav>
</html>
So at the moment, the text turns red on click, however the other colours (if they're already red) do not get set to black and stay red.
Any ideas?
Thanks
As Alex already pointed out, your text is between the <a></a> tags. Easiest way to fix it is to add firstChild (like document.getElementById("navAbout").firstChild.style.color ="black" ). A better way to do it is using classes, because using style property usually not a good practice (read more about adding and removing classes here).
you can use something like this, or change the selector however you need using querySelectorAll:
function changeNavColour(clicked_id) {
x=document.querySelectorAll("a")
x.forEach(function(item){
item.style.color = "black";
})
clicked_id.style.color = "#c60707";
}
Hope this help.
Your event handler is currently dealing with a HTMLAnchorElement reference directly, not an id attribute value. See Javascript snippet comments.
function changeNavColour(anchorElement) {
// Look for every anchor tag within the navigation list
document.getElementById('navigation').querySelectorAll('a').forEach(a => {
// Change their color depending on supplied anchor reference (the event target reference)
a.style.color = a === anchorElement ? "#c60707" : 'black'
});
}
<!-- Keep your markup as is -->
<nav class='navigation' id='navigation'>
<ul class="navbar" id='nav'>
<li class="navbar-item" id='navAbout'>ABOUT</li>
<li class='navbar-item'>-</li>
<li class="navbar-item" id='navShows'>SHOWS</li>
<li class='navbar-item'>-</li>
<li class="navbar-item" id='navPrices'>PRICES</li>
</ul>
</nav>
EDIT
As is, individual anchors ids are not hardcoded anymore, this means the Javascript function will still work when you add or remove items from navigation list.
But we can go a step further and implement event delegation strategy instead.
There are several advantages, it makes possible to add navigation item(s) later programmaticaly and automaticaly benefit from the ul#navigation registered click event handler behavior. It also limits the number of event listeners attached to the DOM (that's generally not an issue but it is optimization and may be considered as best practice IMO), :
document.getElementById('navigation').addEventListener('click', function(evt) {
const anchor = evt.target instanceof HTMLAnchorElement && evt.target;
if (anchor) {
// Look for every anchor tag within the navigation list
// Event handler is attached to the ul#navigation
// so "this" keyword is a reference to the uordered list HTML element
this.querySelectorAll('a').forEach(a => {
// Change their color depending on supplied anchor reference (the event target reference)
a.style.color = a === anchor ? "#c60707" : 'black'
});
}
});
<!-- Keep your markup as is -->
<nav class='navigation' id='navigation'>
<ul class="navbar" id='nav'>
<li class="navbar-item" id='navAbout'>ABOUT</li>
<li class='navbar-item'>-</li>
<li class="navbar-item" id='navShows'>SHOWS</li>
<li class='navbar-item'>-</li>
<li class="navbar-item" id='navPrices'>PRICES</li>
</ul>
</nav>
I defined a CSS class "active", and want to apply this class on a <li> tag only when the mouse is hovering on it. How to do that?
Here is a Bootstrap example:
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
And when the mouse is hovering on any <li>, apply class "active" on it.
Hope CSS could provide something like this, because I want to avoid writing same plain CSS text again and again.
.list-group-item:hover
{
include .active;
}
Thanks.
you should avoid using unnecessary javascript when you can do it simply with CSS, like everyone else pointed out already
but nonetheless jquery way would be
$('.list-group-item').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
});
first block is when the mouse is over the element, second is when it leaves it
https://jsfiddle.net/o9na7ps0/1/
Why do you want to create a class .active?
you should do it this way:
.list-group-item:hover {
/* body of the active class here*/
}
this way, you don't need to create a seperate class for the hovering.
Try This:
HTML <li class="active list-group-item">First item</li>
CSS li.active:hover {...}
hover on every li
li:hover{
background-color: #ffeeff;
}
hover on class list-group-item
.list-group-item:hover{
background-color: #ffeeff;
}
hover on li with class list-group-item
li.list-group-item:hover{
background-color: #ffeeff;
}
Add this .list-group-item:hover{color: white;} to your CSS like this example https://jsfiddle.net/7sud8341/2/
I'm working on a Wordpress site that has a sub-menu I need to open when a certain 'li' is clicked and close when it's clicked again. I've tried several jQuery functions and nothing is working.
I've also included the wp_enqueue_script function in the functions.php file, and I know the script referenced is working because I added a simple alert function to my created jQuery file and it works.
Here is the HTML of the menu:
<nav id="access" class="clearfix">
<div class="container clearfix">
<ul class="root">
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-19">
my name</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-17">
film
<ul class="sub-menu">
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
calvin klein film</li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
cam’ron</li>
.
.
.
</ul>
</li>
</ul>
</div><!-- .container -->
</nav>
So when menu-item-17 is clicked, I need the sub-menu class to appear and then disappear on another click.
I've tried functions like this with no luck:
jQuery("#menu-item-17").click(function () {
$(".sub-menu").toggle("slow");
});
And in case it helps, here's what I added in the functions.php file:
function attitude_child_scripts() {
wp_enqueue_script('toggle js', get_stylesheet_directory_uri() . '/js/toggle.js');
}
add_action('wp_enqueue_scripts', 'attitude_child_scripts');
What am I doing wrong?? Is it something Wordpress specific? Thanks in advance!
The problem I found in your javscript is that you are trying to toggle the visibity of the
submenu class but the #menu-item-17 li contains a link. The link will navigate to url contained within its href attribute by default. To prevent the link from executing its default behavior you would have to change your javascript to the code below: jsfiddle example --> http://jsfiddle.net/larryjoelane/206duwnt/
Javascript code:
/*
jQuery document ready function call below is used passing $ as a parameter in order to avoid any conflicts with other Jquery Libraries loaded that might use the $ in its library
*/
jQuery(document).ready(function($){//begin document ready wrapper function to allow the use of the $
//hide .sub-menu element on page load
$(".sub-menu").hide();
/*
Adding e as a function parameter, e is as a variable that holds the event object. Child selector plus a added so that the preventDefault
only affects links that are a direct child of #menu-item-17.
*/
$("#menu-item-17 > a").click(function(e){//begin click event
/*
The code was added below because if you click on the #menu-item-17
li element it contains a link which will navigate by default.
*/
e.preventDefault();
$(".sub-menu").toggle("slow");
});//end click event
});//end document ready wrapper function
If you want to keep the link in the #menu-item-17 li element, You could place another element
beside it in the li so that the user could click on the new element to toggle visibility. This could be some plain text or an image. You could also move the link to another li element all together. If you make any of these changes then you would want to remove the e.preventDefault() function call so that your link in the #menu-item-17 li element will navigate to another page again.
I would really appreciate any help you could provide on this matter. I am trying to style the parent of a specific child element.
It seems that this might not be possible in CSS due to technical restraints, but I was wondering if there was a solution available in JavaScript that could achieve this?
I am trying to alter the parent <a> element of a <ul class="children"> child element, only when that <a> element has class="active". e.g. there will be other <a> elements with <ul> child elements which are not active that I don't want to be styled.
If you know of any solution that would be able to achieve this that would be much appreciated! Whilst I am familiar with CSS I am not competent enough in JavaScript to write this myself.
<ul class="menu">
<li>
<a class="active">Active Page</a>
<ul class="children">
<a>Something here </a>
</ul>
</li>
<li>
<a>Some Other Page</a>
<ul class="children">
<a>Something here</a>
</ul>
</li>
</ul>
I suggest you style a.active. (Or haven't I understood the question?)
I.e.
a.active {
background-color: pink;
}
There is no css selector to select parent elements. You should also give the parent element a selector you can use to style it.
Also see Is there a CSS parent selector? for more information on the parent selector subject.
May be you want this:
if($('ul.children a').hasClass('active')){
$('ul.children').sibling('a').addClass('active');
}
see:
I am trying to alter the parent <a> element of a <ul class="children">
while this is not true, <a> is the sibling in your case.
Why can't you do a style for the class active?
.active {
background-color: red;
}
As per your HTML you could style the exact parent element.
Your HTML nested tags are Ok.
No need of javascript
Your css rule should look something like this
a.active+ul.children { ...what ever .... }
(In order to style the UL class children when its sibling is a class active
I'm really confused by your question but your could give two class names to the same element. Like for the
<ul class="children">
You could name it to:
<ul class="children active">
Sorry, I read it again and again, and now I got it!
.menu>li>a.active{
font-weight:bold
}
It will select only the first-level "a.active" children from the first-level "li" children from ".menu" ;)
Hope it helps!
I am trying to formulate a selector to select a set of visible elements. Our application uses the Prototype JavaScript framework, version 1.6.0.3.
The markup I'm working with is as follows:
<ul>
<li style="display:none;">1 Hidden</li>
<li style="display:none;">2 Hidden</li>
<li style="">3 Visible</li>
<li style="display:none;">4 Hidden</li>
<li style="display:none;">5 Hidden</li>
<li style="display:none;">6 Hidden</li>
<li>7 Visible</li>
<li style="">8 Visible</li>
</ul>
As you can see, some elements may have a style attribute, but only the hidden ones contain the string "display:none;". I need to select the <li> elements that are visible, where visibility is defined as "does not contain display:none".
What I've tried to far:
var visibleItems = $$('li[style*="display:none"]'); // Yields: [ ]
var visibleItems = $$('li[style*="display"]'); // Yields: [li, li, li, li, li], but isn't specific enough
Ideas? Ideally I'd like this to be as compact as possible, but I'll take what I can get.
Yes, I know that jQuery can do this but I do not want to introduce another framework in to this application since much of it already depends on Prototype.
You can filter the items using the findAll function:
var notVisible = $$('li').findAll(function(el) { return !el.visible(); });