We Keep Coding

Changing an element's class on another element's click event

I have the following code, but it's not working. I'm trying to add or remove a class based on a click event.
Javascript:
function done(e){
if (e.hasClass("Gset")) {
e.removeClass("Gset")
}
else {
e.addClass("Gset")
}
}
HTML:
<h4 id="test">
<input type="checkbox" onClick="done(test)">
Ready?
</h4>
Here is a Jfiddle link showing it
Any help would be greatly appreciated!

Your code isn't working because e in your function is a DOM element, not a jQuery object. DOM elements don't have jQuery functions on them.
I should note that the only reason that it's a DOM element is that by giving the element an id, you've caused the browser to create an automatic global for it, which is why onClick="done(test)" works at all (the test there is a variable reference, and will pick up the automatic global).
The minimal fix is to make it a jQuery object:
function done(e){
e = $(e); // <===
if (e.hasClass("Gset")){e.removeClass("Gset") }
else {e.addClass("Gset") }
}
But a more thorough fix is to use toggleClass as well:
function done(e) {
$(e).toggleClass("Gset");
}
And even more thorough update would be to hook up the handler using jQuery rather than using the long-outdated onxyz attributes, not least because relying on automatic globals is error-prone (for instance, id="name" would fail):
$("#test input").on("click", function() {
$("#test").toggleClass("Gset");
});
.Gset {
background: yellow;
}
<h4 id="test">
<input type="checkbox">
Ready?
</h4>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Send the parameter as:
done(this)
And then in the function:
function done(e) {
e = $(e).parent();
if (e.hasClass("Gset")) {
e.removeClass("Gset")
} else {
e.addClass("Gset")
}
}
There's a simpler way:
function done(e) {
$(e).parent().toggleClass("Gset");
}
Reasons:
e, as passed as this will be a DOMElement, but hasClass, addClass and removeClass works only on jQuery objects.

It will be better if you avoid inline-event onClick.
HTML :
<h4 id="test">
<input type="checkbox">Ready?
</h4>
JS :
$('#test input').click(function(){
$('#test').toggleClass("Gset");
})
Hope this helps.

jQuery fire function when element specific class change

