Develop Reference

Disable OnClick Event Until Another One Is Triggered First

I have 6 divs (.selector) set to do (onclick):
Show all tables
Show Nº1, Hide rest
Show Nº2, Hide rest
...
Show Nº5, Hide rest
They also toggle a class "activated" that changes the background color.
What I'm trying to do is that once I click on "Show Nº1, Hide rest" disable the click option (On this div) until I click in another one first like "Show all tables" or "Show Nº2, Hide rest".
Something like the "once function" but that resets as soon as another div is activated. Any way to do this?
Here is my CSS
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
Here is my JavaScript
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});

If you change toggleClass to addClass in your click function. Then, more than 1 click in your .activated will have no effect (as the click is disabled):
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).addClass('activated');
});
Or you can check if the clicked .selector has .activated class like:
$('.selector').on('click', function(event) {
if($(this).is('.activated')) return;
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});

There's two things to do:
Wrap the JavaScript inside a function
Unbind the click event everytime you click on something
Here's how:
function clickEvent(elements){
elements.bind('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
$('.selector').unbind('click');
clickEvent($('.selector').not(this));
});
}
clickEvent($('.selector'));
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
color: #FFF; //for display purposes
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="selector">1</div><div class="selector">2</div><div class="selector">3</div><div class="selector">4</div><div class="selector">5</div><div class="selector">6</div>

You should be able to do
if($(this).hasClass('activated'))
return;
To skip it if this was allready activated.

How to set focus on DIV when the lightbox_me trigger?

I have a div with only one focusable element button (close button), when the lightbox opens focus should be on div. when i press tab focus should goto 'close' button.
As per assertive technology(blind users) close button should be at the bottom of the DOM,that is one reason DIV should be focus when lightbox triggers.
I have set
<div id="div-id" role="dialog" tabindex="-1" aria-labelledby="operations-help">
and in jQuery set :
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
$('#div-id').focus();
}
});
but focus is setting on close button only, is there any way i can set focus on DIV.
Thanks

A div can't take focus afaik. If the div has a button you could instead call
$('#div-id button').focus();
Or if I've misunderstood and the div is the button can changing the div to a button or submit input should allow focusing.

Use
window.location.hash = '#div-id';
This will scroll to the element, essentially focusing it.
So finally,
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
window.location.hash = '#div-id';
}
});
I guess this should work.

A div is not a focusable element.
A possible solution is to set a button/link with dimensions 1px by 1px somewhere on the corner of the div and set focus on it.
aria-labelledby could be then set on that button instead of the entire div :)
Do let me know if that works. If using a link, make sure you set href as #.
You could also, add a button and hide it. Not with display: none, but with z-index, so that it remains tabbable.

Hey you cannot focus div element but you can do a little work around and put after or inside of this div element that you can. Here is example:
var div = document.getElementById("test2");
div.addEventListener("focus", function(){alert("it's a test")});
#test{
width:200px;
height:200px;
background-color:#0CF;
z-index:1;
}
#test2{
position:absolute;
z-index:0;
width:100;
height:100%;
opacity:0;
cursor:default;
}
<div id="test"><textarea id="test2"></textarea>sdfsdf</div>

I am able to fix by setting property :focusPopover : false , this solved my problem.
$('#div-id').lightbox_me({
destroyOnClose: true,
focusPopover : false,
onLoad: function() {
$('#div-id').focus();
}
});

Change your jQuery to
$('#div-id').lightbox_me({
destroyOnClose: true,
onLoad: function() {
$('#div-id').attr('tabindex', 1).focus();
$('.close').attr('tabindex',2);
}
});
UPDATE
$('#div-id').lightbox_me({
destroyOnClose: true,
centered: true,
onLoad: function() {
$('#div-id').find('a:first').parent().focus()
}
});
here is the fully functional working demo https://jsfiddle.net/jfy5n2nf/1/
NOTE: on pressing tab key focus shifts to close button and a red border appears

Try it with HTML5 contenteditable
$('#focusbtn').click(function(){
$('#div-id').focus();
});
$('#div-id').on('focus', function(){
alert('I am focusing in div!');
});
$('#div-id').keypress(function(e){
e.preventDefault();
});
#div-id{
pointer-events: none;
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-id" role="dialog" contenteditable="true">
I am the div. Please focus on me
</div>
<BR/>
<button id="focusbtn">Focus</button>

you can try,
position:fixed;
it will always be in the same position even when scrolling,
here is my code, it will be always on the center of the screen.
.example
{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:800px;
height:450px;
background:#ffffff;
z-index:51;
padding:20px 10px 10px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

Change DIV display value using Javascript/Jquery function

Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.

you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});

Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle

Problems with .addClass().removeClass()

