I am using Twitter Bootstrap's navbar component. How can I highlight an a tag of a menu item--but just the a, not the whole li tag?
The following is my sample HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Customers</li>
<li>support</li>
<li>Reports</li>
<li>Invoice</li>
</ul>
</div>
</div>
</div>
If you need to change the background color of every <a> in your <li>, in CSS you could do this:
.nav li > a {
background-color: #ff0000;
}
instead, with jQuery:
$('.nav li > a').css('background-color', '#ff0000');
I guess this could be a simple solution to your question.
As in most things with jQuery*, there are many different ways to accomplish this. This question can be broken down into two parts:
how do we select only the element that we want to highlight?
List item how do we apply a highlight to the element?
1. Select the element
For the first part, you may want to select the element that has a certain text:
$(".navbar a:contains('Home')")
Or you may prefer to select the element by position:
$(".navbar a:eq(2)")
Let's break this selector down. The .navbar limits the returned objects to only the things within element(s) having the navbar class. The second part, a, further filters those objects to only the a elements. For the first option, :contains() is a content filter. It's not one of the fastest filters, so you'll want to use it in conjunction with other selectors (in this case $(".navbar a...). The second option uses the :eq() filter. Though I'm only proposing these two selector options in this answer, see my answer to jquery select nested div for examples of other similar jQuery selectors.
2. Apply the highlight
Now that we have the element we want, let's apply the highlight. The most straightforward way to do so would be to just brute-force the css background-color property:
$(".navbar a:contains('Home')").css('background-color', 'orange');
An alternative that I prefer is to create a class with the intended styling (.highlighted for this example), and apply it using jQuery's addClass() method:
CSS
.highlighted {
background-color: yellow;
}
JavaScript
$(".navbar a:contains('Home')").addClass('highlighted');
Go forth
See http://jsfiddle.net/jhfrench/eMk7N/ for a working example of these concepts.
*-I'm using jQuery to solve this because Bootstrap is built with jQuery.
Related
I have a particularly specific question that there are many articles online but they don't answer my question.
I have a menu bar on my website where some <li> elements appear when the user is logged in. That <li> element also has an onhover dropdown styled in css with the following:
ul li:hover > ul {
display: block;
}
So what happens is, when the <li> element of the main (which has a direct child of <ul>) is hovered upon, the dropdown will appear. Pretty straightforward.
My problem is, when I hide that particular <li> element with the dropdown attached to it (through the following code within a javascript if statement), the hover style remains.
So even though the parent <li> is set to display: none;, the child dropdown can be revealed by hovering over a tiny invisible rectangle (see picture) in the header.
TLDR: is there a way I can temporarily disable that particular :hover style preferrably through javascript or jQuery?
Thanks for the help in advance.
My HTML code for anyone wondering: (I have removed unncessary stuff so it is easier to see what I mean)
<ul>
<li>Foo</li>
<li id="dropdown">
<p class="drop" id="loggedInValue"></p>
<ul class="dropdown-content">
<li>My Account</li>
<li>Logout</li>
</ul>
</li>
</ul>
When you are setting li to display: none, you can add a class to li (class-name, for example) and add :not(class-name) to the css.
See below example for reference
ul li:not(.class-name):hover > ul {
display: block;
}
P.S: I am wondering how is that little rectangle even visible, when you have set it to display: none. There is definitely some part left out when setting display to none
You could add a logged-in css class to the root html element, and predicate the hover selector on the presence of that class.
const onLoginSuccess = () => {
document.documentElement.classList.add('logged-in');
}
.logged-in ul li:hover > ul {
display: block;
}
If there should be no drop down then you should run some code similar to this.
Please let me know if this helped.
Have a good one.
const dropdown = document.querySelector('#dropdown');
dropdown.classList.remove('dropdown-styles');
Maybe you can just completely delete the element from the DOM
const dropdown = document.querySelector('#dropdown');
dropdown.parentNode.removeChild(dropdown);
I've just started learning JQuery/JavaScript and I can't figure out the difference between using (".menu") and ("menu") and where I should use them?
it is menue, jquery uses css selectors to select elements. .menu means select all elements that have a class .menu ans $('menu') means that select element with a tag menu which I don't know about but can be div, p, body etc.
I did not find any answer in the web, so may be somebody could help me.
For example if we have next CSS declaration:
.hot_imgs li .detail{position:absolute;left:0;top:0;display:none;width:190px;height:190px;padding:0 40px;color:#fff;font-size:16px;font-family:"Microsoft YaHei","\5fae\8f6f\96c5\9ed1","\5b8b\4f53"}
.hot_imgs li .detail h3{margin-top:75px}
.hot_imgs li a:hover .img_bg,.hot_imgs li a:hover .detail{display:block}
And given elements:
<div class="hot_imgs">
<li id="711F">
<a href="#">
<img src="www.fishki.com" alt="Young" width="270" height="190">
<span class="img_bg"></span>
<div class="detail">
<h3>Young</h3>
</div>
</a>
</li>
<div>
As we can see from CSS declaration, when link of the list inside div with class hot_imgs is hovering, the div will be overlaid by another div with details class.
I'd like to use jQuery to identify which elements can potentially have a ":hover" attribute triggered on roll over without any mouse interaction.
Thanks a lot
You cannot target pseudo elements themselves, so if you are going to use jquery for this it has something for hover built in. You need to know what items you want to check for hovering, so for example if you wanted to check the image you could do.
$(".hot_imgs img").hover(function(){
//your logic here
});
Just a side note - All elements can have ':hover', so you will need to target with jquery. So there is nothing to check which elements 'can potentially' have :hover, as it is a pseudo selector/class.
Here is a fiddle for this example - http://jsfiddle.net/W4Km8/5413/
This question is in regards to precedence. I have an <ul> that contains my nav items in <li> I have an id for the <ul> which I use to reference the <li> and <a> tags nested within for styling. This all works fine, but when I use JavaScript to add a class to these specific <a> tags, to change the appearance when hovering over the links nothing happens.
I know the code is correct as I have tested it, but it just seems the ID styles take precedence over the Class's in when referencing styles.
How would I go about finding a solution, one idea I have is to remove the existing ID on mouseenter before adding the class, and then visa versa on mouseleave. Is there an easier solution?
ID styles are stronger, but you can use it when adding class for styling links as well.
So, if your menu is
<ul id="main">
<li><a href=#></a></li>
</ul>
And JS adds class "hovered" to element, then use CSS
#main .hovered {
.. styles here
}
Try adding !important to the end of your css for values which require overriding.
.class { color: #fbfbfb !important; }
what would be the easiest method to display only specific elements on a website?
For example, on a news site only the headlines and nothing else.
I'd like to select elements via CSS so only those should be displayed.
I tried to use the :not pseudoclass:
:not(.myClass) { display: none; }
But obviously, the parents of the .myClass-elements aren't displayed and so aren't them.
Do you know any possibility to achieve this? It doesn't have to be CSS-only, Javascript is possible too.
A web-app that does this would also be great.
I'd like to be able to filter some sites I visit, so I would apply this as a user-stylesheet.
You can load the page with jQuery and easily select the elements you want...
$("body").load("path/to/page.html div.headline");
The above will load all <div class="headline"> elements into the body of the document.
Note: You will of course have to keep the same origin policy in mind.
If you want to show only the news headline you will need to structure your HTML correctly. If you have a container div the easiest way to do this would be to apply a secondary class to it and show/hide elements trough that class:
<div class="container news_page">
<h1>Title</h1>
<p>Random text I want to hide.<p>
<div class="random_container">Another random element i want to hide.</div>
</div>
.container {border:1px solid red;} /* .container has normal styling */
.news_page p, .news_page .random_container {display:none;} /* .news_page is used only to select elements inside container on news page */
This would be the css only solution to this.
I can't figure out how to comment on things, so as a response to the last answer's last comment, check this out: http://selectivizr.com/. It says it can emulate CSS3 selectors for IE, so maybe that will fix your problems with Exploder...