Keep old class and toggle new class - javascript

I am trying to create collapsible tree. I this my leaf nodes have class="member". The code highlights the path user is on in the tree. The problem is when i am using $(this).toggleClass("xyz"); it is removing my "member" class.
I want to keep both class on leaf node
<li class="member xyz">Name</li>
jsfiddle code
using the member class I have css style that changes bullet images on my original code. so, i need to keep the member class.

Examine this code:
$("li.clickedli").removeAttr("class");
This removes the entire class attribute, thus removing all classes. Just set/clear the specific classes you need/don't need.

Related

class definition in DOM connect in javascript

I don't know what is different between (I) and (II) ?
whether these class is same for use in a (js file/css file) or not
different ?
I: <div class="start-box active">
II: <div class="start-box">
in I you have two class start-box and active but in II you have just one class.
you can use js to add or delete class from element. and with css you can set some css property for the active when use event handler
you can read this link HTML Event Attributes
The class name attribute of an element accepts a single class name, or a space separated list of class names.
So in
<div class="start-box active">
the div element has two classes, start-box and active, whereas in
<div class="start-box">
the div element is only assigned the one class, start-box.
The combination of multiple classes on one element, or even the effect of a single class on an element given its relationship to other elements, is subject to the rules of cascading style sheets (meaning "CSS") .
I wish you well in learning more about CSS - you may find that the article "Learn to style HTML using CSS"](https://developer.mozilla.org/en-US/docs/Learn/CSS) on MDN useful in doing so.

jquery allow only one of a group of classes on an element?

I have an element that gets a number of classes added to it + removed from it dynamically using jQuery. I'd like to ensure that I have only one of a set of classes on the element at a given time.
For example, I could have the .blue_element class that defines a font color, background color, border color, etc., and I wouldn't want that on the element at the same time as a .red_element class or a .yellow_element class, but I wouldn't mind it being on at the same time as a .small_element class or .big_element class.
Current method:
$('#target_element').removeClass('yellow_element').removeClass('red_element').addClass('blue_element')
This works fine but seems like it creates a risk for error, e.g. if I add a .purple_element class but forget to modify my removal code.
I'm doing this on a larger scale than in my example and may be adding and removing classes quite frequently, so I'd expect to make some boneheaded mistakes if I do it this way. Is there a more efficient way to do this?
Instead of using jQuery use native mathod
document.getElementById("target_element").className = 'blue_element';
Above code will remove all classes and keep/add only 'blue_element';

D3 Selecting all elements having a certain class or combination of classes

I am using D3 and I want to select all elements on the page that have a certain class. I have tried:
d3.selectAll("body").attr("body", "symbol-clicked");
but this assigns the class symbol-clicked to all elements on the page. I just want a collection of group of elements that already have the symbol-clicked class so I can change it to just symbol.
Any help is greatly appreciated.
Use
d3.select("body").selectAll(".className")
This will give you all the elements with the class 'className'.
To get elements with multiple classes. Try
d3.select("body").selectAll(".className1").filter(".className2")

How do I add a css class to a tree node in Ext4?

I would like to highlight some of the nodes in an Ext.tree.Panel.
In Ext3 I accomplished this by adding a class to the tree node ui object:
// add a class with to highlight the node
myTreeNode.getUI().addClass('highlightclass');
// remove the class to remove the highlighting
myTreeNode.getUI().removeClass('highlightclass');
What is the equivalent in Ext4?
I have been able to change the icon by setting the iconCls field of my node model, but I would really like to be able to set a class that allows me to highlight the whole node.
Here is the answer I found to my own question:
// add a css class to a specific tree node
myTreePanel.getView().addRowCls(myTreeNode,'highlightclass');
// remove a css class from a specific tree node
myTreePanel.getView().removeRowCls(myTreeNode,'highlightclass');
While the selected answer may work, in my version of ExtJS (4.0.7) as soon as I expand or collapse a node in my tree panel the css classes were all reset. I believe the more permanent way to fix this would be
myTreeNode.set('cls', 'highlightclass');
This will add your class to the specific tree node's td.x-grid-cell DOM element.
Hope that helps
To accomplish this you will need to think of the tree instead as a treegrid. Set up a columns definition for your tree with only one column, hide the header of the column and add a renderer to the column.
after that you can define your renderer like so with a css class defined for your highlighted rows and probably an attribute on the row model to tell which rows should be highlighted:
renderer: function(value, metaData){
if (whatever you want here as a condition) {
metaData.tdCls = "x-grid-row-alt-mine";
}
return value;
}

How can I add a hover class to an element?

In my CSS I have:
li.sort:hover {color: #F00;}
All my LI elements under the sort class function properly when the DOM is ready.
If I create a new LI element (using mootools el.addClass(classname)) I can set the base class, but can't figure out how to add a hover class to it.
Any ideas?
The hover pseudoclass can be defined ahead of time in the stylesheet based on the classname that you're specifying. Such as:
li.classname:hover {color:#F000;}
So it's defined the same way, via the stylesheet. You would just plan ahead, knowing that you'll be defining the class name on JS-generated LI tags with a certain class, and style for it despite the fact that the list items don't exist until you create them with JavaScript.
Hover class is added automatically when you add the non hover class. E.g. if you have
.MyClass
{
...
}
.MyClass:hover
{
...
}
just add the MyClass, and the MyClass:hover will work.
:hover is not a class, but is a pseudo-selector that will select any elements the mouse is currently hovering over. If you create an li element, and add the sort class to it, then whenever you move your mouse over the element, the li.sort:hover rule should be activated, if the browser is working correctly.
Not all browsers will accept the hover pseudo class on all elements. You should consider using javascript for this effect. jQuery for example, makes this very easy.
Not all browsers will accept the hover pseudo class on all elements. You should consider using javascript for this effect. jQuery for example, makes this very easy.
To be more specific, IE6 only picks up :hover styles on anchor (a) elements.

Categories

Resources