JQuery toggle two classes at once - javascript

Here is the code: http://jsfiddle.net/celiostat/NCPv9/
the 2 Jquery plugin enables to change (and set):
- background color of div to gray
- text color to red.
Problem is I have to exactly point the mouse exactly ON the text so that text changes color too.
I would like to change background Div color AND text by clicking -- anywhere -- in the div
Tried various combination from other post..but nothing worked.
(ideally I would also like to change picture at the same time !)
$(".item_unselected").on("click", function() {
$(this).toggleClass("gray_cliked_box");
$(".item_unselected").not(this).removeClass("gray_cliked_box");
});
$(".item_text_in_menubar").on("click", function() {
$(this).toggleClass("blue_cliked_text");
$(".item_text_in_menubar").not(this).removeClass("blue_cliked_text");
});

You're fairly close, but the reason you have to click on the text is because you're only setting the class for the text once you click on it - you never set it from when you click on the div. Thankfully, you can optimize (and fix) your code by only having one event. If you click on a div, you simply set both items.
You can do this using the find method in jQuery to find the span that you want to modify when clicking on the div. The updated JS is as follows:
$(".item_unselected").on("click", function () {
$(".item_unselected").removeClass("gray_cliked_box");
$(".item_text_in_menubar").removeClass("blue_cliked_text");
var $this = $(this);
$this.addClass("gray_cliked_box");
$this.find(".item_text_in_menubar").addClass("blue_cliked_text");
});
Updated Fiddle: http://jsfiddle.net/NCPv9/3/
What this actually does, is remove the class from all the objects, and then just simply add the classes back to the ones you want. You also don't have to use toggleClass. You know you're adding it so just use addClass.

This is a CSS problem, not a jquery problem. I updated your last CSS selector to:
.gray_cliked_box .item_text_in_menubar { /*for jquery*/
color: red;
}
and the text changes to red when clicked.
The added selector says that children of .gray_clicked_box with a class .item_text_in_menubar should be red. This supercedes other definitions of .item_text_in_menubar because it's a more specific selector.
http://jsfiddle.net/NCPv9/4/

Related

Bootstrap list-items activating on embedded span

Sorry for the title, I found no better way to describe it.
I have a list-group and want the buttons to show a specific color when active.
but somehow, the embedded spans capture the click and seem to not count as part of the a.
how can I fix this?
I want the button to change color, no matter where I click (on span or anywhere else)
The code is here:
https://jsfiddle.net/zj6uwmvu/
thanks
Here is the revised code for your click handler. If the event target is not a link, it means that the child badge was clicked. If this is the case, we find the closest link (the parent) and assign it as the target.
$('.location').find('.location-picker-list .list-group-item').on('click', function(e) {
var target = $(event.target);
if (!target.is('a')) {
target = target.parent('a')
}
e.preventDefault()
target.closest('.list-group').children(".active").removeClass('active')
target.addClass('active')
})
https://jsfiddle.net/zj6uwmvu/11/
instead of getting the item by "a", try getting it by its class like this:
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover{
background-color: red; //instead of red put the color that you want.
}

jQuery custom menu - adding and removing classes onClick

If someone can think of a better title for this question, please feel free to alter it. This is the issue: in a navigation menu, clicking an item should mark it red (default is orange). Both orange and red styles (class names bmark and bmark_active respectively) were generated using the CSS Button Generator application. This is the jQuery code which should do the job:
$(function () {
$('.bmark').click(function(){
$('.bmark_active').addClass('bmark');
$('.bmark_active').removeClass('bmark_active');
$(this).addClass('bmark_active');
$(this).removeClass('bmark');
});
})
It works fine for all buttons, except the default one ('All' in the fiddle example). So if you click 'Russia', for example, the red focus will move onto that button (by removing orange class and adding red class), but then when you click 'All' again, it doesn't switch to red. Why is that and how do I fix it?
JS Fiddle
You're not applying the click() event to the parent element, only applying it to the child elements:
$(function () {
$('.bmark, .bmark_active').click(function(){
$('.bmark_active').toggleClass('bmark').removeClass('bmark_active');
$(this).addClass('bmark_active').removeClass('bmark');
});
})
jsFiddle here.
Updated your fiddle do it that way. More simplified. The other answers here work fine but this is the least verbose way of handling it.
$(function () {
$('.bmark').click(function(){
$('.bmark').removeClass('active');
$(this).addClass('active');
});
})
http://jsfiddle.net/chazelton/52esG/2/
You're not binding on the '.bmark_active' element.
You can do this :
$(function () {
$(document).on('click', '.bmark_active,.bmark', function() {
$('.bmark_active').addClass('bmark').removeClass('bmark_active');
$(this).removeClass('bmark').addClass('bmark_active');
});
})
Demonstration
But most often I'd prefer to give the same class to all elements, and to only add or remove a class on the active elements, so that the event handling code would be
$('.bmark').removeClass('active');
$(this).addClass('active');
It also lets the CSS be cleaner as your two classes are, for now, mostly identical and it's better to have just the few changes between the two modes isolated in the 'active' class.

