I'm using wordpress 3.5 and create menu with submenus. It's structured like this:
<ul class="menu">
<li id="menu1">Menu 1</li>
<li id="menu2">Menu 2</li>
<li id="menu3" style="z-index:100;">
Menu 3
<ul class="submenu">
<li id="submenu1">submenu1</li>
<li id="submenu2">submenu2</li>
<li id="submenu3">submenu3</li>
</ul>
</li>
</ul>
The problem is the menu with submenus, it's automatically attached a z-index with value 100. I don't want it to be like that because it gives me trouble on adding lavalamp effect to those menus.
I tried to edit the z-index by using jquery just after the menu is created using wp_nav_menus simply like this:
jQuery(document).ready(function(){
jQuery("#menu3").css("z-index", "0");
});
But unfortunately, it doesn't work. How can I remove that inline css style?
Use the removeAttribute method, if you want to delete all the inline style you added manually with javascript.
element.removeAttribute("style")
Reset z-index to initial value
You could simply reset the z-index to it's initial value causing it to behave just like the li would without the style declaration:
$(function(){
$('#menu3').css('z-index', 'auto');
});
You can go vanilla and use plain javascript (code should run after your menu html has loaded):
// If you're going for just one item
document.querySelector('#menu3').style.zIndex = 'auto';
Remove style attr
You could use jQuery to remove the style attributes from all your list:
Note: Keep in mind this will remove all styles that have been set to your element using the style attribute.
$(function(){
$('#menu3').removeAttr('style');
});
Or vanilla:
// Vanilla
document.querySelector('#menu3').style = '';
If you want remove all inline styles, Pranay's answer is correct:
$("#elementid").removeAttr("style")
If you want to remove just one style property, say z-index, then you set it to an empty value:
$("#elementid").css("zIndex","")
From the jQuery documentation (http://api.jquery.com/css/):
Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property.
This is what I consider a better approach because it only removes the z-index style instead of the whole style attribute. Here is a working Fiddle.
//As commented by #DA this is enough
$("#elementid").css("zIndex","")
//this could be useful in another situation so I will leave it :)
$(document).ready(function () {
$('#menu3').attr('style', function(i, style){
return style.replace(/\z-index\b[^;]+;?/g, '');
});
});
Hope it helps.
Related
I am using Gridster for Wordpress to control the arrangement of a masonry style grid layout. Gidster basically allows site admins to reorder / resize posts in realtime (see screenshot)
Now as a rule I would only like to use a number of grid sizes (1x1, 1x2, 2x2). The markup for the grid is output as the following:
1x1: <li data-sizex="1" data-sizey="1" class="gs_w">
1x2: <li data-sizex="1" data-sizey="2" class="gs_w">
2x2: <li data-sizex="2" data-sizey="2" class="gs_w">
You can see the grid size is determined by the HTML 5 data attributes 'data-sizex' and 'data-sizey'. I would like to use Jquery check for these attributes on page load and add classes respectively..
For example an element with a grid size of 1x1 (data-sizex="1" data-sizey="1") would have a class of '1x1'
I believe I need to use attribute selector but am a little unsure as how to proceed.
$("li[data-sizex='1']")
You can use each to parse and get data elements to make the class
$('li').each(function(){
$(this).addClass($(this).data('sizex') + "x" + $(this).data('sizey'));
});
Edit to limit the add class for specific li e.g descendant of a particular element as mentioned by OP in comment we can extend the selector.
$('.gridster li').each(function(){...
$('li').each(function(){
$(this).addClass($(this).attr('data-sizex') + "x" + $(this).attr('data-sizey'));
});
First of all, sorry if this is a simple question. I am new to jQuery and I want to know how can I check if an element exists and if it does, change the css property.
Here is what I mean: I have the following list:
<ul class="element-rendered">
<li class="element-choice">Item A</li>
<li class="select-inline">Item B</li>
</ul>
I want to know how can I check if the class select-inline exists inside element-rendered and if it does, how can I change the css background of element-choice to blue?
I created a fiddle to reproduce this example.
Again sorry if this is a simple question but I am new to jQuery.
You can use .length to check if the element exists in DOM.
$('.element-rendered .select-inline') will select all the elements having class select-inline inside the element with class element-rendered. .length on selector will return the number of matched elements. So, number greater that one, means the element exists. Then you can use .css to set inline styles.
Demo
if ($('.element-rendered .select-inline').length) {
$('.element-choice').css('background', 'blue');
}
.element-choice {
width: 100%;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul class="element-rendered">
<li class="element-choice">Item A</li>
<li class="select-inline">Item B</li>
</ul>
I'll also recommend you to use class in CSS and add it to the element by using addClass.
Demo
var eR = $(".element-rendered");
if (eR.find(".select-inline").length > 0){
eR.find(".element-choice").css("color", "blue");
}
This would work for your specific example.
Find the select-line element which is a child of element-rendered.
The find all of the sibling elements with class element-choice and apply the css.
$('.element-rendered>.select-inline').siblings('.element-choice').css('background','blue')
http://jsfiddle.net/SeanWessell/hjpng78s/3/
To check if element exists could use .is() , or as suggested by #Tushar .length
var container = $(".element-rendered");
// alternatively `!!$(".select-inline", container).length`
$(".select-inline", container).is("*")
&& $(".element-choice", container).css("background", "blue");
jsfiddle http://jsfiddle.net/hjpng78s/6/
Demo
if($(".element-rendered .select-inline")[0])
$(".element-rendered .select-inline").css("background-color","red");
How can I check if the class select-inline exists inside element-rendered and if it does, how can I change the css background of element-choice to blue?
if ( $(".element-rendered > .select-inline").length ) {
$(".element-rendered > .element-choice").css({
'background-color': 'blue'
});
}
Docs:
Find the number of elements in the jQuery object.
Set one or more CSS properties for the matched element
I have this part of HTML:
<div id="menu">
<ul>
<li>Startseite</li>
<li class="active">Brillengläser</li>
<li>Komplettbrille</li>
<li>Sportbrillen</li>
<li>Marketing</li>
<li>Statistik</li>
</ul>
</div>
I want to remove class="active" parameter and set it in li tag where I have href="/pacmodule/completeglass" atribute.
First part I successfully done with jquery:
$("#menu").find("ul:first").find(".active").removeClass("active");
But I have problems with second part. This select just a tag:
$('a[href="/pacmodule/completeglass"]').parent().html();
And this all ul tag:
$('a[href="/pacmodule/completeglass"]').parent().parent().html();
How can I set class="active" attribute in li tag where href="/pacmodule/completeglass"
Thank you for help.
You do not need the html() calls. They just return the innerHTML as a string. You probably expected that would return the outerHTML (for the outerHTML use something like ...parent()[0].outerHTML)
Try this:
$('a[href="/pacmodule/completeglass"]').closest('li').addClass('active');
It will find the anchor based on the href = "/pacmodule/completeglass", then find the closest ancestor that is an LI, then add the class active to it.
closest is the most useful way to find an ancestor of a specific type. It is better than using parent() as closest copes with the HTML structure changing.
Note: If you explain the overall aim, there may be better ways to do this than searching for the link href :)
Update
You do not want to remove the previous selection with this as it is too specific:
$("#menu").find("ul:first").find(".active").removeClass("active");
try this instead:
$("#menu li.active").removeClass("active");
.closest()
$("li").removeClass("active").find($('a[href="/pacmodule/completeglass"]')).closest('li').addClass('active');
DEMO
Easily do this (into your js document):
$("#menu li").removeClass("active");
$('a[href="/pacmodule/completeglass"]').parent().addClass("active");
$("#menu").find("ul:first").find(".active").removeClass("active");
This can be made more effective writing it as:
$("#menu").find("li.active").removeClass("active");
Then the DOM dont need to search for any ul, instead it goes directly to the class .active
why don't you try this :
$("#menu").find("ul:first").find(".active").removeClass("active");
$('a[href="/pacmodule/completeglass"]').parent().addClass("active");
you might wanna check this fiddle
In developing a website, I have a section structured like so:
<ul id="preview-tabs" class="row nav nav-tabs">
<li>Main</li>
<li>Alternative 1</li>
<li>Alternative 2</li>
</ul>
With corresponding CSS:
#preview-tabs {
border-bottom: 1px solid #8E9753;
}
And finally the Javascript:
$('#preview-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
Now somewhere along the way I might need to change the ID of the UL to something like design-tabs and would have to remember to update the corresponding CSS and Javascript to maintain the functionality.
My question: is there a tool that keeps track of this relationship and can either
1) Alert me that some linked code needs to be updated OR
2) Do the update of the code automatically. Sort of like the Refactor feature for Java in Netbeans
Not that I know of though what you could do so that if you did update it then you wouldn't need to change your css is you could add a class to it instead of an id then target the element that way.
you should use ctlr+shift+R to replace a selected with another text.
I have a list in which I am dynamically adding the classname, now when I click on that item again the class stays there. I dont want that I want that classname to be assigned to the currently clicked list item.
<ul id="menubar">
<li>one</li>
<li>two</li>
</ul>
Now when I click on one I dynamically add classname, and when I click on two the classname stays the same on one and it gets affected on two as well. but I want it to be removed from one and to be applied to currently clicked item.
How can I achieve it?
$$('#menubar li').invoke('observe', 'click', (function(e) {
//removes classname from all the li elements
$$('#menubar li').invoke('removeClassName', 'myClass');
//Gets the li you clicked on
var list_item = Event.element(e);
//adds the classname
list_item.addClassName('myClass');
}).bindAsEventListener(this));
You need to be including .removeClass() in the same event as when you addClass() to the other one.
$('.one').click(function(){
$(this).addClass('myClass');
$('.two').removeClass('myClass');
});
This could be written more efficiently, but im writing this in between meetings.
Hope it's a start!