Develop Reference

Changing Bootstrap panel CSS class for "active" panel (clicked/focused)

I have a page with multiple Bootstrap panels, and I want to make it so that only the "active" panel has the panel-primary class (so, highlighted, in a sense). The definition of "active" in this case is that the user has clicked anywhere inside a panel or changed focus with keyboard or something.
So, I started with this:
function highlightActivePanel($activePanel) {
$('.panel-primary').toggleClass('panel-primary panel-default');
$activePanel.toggleClass('panel-default panel-primary');
}
$(document).on('click', '.panel-default', function () {
highlightActivePanel($(this));
});
The trouble is, I have a table with jquery DataTables plugin inside the panels. So, if I register the click event, it generally works, but not when you click on of the DataTables paging number buttons at the bottom of the panel for some reason. The click even doesn't fire. Probably due to DT's own click events, I'm guessing.
So, I then tried the focus event:
$(document).on('focus', '.panel-default', function () {
highlightActivePanel($(this));
});
... and that works better with clicking on DataTables buttons and fields, but doesn't work if the user simply clicks on the text (or in a table cell) inside a panel.
Finally, if I just simply leave both event listeners registered, it seems to work, but I'm wondering if this is smart, or if there is a better/cleaner way of doing this?
$(document).on('click', '.panel-default', function () {
highlightActivePanel($(this));
});
$(document).on('focus', '.panel-default', function () {
highlightActivePanel($(this));
});
Here's a JsFiddle that better illustrates what I'm talking about.
Edit: Just realized I can easily combine the two events like this:
$(document).on('click focus', '.panel-default', function () {
highlightActivePanel($(this));
});
But if there is still a better way to do this, let me know.

Clicking on the DataTables paging numbers triggers page.dt, so you could do click page.dt in place of click focus to avoid potentially losing focus to something else on the page (though you could also do that by using a more specific selector).

Onclick should close other opened element

I do have 2 elements in my page which i want to show them when user clicks on 2 different buttons.
Here is my code
$('.social-toggle').on('click', function() {
$(this).next().toggleClass('open-menu');
});
$('.social-toggle1').on('click', function() {
$(this).next().toggleClass('open-menu');
});
When user clicks on the first button, the first element will be show up, but i want either user clicks on the second button or one of the links in the opened-menu the first opened menu be closed.
JSFIDDLE

You do not need to write two different event here. Use comma seprated multiple selector for targetting both button:
$('.social-toggle,.social-toggle1').on('click', function() {
$('.social-networks').not($(this).next()).removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
Working Demo

Here is the code what you want. You didnt removed the class which was applied previously.
$('.social-toggle').on('click', function() {
$('.social-toggle1').next().removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
$('.social-toggle1').on('click', function() {
$('.social-toggle').next().removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});

Repeated execution of a jquery statement

Below, mentioned is a jquery code, where 'box1' is a div id and 'colors' is a class inside the modal dialog. However, it results in an unexpected behavior: When I click '.colors' for the first time, an alert box appears, but on clicking it the next time, two alert boxes appear(one after the other). That is, clicking for the nth time will result into 'n' alert boxes, one after another!
Please explain the analogous behavior and a possible solution.
$('#box1').click( function() {
window.location.href='#openModal';
$('.colors').click( function() {
alert('xyz');
});
});

You are assigning a new click event to .colors on every click of #box. You need to make use of .one():
$('#box1').one('click',function() {
window.location.href='#openModal';
$('.colors').on('click',function() {
alert('xyz');
});
});
This will only assign the click handler for .colors once. If you want the ability to click #box1 multiple times, then you need to combine your assignment with .off():
$('#box1').on('click',function() {
window.location.href='#openModal';
$('.colors').off('click').on('click',function() {
alert('xyz');
});
});
This will do allow multiple clicks of #box1 with only one click handler for .colors, because each time it unassigns and reassigns it. I don't recommend this, though, as its a lot of extra work for the DOM to do.

Yeah, you're re-binding click to the .colors class every time #box is clicked. You could fix it by unbinding the previous click events before rebinding. Like so:
$('#box1').click( function() {
window.location.href='#openModal';
$('.colors').off('click').on('click', function() {
alert('xyz');
});
});

Dont' allow to click button/icon more than once

I am creating a whack-a-mole style game where a sum is given and numbers animate from the bottom of the container to the top. The aim of the game is to click the correct answer to the sum and collect as many correct answers as possible.
My problem is that the user can click the numbers and other icons multiple times, causing it to crash. Is there a way to overcome this?
I have tried this jQuery one function
$(".character").one("click", function() {
});
But the icons re-appear so I need them to be clickable again.
I have also tried to set a time out but cannot seem to get it working. Can someone point e in the right direction.
setTimeout(function() {
$(".character").one("click", function() {
});
}, 3000);
Fiddle: http://jsfiddle.net/GvNB8/

Your main problem is that you are not interacting with the characters when re-showing them. In that case the only way to prevent the user from clicking is building in a method to prevent clicking twice in quick succession with a timeout.
That method would look something like this:
function clickThrottled(fn) {
var click = true;
return function () {
if(click) {
click = false;
fn.apply(this, arguments);
setTimeout(function () { click = true; }, 1000);
}
};
}
You then use the function like this:
$('.character').click(clickThrottled(function () {
// do your one time magic.
}));
What I am using here is JavaScript closures. The function you pass to the click event handler will only call the underlying function once, then ignore all calls for 1 second and then re-enable itself.
I'd still suggest you go with a normal method of just re-enabling the elements when they are redrawn onto the screen - but the above also works..

Why not just add an information indicating that this item has been clicked :
$(".character").click(function(){
if(!$(this).data("hasBeenClicked")) {
$(this).data("hasBeenClicked", true);
// the rest of your logic ...
}
});

toggling between two classes jQuery = works but extra click

Sort
$(".sort").click(function (event) {
$(this).toggle(function() {
$(this).toggleClass("sortUp","sortDown");
}, function() {
$(this).toggleClass("sortDown","sortUp");
});
});
it works but I need to click once before it works.
so -
click (nothing happens), click (sortUP), click (sortDown)
I would like to remove first click.
Thank you community for the help !

Firstly, you're using toggleClass incorrectly. You appear to want to toggle sortDown and sortUp on each click. That's done with toggleClass("sortDown sortUp").
Secondly, you need your class .sort to either have sortUp or sortDown set in its class property when you load the page. e.g. <a href="#" class="sort sortDown">. This makes sure you can reason about your code (i.e. it's always true that exactly one of sortUp, sortDown are set on your div).
Thirdly, $(this).click(function() { /* code */ }) means "when somebody clicks, do /*code*/". You've wrapped your
$(this).click(function() { $(this).toggleClass("sortUp sortDown"); })
which sets up the click behaviour, in a $(".sort").click(function () { which means you are requiring an initial click on "sort" just to start the behaviour.
So the correct version is:
Sort
$(document).ready(function () {
$(".sort").click(function() {
$(this).toggleClass("sortUp sortDown");
});
});

if you dont' want to begin with a sortUp or sortDown class, do this:
Sort
$(".sort").click(function (event) {
if($(this).hasClass("sortUp") || $(this).hasClass("sortDown")){
$(this).toggleClass("sortUp sortDown");
}else{
$(this).addClass("sortUp");
}
});

It looks like you are adding the click events on the first click, also if you want to switch between sortUp and sortDown you can simply specify them both. As long as the element starts with one or the other (not both and not neither), it will swap them each time.
$(".sort").click(function() {
$(this).toggleClass('sortUp sortDown');
});
You can see this running on JSFiddle.