Develop Reference

double click to change tree label

I have a javascript tree control that I have constructed with nested UL and LI's. I want to enable users to double click to change the label of an item in the tree. I put this line at the top:
<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree" ondblclick="change(event)">
and for the change function I have:
function change(ev) {
ev.preventDefault();
console.log(ev)
var it = prompt("Channel Name", "");
}
When I look at the value of ev, it is everything about the mouse click event (location, etc.). Is there some way I can get the handle to the tree and even better the LI on which they clicked?

ev also has a target property which is exactly the element user clicked on.
So, for example, adding ev.target.textContent = it; to your function will change the element text to user's answer.

You can easily do it with JQuery like this:
$("ul li").ondblclick(function(){
var text = $(this).text()
console.log(text)
});
Hope it helped you.

JQuery toggle two classes at once

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/

Target currently clicked instance of element

I have multiple instances of a button element:
<div id="openambiance" class="openclose leftside"></div>
<div id="opendesign" class="openclose rightside"></div>
<div id="openperform" class="openclose leftside"></div>
They carry different ID's, as clicking on each of them opens different panel. I would like currently open panel to switch its open/close button background, as per definition in .openclose-active. Reality however is, they are all getting affected. My initial code looked like this and I quickly realised why they are all getting affected:
$(document).ready(function() {
$("#openambiance").click(function(e){
$("#hiddenambiance").slideToggle(600,"easeInOutQuint");
$(".openclose").toggleClass("openclose-active");
});
});
So I tried targeting specific elements:
$(this).find(".openclose").toggleClass( "openclose-active" );
That failed, so I went on to .siblings, .next and .parent, but with no luck. They are still either all switched or only previous instances get switched. I'm lost :(

this is the element you are looking for
$(document).ready(function() {
$("#openambiance").click(function(e){
$("#hiddenambiance").slideToggle(600,"easeInOutQuint");
$(this).toggleClass("openclose-active openclose");
});
});
You are clicking on the button which has the class openclose, so you need to toggle the class for this element not for any of its descendants

how to find the class name of 'deepest' div in javascript/jquery?

I am aware that e.target contains the info of the element just below the cursor, but what if I want to know the class name of the div which has a table>tr>td>button in it and I'm clicking that button inside that td. I know this events bubbles up and there should be a way to find out if the div exists in that bubbling levels. Any help.
Scenario: button is inside a modal window. How do I find the modal windows class name on click of the button inside it.

Use .closest() to traverse up the DOM to the nearest match:
var parentDiv = $(yourButton).closest('div');
Or in the button's click:
$(yourButton).click(function() {
var nearestParentDiv = $(this).closest('div');
// And read its class
console.log(nearestParentDiv.attr('class'));
});
The selector .closest() accepts can of course be more specific than this, so if if the modal window <div> has some known class but you need to inspect its other classes, you should use the more specific selector.

Yes as you say the event will bubble up to your div, so just make the div handle the event with .on() , like this:
$('#yourdiv').on('click',':button',function(e) {
alert( $(e.delegateTarget).attr('class') );//alerts the classes of #yourdiv
alert( $(this).attr('id'));//alerts the id of the clicked button (if have one)
});
UPDATE:
Fixed obtaining the reference to the original div where the event was attached. With event.delegateTarget from the Event object . Thanks Cristophe and Kevin B. for spotting the error.
See working demo

You can use .parent() to get the parent div attributes like id: http://jsbin.com/ololad/1/edit
$('button').click(function(){
console.log($(this).parent().attr('id'));
});

Understanding the logic behing a menu with active elements

I have a css rule like this:
.foo:active {
background-position: 0px -382px;
}
.foo is applied to an anchor.
I have a set of several buttons displayed side by side.
I need to have a very common behaviour here:
When the user clicks on button 1, it stays active.
If the user clicks on button 2, that should be active and the orders shouldn't.
If we click on button 3 the same thing... and so on...
So, we should only allow one active button.
Can we deal with this using javascript or should we rely on a server side language?
Perhaps javascript will do the job, since, here, we are not refreshing the page each time the user clicks on one of those buttons.
What is the logic behind this ?
Update:
I should add something to onclick event, I should allow to onclick, apply a class that places the background in a way that the element looks active. But, I'm not sure, how to deal with the part that ONLY ONE of those 9 should be active. :s
Note: should I provide more details, please, let me know.
CODE SAMPLE:
function showDetails(eid){
$.post(baseUrl+"/index/show.details",{id:eid},function(e){
...
//remove ativoFinalista class from all elements with .botoesEquipas class.
$('.botoesEquipas').removeClass('ativoFinalista');
//add the class to the clicked element
$(this).addClass('ativoFinalista');
}, 'json');
}
Css:
I have nothing defined for .botoesEquipas.
.ativoFinalista {
background-position: 0px -130px;
}
The anchor:
<a class="botoesEquipas botaoFinalista<?php echo $e["cod_team"];?>"
href="javascript:;" onclick="showDetails(<?php echo $e["cod_team"];?>)"><?php echo$e["name"];?></a>

You can use jQuery, but note that a class fooactive is needed:
$('.foo').click(function() {
$('.foo').removeClass('fooactive'); // Remove active class from all elements of class foo
$(this).addClass('fooactive'); // Add active class to this specific one
});
Then code CSS like:
.foo { /* default foo style */ }
.fooactive { /* extra styles when active */ }
Edit: You bind click functions the old way. In that case, pass the element like:
onclick="showDetails(123,this)"
and
function showDetails(eid, element){
$('.foo').removeClass('fooactive');
$(element).addClass('fooactive');
}
http://jsfiddle.net/eEJma/

I would use jQuery. There is no need to call back to a server-side language:
Logic:
Remove all active classes
Add active to the clicked button.