I need to trigger an event when i add a specific class on button, but I have no idea how to make it listen to the class adding event.
I have something like this:
<script type="text/javascript">
$(document).ready(function() {
$(id_element).addClass("active");
//this function will fire on add "active" class to "id_button" element
function fireOnActiveClass() {
//do something
}
}
</script>
I can't touch code $(id_element).addClass("active");, for more reasons.
Currently I use jQuery 1.7.2
Could you please tell me how or which I need to know?

You are modifying the class of the control in your code. So why not simply call the click of the button when you change the class ?
$(id_element).addClass("active");
$(id_button).click();
$(id_button).click(function () {
if ($(this).hasClass) {
//do something
}
});

There is no event raised when a class changes. The alternative is to manually raise an event when you programatically change the class:
$(document).ready(function() {
$(id_element).addClass("active").trigger('classChange');
$(id_element).on('classChange', function() {
// do stuff
});
});

One other way would be to call a function right after adding the class like:
$.fn.classAdded = function() {
var $button = $(this);
if($button.hasClass('id_button')) {
// ...
}
return $button;
}
$(id_element).addClass("active").classAdded();

I have found solution using this jQuery Plugin: http://meetselva.github.io/attrchange/

Could this jQuery plugin be any help?
https://github.com/tormjens/jquery-dom-router
You can change the default element using
$.DOMRouter.defaults.element = '#element';
before initalizing the plugin.

Prototype event handler

I've defined the following HTML elements
<span class="toggle-arrow">▼</span>
<span class="toggle-arrow" style="display:none;">▶</span>
When I click on one of the elements the visibility of both should be toggled. I tried the following Prototype code:
$$('.toggle-arrow').each(function(element) {
element.observe('click', function() {
$(element).toggle();
});
});
but it doesn't work. I know everything would be much simpler if I used jQuery, but unfortunately this is not an option:

Instead of iterating through all arrows in the collection, you can use the invoke method, to bind the event handlers, as well as toggling them. Here's an example:
var arrows = $$('.toggle-arrow');
arrows.invoke("observe", "click", function () {
arrows.invoke("toggle");
});
DEMO: http://jsfiddle.net/ddMn4/

I realize this is not quite what you're asking for, but consider something like this:
<div class="toggle-arrow-container">
<span class="toggle-arrow" style="color: pink;">▶</span>
<span class="toggle-arrow" style="display:none; color: orange;">▶</span>
</div>
document.on('click', '.toggle-arrow-container .toggle-arrow', function(event, el) {
var buddies = el.up('.toggle-arrow-container').select('.toggle-arrow');
buddies.invoke('toggle');
});
This will allow you to have multiple "toggle sets" on the page. Check out the fiddle: http://jsfiddle.net/nDppd/
Hope this helps on your Prototype adventure.

Off the cuff:
function toggleArrows(e) {
e.stop();
// first discover clicked arow
var clickedArrow = e.findElement();
// second hide all arrows
$$('.toggle-arrow').invoke('hide');
// third find arrow that wasn't clicked
var arw = $$('.toggle-arrow').find(function(a) {
return a.identify() != clickedArrow.identify();
});
// fourth complete the toggle
if(arw)
arw.show();
}
Wire the toggle arrow function in document loaded event like this
document.on('click','.toggle-arrow', toggleArrows.bindAsEventListener());
That's it, however you would have more success if you took advantage of two css classes of: arrow and arrow-selected. Then you could easily write your selector using these class names to invoke your hide/show "toggle" with something like:
function toggleArrows(e) {
e.stop();
$$('.toggle-arrow').invoke('hide');
var arw = $$('.toggle-arrow').reject(function(r) {
r.hasClassName('arrow-selected'); });
$$('.arrow-selected').invoke('removeClassName', 'arrow-selected');
arw.show();
arw.addClassName('arrow-selected');
}

Attaching onmouseover after page is rendered?

Hi,
When the page first is rendered my div elements looks like this :
<div onmousedown="this.className='showhideExtra_down_click';"
onmouseout="this.className='showhideExtra_down';"
onmouseover="this.className='showhideExtra_down_hover';"
class="showhideExtra_down" id="extraFilterDropDownButton"> </div>
Then i manually updates the onmouse attributes with javascript so it looks like this :
<div onmousedown="this.className='showhideExtra_down_click';"
onmouseout="this.className='showhideExtra_down';"
onmouseover="this.className='showhideExtra_down_hover';"
class="showhideExtra_down" id="extraFilterDropDownButton"> </div>
They looks the same, the big difference is that the first one will change class when hovering and the second will not? Is it not possible to set this after page is rendered?
Please note : I need IE6 compability, thats why I use onmouse instead of CSS hover
BestRegards
Edit : This is what I found and that works grate, I haven´t tested it in IE6 just yet :
$("#extraFilterButton").hover(function() {
$(this).attr('class','showhideExtra_down_hover');
},
function() {
$(this).attr('class','showhideExtra_down');
});

you can use:
$('#selector').live('mouseover',function(){//something todo when mouse over})
live() allows for dynamic changes
(you can do the same for 'mouseout')

To expand on #maniator's correct answer, I would use:
$("#some_id").live("hover",
function() {
// do on mouseover
},
function() {
// do on mouseout
});

This is what I ended up with :
$("#extraFilterDropDownButton").hover(function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up_hover');
}
else{
$(this).attr('class','showhideExtra_down_hover');
}
},
function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up');
}
else{
$(this).attr('class','showhideExtra_down');
}
});
This is however not yet tested in IE6.

Live query plugin doesn't work with the visible attribute selector

I have the following running in the jquery ready function
$('[id$=txtCustomer]:visible').livequery(
function() { alert('Hello') },
function() { alert('World') }
);
I get an alert for the first time saying 'Hello' but the functions are not called onwards when i toggle this visibility of the textbox.
Please help.

The livequery "match/nomatch" events don't work with jQuery pseudoselectors like ":visible". They do work for class selectors.
An easy fix would be to also add a class when you show the item, and remove a class when you hide the item.
For example:
(html)
<input type="button" value="toggle"/>
<div id="item"
style="width:100px;height:100px;background-color:#ff0"
class="Visible">
</div>
(script)
$(function() {
$("#item.Visible").livequery(
function() {
alert("match");
},
function() {
alert("nomatch");
}
);
$("input").click(function() {
if ($("#item").is(":visible"))
$("#item").hide().removeClass("Visible");
else
$("#item").show().addClass("Visible");
});
});
A demonstration of this can be found here: http://jsbin.com/uremo