Preventing the user to click a div when its fading out - javascript

I'm trying to create a filtering system where the user can filter for answers using more than one category, but the user can't choose more than one option from each category, so upon clicking an option from any category, that category will fade out ... I have the following little problem, if the user clicks on another option from the same category while it's fading out, he will be able to choose two options from the same category ... How can I disable any click on the category when it's fading out ??
Here is the code I'm using:
HTML:
<div class="search-list" id="program-list">
<span class="search-title">Category 1</span>
<span data="program-list">Option 1</span>
<span data="program-list">Option 2</span>
<span data="program-list">Option 3</span>
<span data="program-list">Option 4</span>
<span data="program-list">Option 5</span>
<span data="program-list">Option 6</span>
</div> <!-- search-list -->
<div class="search-list" id="trainer-list">
<span class="search-title">Category 2</span>
<span data="trainer-list">Option 1</span>
<span data="trainer-list">Option 2</span>
<span data="trainer-list">Option 3</span>
<span data="trainer-list">Option 4</span>
</div> <!-- search-list -->
<div class="search-list" id="issue-date">
<span class="search-title">Category 3</span>
<span data="issue-date">Option 1</span>
<span data="issue-date">Option 2</span>
<span data="issue-date">Option 3</span>
<span data="issue-date">Option 4</span>
<span data="issue-date">Option 5</span>
<span data="issue-date">Option 6</span>
</div> <!-- search-list -->
JQuery:
$('.search-option').click(function(){
var x = $(this).html();
$('#filtered-items').append(x);
$(this).parent('.search-list').fadeTo('slow', 0);
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeTo('slow', 100);
$(this).hide();
});
});
I tried using the following JQuery code but it didn't work:
$('.search-option').click(function(e) {
e.preventDefault();
});
Thanks in advance...

You can set an indicator in your function:
$('.search-option').click(function(){
if(indicator) {
return false
}
...
}
The indicator is something set when the fade starts and clears when it ends. It could be:
a javascript variable,
or - you can check the current opacity,
or - or you can set/clear a class name during the fade.

Simply remove the 'search-option' class from all options in a category once it is clicked.

You can set the click event to null once it has fired:
$('.search-option').click(function(){
$(this).click(null); // set click to do nothing on the clicked element
var x = $(this).html();
$('#filtered-items').append(x);
$(this).parent('.search-list').fadeTo('slow', 0);
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeTo('slow', 100);
$(this).hide();
});
});
This will only turn off the click action on the specifically clicked element so your other filters will continue to work until each of them has been selected once. If you want to re-enable the click function after everything has happened you can save the function, disable it, then re-enable at the end as below:
$('.search-option').click(function(){
var fun = $(this).click;
$(this).click(null); // set click to do nothing on the clicked element
// OTHER CODE
$(this).click(fun);
});

Since this all hinges on the user clicking on an element with the class "search-option", just remove that class from the element and its siblings before starting the fade and then restore it with a callback after the fade runs. That way, nobody can click twice:
$('.search-option').click(function() {
var x = $(this).html();
$('#filtered-items').append(x);
$(this).parent().children().removeClass('search-option');
$(this).parent('.search-list').fadeTo('slow', 0, function() {
$(this).children().addClass('search-option');
});
});

Hey everyone ... I finally solved it, I had to change the whole structure of the function and use the methods "unbind" and "bind" ... Here is the solution if anyone is interested in it:
$('.search-option').click(work);
});
function work(){
var x = $(this).html();
$('#filtered-items').append(x);
$(this).unbind('click');
$(this).siblings('a').unbind('click');
$(this).parent('.search-list').fadeOut('slow');
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeIn('slow');
$('#'+$(this).attr('data')).children('a').bind('click',work );
$(this).remove();
});
};
Now the user can't choose more than one option at each category ....

Try:
$('.search-option').click(function(){
var x = $(this).html();
$('#filtered-items').append(x);
// ADDED LINES
$(this).parent('.search-list').find('a').each(function(){
$(this).click(function(){return false;});
});
// END: ADDED LINES
$(this).parent('.search-list').fadeTo('slow', 0);
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeTo('slow', 100);
$(this).hide();
});
});

Related

How to click a button using html or java script which is declared as div

I am writing a powershell script to login to a website. I want to use the button.click functionality but I can't find the button's id. here is what I found by inspecting it.
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>
Thanks in advance
Given that you aren't sure which one is the one you want, you could just set up an event handler that will trigger for each and then interrogate it for something that can identify it.
// Get all the elements with a class of "v-button-caption" into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".v-button-caption"));
// Loop over the array
buttons.forEach(function(btn){
// Set up a click event handler
btn.addEventListener("click", function(evt){
// Print out some identifying information about the clicked element
console.log("You clicked the element who's parent is: " + evt.target.parentElement.nodeName);
});
});
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>

Get index of an item from a group of identical items