I spent a few hours last night trying to figure out what was going wrong here, but was unsuccessful.
I have a div that when clicked will expand and create a close button that will return the div to its original state. I am doing this by adding and remove classes. The issue I am having is that when the original div (.talent) is clicked it does change to fill the containing div. However when the button (.btn) is clicked the div does not return to its original state.
JS -
$(".talents .talent").click(function(){
if ($(this).hasClass("talent")) {
$(this)
.removeClass("talent")
.addClass("tree")
.append("<div class=\"close btn\">X</div>");
$(".tree .btn").click(function(){
console.debug("WORKING!?!?!?");
$(".tree").addClass("talent");
$(".tree").removeClass("tree");
$(".talents .talent").show();
$(this).remove();
});
$(".talents .talent").hide();
}
});
CSS -
.talents{
border:1px solid white;
border-radius:10px;
overflow:hidden;
height:165px;
margin:10px;
}
.talents .talent{
text-align:center;
font-size:2.4em;
height: 50px;
width: 50px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
display: inline-block;
border: 3px solid white;
border-radius: 15px;
margin: 5px 7px 5px 7px;
}
.tree{
position:relative;
width:100%;
height:100%;
}

$(".talents .talent").click(function(){
if ($(this).hasClass("talent")) {
THE ABOVE CODE WILL ALWAYS EVALUATE TO TRUE
if you want this to work better, whatever element has the class of talent should also have another class, and work similiar like this(I would say use .tree as .other_class but can't be 100% certain without seeing html):
$(".talents .other_class").click(function(){
if ($(this).hasClass("talent")) {
Also, it would be a better practice to keep the btn click handler outside the first click handler.

Events are bound to the elements in question, not to a specific class. You need to delegate the events in such cases as the classes are being added dynamically.
In your case if you put a debug point you can see the issue properly. Th event bubbles up to the parent which at that time is .talent . So first it works as expected when clicked on close, but then fires the click event on .talent again which places the tree class on that element again. Event delegation should solve this problem.
$(".talents").on('click', ".talent", function () {
$(this)
.removeClass("talent")
.addClass("tree")
.append("<div class=\"close btn\">X</div>");
$(".talents .talent").hide();
});
$(".talents").on('click', ".tree .btn", function () {
console.debug("WORKING!?!?!?");
$(".tree").addClass("talent");
$(".tree").removeClass("tree");
$(".talents .talent").show();
$(this).remove();
});
Check Fixed Fiddle

Haven't tested but another problem may be because the class .tree is appended dynamically. Also try using on like:
$(document).click('.tree .btn',function(){
console.debug("WORKING!?!?!?");
$(".tree").addClass("talent");
$(".tree").removeClass("tree");
$(".talents .talent").show();
$(this).remove();
});

First remove the class and then try to add a class and see if it is working.
$(".tree").removeClass("tree");
$(".tree").addClass("talent");

Enable hover when the checkbox is not selected & disable it once the checkbox is selected

I'm trying to enable hover (adding '.add_link_twitter_hover' class) when the checkbox is not selected & disable it (removing the '.add_link_twitter_hover' class) once the checkbox is selected the same way Pinterest does it for Twitter/Facebook checkboxes when a user adds a pin:
I tried this, but it doesn't disable hover (doesn't remove '.add_link_twitter_hover' class) once mouse pointer is away:
var hoverTwitter = "add_link_twitter_hover";
$(postTwitter + " input").click(function(e) {
$(this).parent().removeClass(hoverTwitter);
$(this).parent().toggleClass(activePostTwitter);
});
$("label.add_link_twitter").hover(function(e) {
if($("input.publish_to_twitter").is(":checked")) {
$(this).removeClass(hoverTwitter);
return;
}
$(this).addClass(hoverTwitter);
});
Any idea how to enable hover when the checkbox is not selected & disable it once the checkbox is selected? Thanks in advance!
Here's the jQuery:
var postTwitter = ".add_link_twitter";
var activePostTwitter = "active";
$(postTwitter + " input").click(function(e) {
$(this).parent().toggleClass(activePostTwitter);
});
Here's the html:
<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>
Here's the css:
.add_link_twitter{
position:absolute;
left:15px;
bottom:16px;
color: #a19486;
border: 2px solid transparent;
border-color: #F0EDE8;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}
.active {
border-color: #468BD0;
color: #468BD0;
background-color: whiteSmoke;
}
.add_link_twitter_hover
{
color: #A19486;
border: 2px solid transparent;
border-color: #C2B1A2;
border-radius: 4px;
background-color: white;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}

Try this:
$("label.add_link_twitter").hover(function(e) {
if(!$("input.publish_to_twitter").is(":checked"))
$(this).addClass(hoverTwitter);
}, function() {
$(this).removeClass(hoverTwitter);
});
The usual way to use the .hover() method is to supply two functions: the first is called when the mouse moves over the element in question, and the second is called when the mouse moves out.
So what I've done above is in the first function (mouseenter) I've added your class if the checkbox is not checked. In the second function (mouseleave) I just remove the class.

This can be done without any javascript at all. if you expect to always have the class "publish_to_twitter", just separate the two states with pseudoclasses:
.publish_to_twitter:hover{
width:50px;
}
input.publish_to_twitter:checked{
width:500px;
}
I added the input element in the selector to ensure that the checked style took precedence. Just make sure that for every style you set with :hover, you have an equivalent style in :checked.