Develop Reference

Change html element class using JQuery has no effect

Actually i'm trying to change a class with jquery to a bootstrap badge item.
The item's are generated dynamically so on click of the table item i add to a variable the id of the anchor.
Then i've made 4 functions for each item of popover that you can see on the screen
Each of the popover anchors as CHIUSO RISOLTO etc. should change the main anchor class of the table item.
Actually i was trying to use something like this to change the class
function Risolt() {
$("#idticket").removeClass();
$('#idticket').addClass('badge badge-success');
}
I think the problem is on setting the id as onClick of table items i've set the following function
var idticket
function setId(id) {
idticket = id
}

SOLVED:
As i was setting of table item click the id to a variable the #idticket simply doesn't exist i just had to concatenate the variable in jquery and not add that as text.
Thank's all for helping.

At first you should replace $("#idticket").removeClass(); to $("#idticket").removeAttr('class');, then add any class you want.

You can use toggleClass jQuery to switch classes
$('#idticket').toggleClass("oldClass newClass");

How to make text appear when having a specific hashtag in URL?

Is it possible to make text appear when only the right id is used? So that some text is only visible when the URL says http://example.com#hello and not visible when it just says http://example.com
(I'm not from an English-speaking-country so I'm having a hard time describing this.)

if (window.location.hash == "#hello") {
document.getElementById("myElement").style.visibility = "visible"
} else {
document.getElementById("myElement").style.visibility = "hidden"
}
You would probably want to get the element and set it to a variable instead of calling to the DOM both times, but you should get the idea here. You could also use display: none instead of the visibility property if you wanted to.

for that you should use JavaScript and check if the URL has it or not and then select the element you want to add or remove a behavior..
var textElement = document.getElementById('myTextElement');
if(window.location.hash == '#hello'){
textElement .style.display = 'block';
} else {
textElement .style.display = 'none';
}
Hope it helps.

I think this can be done with pure CSS through using the :target selector: When navigating to yourpage.com/#id an element is targeted, and as such the rules in the :target selector apply.
#test{opacity:0;}
#test:target{opacity:1}
<div id="test">Can you see me?</div>
click me

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.
}

Overlay div for multiple divs

I'd like to make a div overlay for multiple divs. This code does
function showOverlay()
{
var o = document.getElementById('overlay');
o.style.visibility = 'visible';
}
function hideOverlay()
{
var o = document.getElementById('overlay');
o.style.visibility = 'hidden';
}
How can I make this code work so that I don't have to duplicate the javascript with a new ElementId for each div I'd like to hide/show ?
hide</div>
show
Thanks.

See this fiddle http://jsfiddle.net/5sVvA/
Use jquery with this function
$('.showlink').click(function () {
$('#' + $(this).attr('rel')).show();
});
$('.hidelink').click(function () {
$('#' + $(this).attr('rel')).hide();
});
Then create <a> links with class showlink or hidelink or whatever class depending on what function do you want to call and rel='XXX' where XXX is the ID of the div you want to show/hide, you must make a new link with a new rel for each div that you want to hide or show.
If I misunderstood your question please tell me.
To set it hidden by default, you must use in css display: none; for the divs you want to be hidden by default, then if you click on hide, nothing hapens (it is already hidden!) but on show, it will show up, and if you then click on hide, it will hide again :)
About the rel stuff on css, you can't, it is a HTML property, not a css one, you must set it on the <a> tag.
To hide the text among it's div, you can use this http://jsfiddle.net/robhunter/5sVvA/1/ and adapt it to your code, basically you set it hidden by default, and when you click on show link, you find the hide link and show it up.
With this code, you must set an id to each link with this format
rel + hidelink in this case it will be overlay1hidelink because rel=overlay1, so for rel=overylay2 it will be overlay2hidelink and so on...

Give all the <a>'s that you want for this the same class. And then give any new <a>'s you add later the same class as well..
and then use document.getElementsByClassName document.getElementsByClassName

jQuery Remove Div Based On Content

i would like to remove/hide a li based on the content inside it, is this easy to do?
eg. the code below: if span#type has no content then li.grouping should be removed or hidden.
<li class="grouping"><span class="desc">Options:</span><br /><span id="type"></span></li>

$("li.grouping:has(span#type:empty)").remove()
It would seem to make more sense if type were a class, rather than an id, as there should only be one element with a given id on the page. In that case:
$("li.grouping:has(span.type:empty)").remove()

maybe something like
if ($("span#type").text() == "") {
$("li.grouping").hide();
}