We Keep Coding

Change id label into CSS by clicking on a button and using javascript

need a kind help from you:
I have this CSS and i want to change the word "ACTIVE" into another word after clicking on a button:
after clicking it should be:
example: body.new.content
My code is:
enter image description here
Could you please help me?
thanks.
Thank you for your answers, my issue is how to perform this:
When i click on the first press button (as you can see in the picture), it will open 2 pop-ups also the second button
enter image description here
enter image description here
This is my html code:
enter image description here

why you need to change css using javascript. It's not a correct way and can't do directly.
For example, if you have a need, try to remove active and add need class in your html content. Keep both type styles in your css. If still having exact need to modify, tell us denarii, let we think through and guide you. Thanks,

I don't think you can interfere in CSS with the way you described it.
you need to add a new class using classList.add("the name of the class you want to add") then append it to the parent div or for example the body with the append() or appendChild() methods then if you want you can style it using .style

I don't recommend you do this, because you'll run into some problems later in the development of your app.
Anyways I can give you a solution for that. Every DOM element has a lots of properties, one of them is classList which is an array of classes that the element has.
You can get it this way: body.classList
So, if you want to remove the class .active from your body you can use the remove() method like this: body.classList.remove('active'). Then if you want to add another class like .new you must use the add method like this: body.classList.add('new'). Make sure there is a 'new' class in css.

How can I modify CSS using NodeList?

I am just learning JS/CSS.
Here is the site I am playing with.
http://keysoft.keydesign-themes.com/demo1/
I want to change "text-align" attribute of a style ".pricing .pricing-row" to "left" using JavaScript.
When I change it in Chrome console (Styles) to "text-align:left" I see that it aligns rows to left but keeps buttons centered. That is what I want.
I tried in console: document.querySelectorAll('.pricing.pricing-row')but I can't understand how to select textAlign attribute from there. It shows a NodeList.
Also I have tried document.getElementsByClassName('pricing-row') but there are elements like div.pricing-row.button-container.
These elements are unnecessary because if I use them in a loop then buttons' alignments will be affected.
So my goal is to align only "pricing-rows" without affecting alignment of buttons or other parts.
Could you tell me please the most efficient way to accomplish this task?

