Disable anchor with onclick - javascript

I have a problem to disable my anchor when its being pressed.
HTML:
<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'>
<i class='polygon_mark'></i>
</a>
<a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'>
<i class='square_mark'></i>
</a>
jQuery
$('.square_mark').click(function () {
if(!$(this).hasClass('active')) {
$(this).addClass('active');
$('.polygon_mark').off('click', disabler);
} else {
$(this).removeClass('active');
$('.polygon_mark').on('click', disabler);
}
});
$('.polygon_mark').click(function () {
if(!$(this).hasClass('active')) {
$(this).addClass('active');
$('.square_mark').off('click', disabler);
} else {
$(this).removeClass('active');
$('.square_mark').on('click', disabler);
}
});
});
Function:
disabler: function(event) {
event.preventDefault();
return false;
},
The functionality to change classes are working fine, but what I wanted to add into this, os when anchor #1 is being pressed, this disables the other anchor, and when I press it once again, I'd like it to reenable the anchor, and also the other way around but for anchor #2.
I tried doing something like this, but I cannot get it to work, not fully understanding it either.

Do this and add a disable class to your css.
$('.square_mark').click(function () {
$(this).toggleClass('active');
$('.polygon_mark').toggleClass("disabled");
});
$('.polygon_mark').click(function () {
$(this).toggleClass('active');
$('.square_mark').toggleClass("disabled");
});
this should do the tric.
.disabled {
pointer-events: none;
cursor: default;
}
Edit: example on jsfiddle: http://jsfiddle.net/uKCYN/
And if you need to check for the active class to do something else you can code it like this:
$('.square_mark').click(function () {
if(!$(this).hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
$('.polygon_mark').toggleClass("disabled");
});
$('.polygon_mark').click(function () {
if(!$(this).hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
$('.square_mark').toggleClass("disabled");
});
and add your additional stuff into the if clauses.

Just modify the handler function like this and try again:
// handler function
function disabler(event) {
event.preventDefault();
console.log('item anchor clicked');
}

Related

How to Add and remove attribute if found specific class

I have some list items and if I click any list item it become selected by adding class .selected
If I click outside of the list item all list item become unselected. FIDDLE
I also have one button initially disabled. I wanted to make the button active by removing "disabled" attribute when list items are selected.
Again if I click outside all list item should be unselected and button become disable again.
How I can do this? Any help will be appreciated.
JS
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
}
});
All you're missing is how to enable/disable your button and that is
$('.load-table').prop('disabled',false); // or true to disable
So just plug this in as required
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
http://jsfiddle.net/has9L9Lh/22/
Use .hasClass() instead and set else condition and to disable and enable the button use .prop()
$(".list-group-item").click(function(e) {
e.stopPropagation();
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).hasClass("list-group")) {
$('.list-group-item').removeClass('selected');
}
else{
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
Demo
Use attr() property of jquery.
$(".list-group-item").click(function () {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
if ($("button").attr("disabled") === "disabled") {
$("button").attr("disabled", false);
}
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$("button").attr("disabled", true);
}
});
Above code should work. When the item is clicked then check if the button is still disabled. If it is then enable the button.
Same goes when the user click outside the list.
Fiddle

Simplify this jQuery using .hasClass and .bind?