using javascript to double click one paragraph and all paragraphs changes

Let's say I have 5 paragraphs and if I double click one paragraph and all paragraphs changes color how can I do it with javascript? I have to use javascript and nothing else. Not even using jquery.
The code I have right now will only change that paragraph into blue not all....how can I do all if I double click any...
var allPara=document.getElementsByTagName("p");
for(i=0;i<allPara.length;i++)
{
allPara[i].ondblclick=function()
{
this.style.color="blue";
}
}
The easiest way is to use CSS to help you.
You can use getElementsByClassname to select all the paragraphs (http://blog.whatwg.org/the-road-to-html-5-getelementsbyclassname) after you change the classname for the selected paragraph.
Or, just do getElementsByTagName (https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName) and change the classname (CSS) for the non-selected paragraphs, which will change the color.

Adapt my js code to an input

I have this javascript code that creates a slider:
http://jsfiddle.net/samccone/ZMkkd/
Now, i want to use this code on a checkbox input. the problem is that the code creates a child element that slides in it's parent using a css position, and an input cannot have a child.
My idea was to use background-position and just slide the background of the input from left to right using css instead of using real positioning.
How can I adapt this script? It is quite easy I think but after a couple of tries I just gave up, i'm not good enough :).
Thanks for your help,
Christopher
Believe it or not, for checkboxes a switch effect is possible to create without JavaScript.
If you follow your checkbox with a label:
<input type="checkbox" id="jim" />
<label for="jim"></label>
You will find that you can select the label with the next sibling selector:
input + label { /* some CSS */ }
Why is that useful? Because using the pseudo selector :checked you can now style the label based on the state of the checkbox:
input + label { background-position: 0 0; }
input:checked + label { background-position: 100% 0; }
Clearly, due to the for="jim" attribute, clicking on the label will change the state of the checkbox. So if you hide the checkbox, you end up with a styled, clickable label.
input { display: none; }
Of course, labels can have children so you can be as fancy as you want with your recreation of a switch. And you should be careful to include :focus styles as well, for people who tab to your checkbox rather than click on it.
For browsers that do not support the :checked pseudo class (IE8 and below), it's pretty easy to emulate with a global handler and a 'checked' class. Something like:
jQuery(document).bind('change', function(e){
var elem = jQuery(e.target);
// If this is not a checkox, do nothing.
if (elem.attr('type') !== 'checkbox') { return; }
// Add or remove checked class based on current state.
if (elem.attr('checked')) { elem.removeClass('checked'); }
else { elem.addClass('checked'); }
});
...should do it.
You might need to store some data in object properties (or the .data() api), but your background position idea should work just fine. Just replace your calls to .offset().left with .css('background-position') (you'll have to split and parseInt the string it returns tho) and keep plugin' away at it.

How to change css properties of html elements using javascript or jquery

How can I change CSS from javascript.
I'm using jQuery-ui Dialog and I want to change the style of a DIV from javascript.
Thanks
Check out the jQuery documentation. If you want anything it will be there.
Anyhow, if you want to add styles to elements, you need to use the css function, which has a few variants.
$(selector).css(properties); // option 1
$(selector).css(name, value); // option 2
So if you have a DIV with ID of "mydiv" and you want to make the background red, you would do
$("div#mydiv").css({'background-color' : 'red'}); // option 1
$("div#mydiv").css('background-color','red'); // option 2
The first way is easier if you're setting multiple things at once.
If you want to check what a property is currently set to, you would use a variant of the 2nd option, just omit the value.
var color = $("div#mydiv").css('background-color');
Would make the var color be red if you already set it above, for example.
You can also add and remove classes, doing something like
$(selector).addClass(class_name);
$(selector).removeClass(class_name);
This answer works even without jQuery.
So you have something like this:
<style type="text/css">
.foo { color: Red; }
.bar { color: Blue; }
</style>
<div class="foo" id="redtext"> some red text here </div>
If you wish to change just some attributes, you can always find the element using
var div = document.getElementById('redtext');
function and then change the attached color style by
div.style.color = 'Green';
Making your red text appear in green instead.
If you want to change the class defined for the div to another style class, you can do:
div.className = 'bar';
making the div now use class bar, which makes your previously green text blue.
There are a couple of ways to manipulate elements styles using the jQuery framework. Take a look through the documentation related to CSS and changing attributes:
http://docs.jquery.com/Attributes/addClass#class
http://docs.jquery.com/CSS
Try this.This is jquery code.
$("myDiv").css({"color":"red","display":"block"})
If you are using vanila javacript,try this.
var myDiv = document,getElementById("myDiv");
myDiv.style.display = "block";
myDiv.style.color = "red";

Categories

Resources