I'm not sure how to do this in pure JS but it's possible with jQuery.
Basically your problem is that some of the 21 divs that have the class 'pricing-row' also have other classes, and you don't want to pick those. Well actually that helps you weed them out.
First off - in order to use jQuery in the webdev console do this:
$===jQuery // should prompt true
Now:
$("div[class='pricing-row'")
will pick only divs with this specific class. Then you can do whatever you want with them. in your case:
$("div[class='pricing-row'").css('text-align', 'left');
another option which is simply very useful to no is the jQuery not() method:
$(".pricing-low).not('.button-container .selector').css('text-align', 'left');
What happens here is that first all of the elements with the "pricing-low" class are selected, and then the not() method drops the ones that have the following extra classes. In the end the css manipulation works.

how to toggle this function using my custom function

Im trying to toggle the function but its not working. i don't where im wrong
Fiddle
Tried Code
$('.toggledropdown').click(function(e){
// $('.showdropdowninv',this).toggle('slow');
$('.showdropdowninv').toggle('slow');
});
I need to toggle particular clicked ul but its not working . Im using this function its not working
something like this
$('.showdropdowninv',this).toggle('slow');

To toggle the display of just the items associated with the clicked anchor, use jQuery's DOM navigation methods to go up to the closest parent div, then down to the .showdropdowninv item(s) within that div only:
$('.toggledropdown').click(function(e){
$(this).closest('div').find('.showdropdowninv').toggle('slow');
});
Updated version of your fiddle: http://jsfiddle.net/V4X4t/243/
(Obviously the closest parent element might not be a div in all cases, but it is for the html in your fiddle. You could also select the parent by class, e.g., for your html you could use .closest('.element-dragging').)
(Note also that you could use a similar technique to implement the "Select all" checkboxes for each group.)

How to use the same JQuery effect for different divs with same class

I'm not really into using javascript and jQuery so please add detailed answers.
I need to add a jQuery effect to different divs with the same class, so that when I click on a div 1 with class item, another div info will appear in a specific container.
Also, if I click on div 2 with the same class item, another div pics will appear in the same container as info while info will disappear.
I was going to use this:
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
But this is not valid for using about 10 divs and another 10 displaying and hiding divs.
I would use many lines of code and I am not sure that it would work.

You could use the selector $(".item") to get all the divs you're interested in.
Class selector sounds like what you need: http://api.jquery.com/class-selector/
You can differentiate the ids once you're inside the click call and take a different action. but the class selector will let you use the click event handler on all of the divs you're interested in.
sample code below
$(document).ready(function(){
$(".item").click(function(e){
// output the id of the clicked item
console.log($(e.target).attr("id"));
if($(e.target).attr("id")=="box1"){
//do something for if the clicked item is box1.
$("#box1").fadeOut(250);
$("#box2").fadeIn(500);
}
});
});

Without your html, it's hard to say exactly. But, here's a starter point.
Your existing jQuery is like so, which is grabbing every div by ID.
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
An improvement would be to use a class rather than an ID, and you could do something like so.
NOTE: The below assumes you assign either a different class, or an additional class of itempic to the div(s) you want to trigger the pics to be displayed:
$(document).ready(function(){
$(".item").click(function(){
$(".info").fadeOut(250);
});
$(".itempic").click(function(){
$(".pics").fadeIn(500);
});
});
If you have multiple divs that are going to have this same functionality (for example, you've got a bunch of products, each with an info box and a pic box), then you'll need to do something with "containing" the selectors to the given items. With some example HTML, I could provide an answer that takes that into account.

Structure you html similar to this
<div id="container">
<div id="info">info contents</div>
<div id="pic">pic contents</div>
</div>
<div class="item" data-related="#info">your contents</div>
<div class="item" data-related="#pic">your contents</div>
..etc.
and use
$(function(){
$('#container').children().hide(); // initial hiding
$('.item').click(function(){
var relatedId = $(this).data('related');
$(relatedId).show().siblings().hide();
});
});
Demo at http://jsfiddle.net/gaby/mTSZv/

When selecting with jQuery you need to use #id_name for IDs and .class_name for classes. When selecting div, tr, td, ... you need no special symbol before the name. So:
$('#id_name').click(); // click on every item of the ID 'id_name'
$('.class_name').hide(); // make all items invisible that have class 'class_name'
$('tr').addClass('class_name'); // adds the class 'class_name' to all tr items
IDs are unique. Classes can appear more than once.
Just read the examples on jQuery API
In order to get started with JS jQuery is very good. Very fast to do, but don't forget jQuery is a library that has to be loaded making these short commands possible. Pure javascript will be faster.
Don't forget, you can combine JS and jQuery, as jQuery is JS. Switching to pure JS will also make you see what your scripts exactly do.

How to remove a JavaScript initialisation?

What I am trying to achieve is a second dropdown list to be populated with values based on the selection of the first dropdown list.
I've got it to work using the following:
http://jsfiddle.net/ydPfH/6/
The problem is that an external plug in that I am using to display images in a drop down list somehow stops this code from working properly.
The code that initalises this plug-in is $("body select").msDropDown(); and what I have below the simple search form that uses this plug-in is a jquery expandable div so you click Advanced Search to expand the form with the dynamic dropdowns.
<a href="#" rel="toggle[advancedsearch]" data-openimage="images/collapse.png" data-
closedimage="images/expand.png">Advanced Search<img id="expand"
src="images/collapse.png"/> </a>
<div id="advancedsearch">
<p>Document Properties:</p>
<form>
<select id="tags" name="tags" class="tags">
etc....
What I'm hoping for is some kind of onclick or something even easier to call to another JS method to somehow remove the $("body select").msDropDown(); initialisation or to even initialise something silly that in turn removes it.
Full source of the page can be seen here if it helps: http://jsfiddle.net/pQ9LT/
Thanks,
Martin

If I'm getting this right, here is the answer:
You should add class attributes to the <select> elements that are going to be using your msDropDown plugin. Then initialize the plugin like this $('select.yourClass').msDropDown();
where yourClass is the class name you assigned these <select> elements.
The body part in your selector is superflous.
This way, jQuery will only apply the plugin to the <select> elements "marked" with you class name and not all of them so you can use the other "normal" <select> elements without interference.
Hope I helped you out.

I'm not completely clear on what your overall requirements are and what may or may not be acceptable so where are a few thoughts that I have.
Give the select elements you do not want styled as image combo boxes a class or an id. Then use the :not() selector in combination with your msDropdown initialization
$("body select:not('.nostyle')").msDropDown(); //using the class 'nostyle' to filter out the elements that should get the image combobox
Use a more specific selector in the initialization call; this is kinda the opposite of the above
$("body select.classOfSelectsTobeStyled").msDropDown(); //using the class 'classOfSelectsTobeStyled' on elements that should get the image combobox