I'm wondering if there's a way to simplify this code.
Basically, #griffyindor has the 'active' class by default when the page loads. When it has the 'active' class, I want all the other houses (slytherin, ravenclaw, and hufflepuff) to show. However, at some point it may lose its 'active' class when I click on something else. But when I click back to it, I want the initial behavior again.
Is there a way to simplify what's below to check when gryffindor has the 'active' class OR when gryffindor is clicked on (so that it gets the 'active' class)?
$(function() {
var gryffindor = $('#gryffindor');
if (gryffindor.hasClass('active')) {
console.log('show all the houses');
$('#slytherin, #ravenclaw, #hufflepuff').show();
}
gryffindor.bind('click', function() {
if (gryffindor.hasClass('active')) {
console.log('all is active');
$('#slytherin, #ravenclaw, #hufflepuff').show();
}
});
});
How about:
$(function() {
$('#gryffindor').on('click', function(e) {
this.toggleClass('active');
if (this.hasClass('active'); {
$('#slytherin, #ravenclaw, #hufflepuff').show();
} /*else {
$('#slytherin, #ravenclaw, #hufflepuff').hide();
}*/ //Not sure if this is part of what you want
}
});
$(function() {
var $gryffindor = $('#gryffindor');
$('#slytherin, #ravenclaw, #hufflepuff').hide();
$gryffindor.on('click', function(e) {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('#slytherin, #ravenclaw, #hufflepuff').show();
} else {
$('#slytherin, #ravenclaw, #hufflepuff').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="gryffindor">Griffindor</button>
<div id="slytherin">slytherin</div>
<div id="ravenclaw">ravenclaw</div>
<div id="hufflepuff">hufflepuff</div>
Try this:
var houses = $("#houses li");
$(document).on('click', '#houses li', function(){
var activate_house = this;
$(houses).each(function (index) {
var house = this
$(house).removeClass('active');
$(house).removeClass('show');
});
$(activate_house).addClass('active');
showHouses();
});
function showHouses(){
$(houses).each(function (index) {
if(!$(this).hasClass('active')){
$(this).addClass('show');
}
});
}
showHouses();
.show{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="houses">
<li class="active" id="gryffindor">gryffindor</li>
<li id="slytherin">slytherin</li>
<li id="ravenclaw">ravenclaw</li>
<li id="hufflepuff">hufflepuff</li>
</ul>
not minify your code but simplify the reading and adds semantic, see JSFIDDLE

effective dropdown login box in jQuery

First of all I found this Simple and effective dropdown login box
I upgrate sing up box.
Now I have Login and Sing up dropdown box, but I have problem
When I click on Login (activate) and after this I click on Sing up (activate second box), the login box don't up (not deactivated), now 2 box's is opened (activated)
I need if activated one of them, the second deactivated.
Here is the jQuery code (copy past)
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active'))
$(this).find('span').html('▲')
else
$(this).find('span').html('▼')
});
$('#registr-trigger').click(function(){
$(this).next('#registr-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active'))
$(this).find('span').html('▲')
else
$(this).find('span').html('▼')
});
});
Thanks and sorry for my english
Here is example how it work now http://jsfiddle.net/ZcVCK/2/
Here Fiddle
/*----------------------------------------------------------------------------*/
$('#login-trigger').click(function () {
$('#registr-content').slideUp();
if ($('#registr-content').hasClass('active')) {
$('#registr-content').find('span').html('▲');
} else {
$('#registr-content').find('span').html('▼');
}
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$(this).find('span').html('▲');
} else {
$(this).find('span').html('▼');
}
});
/*----------------------------------------------------------------------------*/
$('#registr-trigger').click(function () {
if ($('#login-content').hasClass('active')) {
$('#login-content').find('span').html('▲');
} else {
$('#login-content').find('span').html('▼');
}
$('#login-content').slideUp();
$(this).next('#registr-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$(this).find('span').html('▲');
} else {
$(this).find('span').html('▼');
}
});
You need to check whether other box is open.
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if($('#registr-trigger').hasClass('active')){
$('#registr-trigger').slideToggle();
$('#registr-trigger').toggleClass('active');
}});
Similar code for #registr-trigger
Try this:
$(document).ready(function(){
$('#login-trigger').click(function(){
$('#registr-trigger:visible').hide(); // <<<- new code
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
});
/*----------------------------------------------------------------------------*/
$('#registr-trigger').click(function(){
$('#login-trigger:visible').hide(); // <<<- new code
$(this).next('#registr-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
});
});

expand and collapse an item and remove static text from javascript

I have the following java script code to expand and collapse.
$(function () {
$(document).on('click', '.expandcollapse', function(e) {
$('.collapse').each(function(index) {
$(this).collapse("toggle");
});
if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All ") {
$(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
}
else {
$(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
}
});
});
It works fine here:
http://jsfiddle.net/HqXMN/10/
I need to remove the static text (Expand, Collapse) and somehow place them in my html.
Is there a way to hide the text and icon plus or minus sign based on the action using the toggleClass function.
Here is what I tried so far but doesnt work at all.
$(function () {
$(document).on('click', '.expandcollapse', function(e) {
$(this).removeClass('icon-white icon-minus-sign');
$('.collapse').each(function(index) {
$(this).collapse("toggle");
});
if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i>") {
$(this).removeClass('icon-white icon-plus-sign');
$(this).addClass('icon-white icon-minus-sign');
//$(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
}
else {
$(this).addClass('icon-white icon-plus-sign');
$(this).removeClass('icon-white icon-minus-sign');
}
});
});
Here is my html (I am using haml syntax)
%i.icon-white.icon-plus-sign
Expand All
%i.icon-white.icon-minus-sign
Collapse All
Update: Here is something more I tried but couldnt make it work.
http://jsfiddle.net/HqXMN/11/
First of all, I suggest that you should use jQuery .is() ( http://api.jquery.com/is/ ) for your if statements, that way your code will be more flexible. Then, I suppose the toggleClass will work for you too. I didn't do much, but here is a start:
JS:
$(function () {
$(document).on('click', '.expandcollapse', function (e) {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
if ($(this).is('.icon.white-icon .iconplus-sign')) {
$(this).toggleClass('is-collapsed');
} else {
$(this).toggleClass('is-collapsed');
}
});
});
CSS:
.expandcollapse .icon-plus-sign {
display:block;
}
.expandcollapse .icon-minus-sign {
display:none;
}
.is-collapsed .icon-plus-sign {
display:none;
}
.is-collapsed .icon-minus-sign {
display:block;
}
and demo here: http://jsfiddle.net/pavloschris/HqXMN/13/
I hope it helps.

JQuery Toggle Issue, Requires Two Clicks

I'm Not too Fluent in Javascript but I managed to alter this code and make it toggle between the Play button and the Pause Button for a song... it goes like so:
$(function()
{
$("#plbutton").toggle(function()
{
$("#playit").hide();
$("#pauseit").show();
},
function()
{
});
});
$(function()
{
$("#pabutton").toggle(function()
{
$("#pauseit").hide();
$("#playit").show();
},
function()
{
});
});
This is the HTML:
<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit" ><img src="images/pausebutton.png" /></span>
and this is the css for the pause span:
#pauseit{
display: none;}
Now When I Click the Play Button It switches to the Pause Button, then When I Click the Pause Button it Switches to the Play but after that It requires TWO Clicks in order to work... It'll pause/play the song but the image wont toggle till you click again...
I tried looking around but due to my minimal knowledge of java and jquery I wasn't able to apply the fixes to my code...
Try this:
$(document).ready(function() {
$("#plbutton").on("click", function(e)
{
e.preventDefault();
$("#playit").hide();
$("#pauseit").show();
});
$("#pabutton").on("click", function(e)
{
e.preventDefault();
$("#pauseit").hide();
$("#playit").show();
});
});
If you use links, add e.preventDefault();
if not this should work
<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit"><img src="images/pausebutton.png" /></span>
$(document).ready(function() {
$("#playit").on("click", function(e) {
$("#$WeFuckinBall").play()
$(this).hide();
$("#pauseit").show();
});
$("#pauseit").on("click", function(e) {
$("#WeFuckinBall").pause()
$(this).hide();
$("#playit").show();
});
});
You can even leave out the span
the simplest code i can think of is
HTML:
<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit" ><img src="images/pausebutton.png" /></span>
JQUERY:
var elems = $("#playit,#pauseit")
elems.on("click", function(){
elems.toggle();
if($(this).attr('id') == 'playit'){
$('#WeFuckinBall').play();
}else{
$('#WeFuckinBall').pause();
}
});
You dont need toggle, simply using .click() will solve your problem:
$(function()
{
$("#plbutton").click(function()
{
$("#playit").hide();
$("#pauseit").show();
});
$("#pabutton").click(function()
{
$("#pauseit").hide();
$("#playit").show();
}
});

Categories

Resources