Say I have a group of HTML tags that are identical, e.g.:
<div id="stuff">
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
</div>
I'm attaching an onclick event to the spans like so:
$(".foo").click(function() {
// stuff
});
In my onclick event, I want to get the index of the clicked element, so for example, if I clicked the 3rd span, I want the index to be 3. How would I do that? Normally, I'd iterate over $("#stuff") and compare the items to the clicked item, but in this case, they are identical.
Get the index by using:-
Indexes are zero based relative to its siblings. SO for the 3rd element you will get the index as 2.
$(".foo").click(function() {
alert($(this).index());
}
Read about .index()
Demo
HTML
<div id="stuff">
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
</div>
Jquery
$(document).ready(function(){
$('.foo').click(function(){
var x = $(this).index();
alert(x);
});
});
working Demo http://jsfiddle.net/cse_tushar/Jj72A/
You can write it like this:
$(".foo").click(function(){
alert(jQuery.inArray(this,$(".foo")));
});

recognize which span tag triggered javascript function in div

I have a div html element that has a click event set on it inline (not the way I want to do it but legacy code). See here
<div class="myDiv" onclick="triggerJavascript();" id="myDiv">
<span id="text1">Text 1<span>
<span id="text2">Text 2<span>
<span id="text3">Text 3<span>
<span id="text4">Text 4<span>
<span id="text5">Text 5<span>
What I want to do is recognize which span tag the click event originates from test5, then dont carry out the logic in triggerJavascript function, otherwise complete logic in triggerJavascript.
How can I set this up? I am working with jquery.
You can use event.target in order to access the element. However, in order to get to this element you have to change your onclick attribute a little bit:
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
then you can access event in triggerJavascript:
function triggerJavascript(e){
var element = e.target;
}
See also this answer for a more detailed explanation why event is needed.
Demo ; Demo with text5 check:
<script>function triggerJavascript(e){
if(e.target.id === "text5")
alert("text 5 hit");
e.stopPropagation();
}
</script>
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
<span id="text1">Text 1</span> <!-- closing tags -->
<span id="text2">Text 2</span>
<span id="text3">Text 3</span>
<span id="text4">Text 4</span>
<span id="text5">Text 5</span>
</div>
You can't use onclick="triggerJavascript();", or the event target (the span which was clicked) will not be passed to the event handler.
Since you state you're using jQuery, use this:
$('#myDiv').click(function(evt) {
alert("The target is: " + evt.target.id);
});
HTML
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
<span id="text1">Text 1<span>
<span id="text2">Text 2<span>
<span id="text3">Text 3<span>
<span id="text4">Text 4<span>
<span id="text5">Text 5<span>
</div>
JavaScript
<script type="text/javascript">
function triggerJavascript(event) {
// event.target will catch the clicked element
if (event.target.id !== 'text5') {
// do something
}
}
</script>
DEMO
If you can't change the HTML, you could try something like this:
var triggerJavascript = (function(){
var clicked;
$("#myDiv span").click(function(e){
clicked = $(e.target).attr("id");
});
return function() {
if (clicked == "text5") {
return;
}
//do something cool...
}
})();
Although I guess, there's no guarantee that the jQuery click handler is executed before the actual triggerJavascript logic, so this might not always work correctly.

Finding and Looping Through span Elements Inside (this) JQuery?

im trying to find every <span class ="anime_yellow">.. inside another <span class="toggle">, this is the code:
HTML:
<span class="title_white">Menu 1</span>
<span class="toggle">
this is menu 1 i want to animate
<span id="position" class="anime_yellow">Position</span>
and
<span id ="market" class="anime_yellow">market</span>.
</span>
<br><br>
<span class="title_white">Menu 2</span>
<span class="toggle">
this is menu 2 i want to animate
<span id="simple" class="anime_yellow">Simple</span>
and
<span id ="kool" class="anime_yellow">Kool</span>.
</span>
The Javascript:
$(".toggle").hide();
$(".title_white").click(function() {
$(".toggle").hide();
$(this).next(".toggle").toggle("slow");
// i want to find every span.anime_yellow inside the
// THIS TOGGLE class and get its element ID
// and then run function on the ID
// animate(position) or animate(simple).
});
im trying to use the jquery function .find(), but don't know where to start, this is the jsfiddle for it here: http://jsfiddle.net/wJJBa/2/
Do you mean you want to do this: http://jsfiddle.net/sZUAE/1/
function animate(divID) {
alert(divID);
}
$(".toggle").hide();
$(".title_white").click(function() {
$(".toggle").hide();
var $toggle = $(this).next(".toggle");
$toggle.toggle("slow");
$toggle.find(".anime_yellow").each(function(i, e) {
animate(e.id);
});
});
Edited with your Code Sample:
$(".toggle").hide();
$(".title_white").click(function() {
$(".toggle").hide();
var $toggle = $(this).next(".toggle");
$toggle.toggle("slow");
$toggle.find(".anime_yellow").each(function (i, e) {
animate($(this).attr("id")); //Your ID is HERE
});
});
function animate(divID){
alert(divID);
}

getting the id of an element in jquery onlclick?

this is a very simple example of a html page
<span class ="title" id="title_1">this is</span>
<span class="toggle" id="toggle_1>paragraph 1</span>
<span class ="title" id="title_2">this is</span>
<span class="toggle" id="toggle_2">paragraph 2</span>
im trying to do an onlcick event with the toggle functon, so basically when the user clicks title_1 the toggle_1 will hide and show, and if the user clicks title_2 it will show and hide toggle_2, i hope this makes sense.
(document).ready(function() {
$('.toggle').hide();
$('#title_').click(function() {
$('#toggle_').toggle('slow');
});
});
i started my jquery like this, just don't know what to do from here. thanks
You could:
$('.toggle').hide();
$('.title').click(function() {
$(this).next(".toggle").toggle('slow');
});
Try this
(document).ready(function() {
$('.toggle').hide();
$('.title').click(function() {
$(this).closest('.toggle').toggle('slow');
});
});

Categories