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.
Related
I have recently started learning WordPress and have started creating a WordPress website.
I have created a drop down side navigation for one of my pages (using the menu options given in WordPress, and added it " ") and am having a little trouble styling it the way I want.
Since it is a drop down menu, I would like to style the parents of the navigation with a grey border (but not the children) if I style the li in css, then all li's are surrounded with a border (even the children). I know this is because they are also li's, but is there a class assigned to the parents (or a way I can assign a class to them) so I can style them separately?
http://jsfiddle.net/twLj3eba/
The fiddle is basically a visual example (this is not being used by me). I would like the parents to have a border around them, and the children to not have anything around them.
.sideNavi a{
color:#666666;
}
.sideNavi li ul{
display: none;
}
.sideNavi li:hover ul{
display: block;
}
The css code is my code
thank you
Create a class for the parent li in the same way as you have created a class for the ul. Assign this class to all your parent li.
For example:
<li class="parent-li">
Then assign styles to that class in your css.
.parent-li {border: 1px solid #222; display: inline-block;}
Unless I've miss understood what you're trying to achieve it should be a simple solution. Hope that helps.
Edit: I've just seen your comment mentioning you're using the edit menu screen within Wordpress. You should be able to assign custom classes to the menu items. If you can't see the option go to the screen options drop down tab at the top right and enable css custom classes under advanced properties. You will still need to create the css class either by editing your theme style sheet (not recommended) or by creating a child theme.
.parent > li{
border: solid 1px #000;
}
This question already has answers here:
Assigning classes to elements through CSS
(3 answers)
Closed 8 years ago.
Is it possible to make all h3 elements be of the class responsive-heading through CSS. For a better idea of what I am trying to achieve please see the CSS code below:
h3 { .responsive-heading }
/* The class responsive-heading is implemented inside another CSS file and its contents are:
.responsive-heading { font-size: 30px; .... etc. }
*/
I am aware I could use Javascript and/or JQuery for assigning each h3 the class .responsive-heading but I before I start doing that I'd rather know if there is a css way?
In short: I want to apply .responsive-heading style to all h3. We hav hundreds of pages to update the H3 elements.
As stated, no you can't do that.
However, in your CSS, you can simply apply the same styles to H3s.
h3, .responsive-heading {...styles...}
No, you can't use css to change the class of an element.
If you could or would modify the external css,
you can change the selector to
h3, .responsive-heading {
...styles...
}
Or you can copy style rules of .responsive-heading to your h3 style, if you really sure ALL h3 should implement this.
Besides, I have to say hundreds of pages are not that many. If I was you, I will search h3 in my code and add the class to every one when I'm sure that one is one of whom need the class.
Just a quick question, my un-ordered list is coded to only have one li element, but it duplicates that element and then displays two of them.
example http://stredtech.co.uk/YMD/YMD.php
code behind http://pastebin.com/W9MDTid9
Any help would be great.
I have tried cutting out the CSS properties but it still duplicates.
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.
I have implemented my own drop down menu and wanted to clarify the accessibility implication of my solution:
http://jsfiddle.net/tpHcv/5/
The piece of code i am interested in for now is:
$('#sub-nav > li ul').each(function(index){
var $this = $(this),
index = index + 1;
$this
.clone()
.appendTo('#main-nav > li:eq(' + index + ')');
});
'sub-nav' is hiddden from everyone via CSS to start. Then it is appended to the relevant 'main-nav' li. Will this approach prevent people using assistive technology from getting to the sub menu items?
Please don't aks why i have done it this way. Suffice to say i have no access to the original markup of the project so cannot just append the sub-menu to the markup in the way that i would like.
For greater accessibility, consider adding keyboard support. When a link has the focus (via tab or whatever), make sure its subnav is visible. Similarly, when a subnav link has focus, make sure it is visible. Some of that you can do with css via :focus.
It's unfortunate you don't have access to the markup. Is there a reason you need to clone the <ul>, or is it ok to just move the original element? Do your dom manipulation with script, but do the show/hide with css via the :hover pseudo-class.
This gets you part of the way there: http://jsfiddle.net/tpHcv/9/ You'll still need some JavaScript to manage tabs and focus on the sub-items.
#main-nav li > ul
{
display: none;
}
#main-nav > li a:focus + ul,
#main-nav > li:hover > ul
{
display:block;
}
Will your #main-nav links go anywhere or are they just for triggering the sub navigation? If they don't go anywhere, to support browsers with JavaScript disabled, consider hiding #main-nav initially with css, and then show it with JavaScript. This way it isn't displayed unless the links will actually do something.