I would like to know if some one can improve my code... Using jQuery I'm trying to apply a class on the element we just click and disable this class on the other elements.
You will se in my code that I'm trying to apply a class on the I just clicked and remove all the class on the others elements.
But for the moment, I'm doing it the "easy and mega long way" as you can see in $("choice1-1").click(function()
Can some help me with a code that could detect all the others ID ?
Here my code for the moment
$(document).ready(function()
{
$('#stick-question-1').mouseenter(function()
{
$('#stick-choices-1').show();
});
$('#stick-choices-1').mouseleave(function()
{
$('#stick-question-1').show();
$('#stick-choices-1').hide();
});
$("choice1-1").click(function()
{
$(this).addClass('hover-etat');
$("#choice1-2").removeClass('hover-etat');
$("#choice1-3").removeClass('hover-etat');
$("#choice1-4").removeClass('hover-etat');
});
});
And my HTML is like this
<div id="stick-choices-1" class="stick-choices">
Under 3'9
4' to 5'2
5'3 to 5'7
5'8 and more
</div>
Just use:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
I've changed your initial selector, so that the click event is triggered by clicking any of the links within the #stick-choices-1 div element, it prevents the default action of clicking the link (assuming that you want the default to be stopped), removes the hover-etat class from any element that has that class, and then applies that class-name to the this element.
It may, though, make sense to restrict the scope in which jQuery searches for elements with the hover-etat class, to those elements within the same #stick-choices-1 element, rather than the whole document:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('#stick-choices-1 .hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
Or:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
It will works fine :
$("#choice1-1").click(function(){
$(".stick-choices a").each(function(){
$(this).removeClass(".hover-etat");
});
$(this).addClass(".hover-etat");
});
This should do it, and registers this handler for all of the links.
$('#stick-choices-1 > a').click(function(ev) {
$(this).addClass('hover-etat').siblings().removeClass('hover-etat');
...
});
Note the use of .siblings() to ensure that only the links that are in the same group are affected, and without sending an unnecessary class change to the clicked link.
This click event will work for all of the choices:
$('.stick-choices a').click(function(e){
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
$("a", $("#stick-choices-1")).click(function(){
$(".hover-etat").removeClass('hover-etat');
$(this).addClass('hover-etat');
});
May be something like this?
$('div.stick-choices a').on('click', function(e) {
e.preventDefault();
$(this).addClass('hover-etat').siblings('a').removeClass('hover-etat');
});
Related
I have a dropdown list, and I want, if click on the select tag to add the class 'active' to the span tag and remove it if click again. But I also want that if I click on the document page it should remove the class 'active' if it added to the span tag. It work.. but I should double click from the document instead of one to remove the active class..
I'm sure that there are a shorter and better code to do this trick but anyway it work a little like that :)
Any help would be appreciated
Here the basic html:
<select class="qty">
<option>1</option>
<option>2</option>
</select>
<span class="arrow"></span>
Jquery :
jQuery(document).ready(function($) {
var arrow = $('.arrow');
$(".qty").on('click', function(e) {
e.stopPropagation();
if(arrow.hasClass('active')) {
arrow.removeClass('active');
}
else {
arrow.addClass('active');
}
});
$(document).on('click', function(e) {
e.stopPropagation();
if(arrow.hasClass('active')) {
arrow.removeClass('active');
}
else {
return false;
}
});
});
JSFIDDLE
I think the issue with the "double-click" is that when you select an option in the dropdown, it remains focused (browser behaviour). This means you need to click twice, not necessarily double click. First you need to click elsewhere to remove focus from it, and only then the body element can listen to your click.
Not sure what you are trying to do, maybe the is not your best option. You could consider making your own dropdown with a DIV or UL LI elements. However, if you do want to patch the browser behaviour, you could force it to blur (unfocus). You would need to change the trigger to change instead of a click, otherwise it would blur it before you make your selection.
jQuery(document).ready(function($) {
var arrow = $('.arrow');
$(".qty").on("change", function(e) {
e.stopPropagation();
arrow.toggleClass("active");
$(this).blur();
});
$(document).on('click', function(e) {
arrow.removeClass('active');
});
});
Also, note that you can use .toggleClass instead of you if statements and in your case you wouldn't need to check if the .active class is already there, you can simply remove it.
Here's an updated JSFiddle
What I was trying to code was the following:
Find every div of given class
If one of them happens to be higher than my maximum, make it 75px high and hide overflow, and add a "read more link" after this specific oversized element.
Make the link work...
I succeeded up to no. 2. However, the link on click expands all the content in all divs starting from the one it should expand downwards.
What am I doing wrong?
Thanks in advance!
$(function() {
$('.text').each(function() {
var content = $(this).find('.text_content');
if(content.outerHeight() >75) {
content.css('height','75px').css('overflow','hidden');
content.after('<div class="text_readmore">read more</div>');
$('.text_readmore').each(function() {
$(this).click(function() {
content.css('height','').css('overflow','');
});
});
}
});
});
You're using the content variable inside your .click handler, which isn't point to what you want. You can also refactor your code so that .click handler is defined once for all such text_readmore links, for efficiency.
Try something like this:
$(function() {
$('.text').each(function() {
var content = $(this).find('.text_content');
if(content.outerHeight() >75) {
content.css('height','75px').css('overflow','hidden');
content.after('<div class="text_readmore">read more</div>');
}
});
});
$(document).on('click', '.text_readmore', function() { // event delegation
$(this).closest('.text_content').css('height','').css('overflow','');
});
If you're using a version of jQuery before 1.7 (which is when .on was added), use .delegate instead:
$(document).delegate('.text_readmore', 'click', function() { // event delegation
$(this).closest('.text_content').css('height','').css('overflow','');
});
So I have a parent div with different elements inside. Right now I have it set up so when that parent div is clicked, it applies a "selected" css attribute (just highlights it). However, there is an anchor tag inside this div and I don't want the div to highlight if the anchor is clicked.
My code to highlight the div
$(document).on("click",".playlist-row",function() {
var selected = $(this);
highlight(selected);
});
Ideally, I want it to behave like this: (just pseudo code)
$(document).on("click",".playlist-row",function() {
var selected = $(this);
if ($(".childElement) is not the part clicked) {
selectSongInPlaylist(selected);
}
});
Any elegant ways to get something like this to work?
You could use stopPropogation() as in http://api.jquery.com/event.stopPropagation/ on the child elements like $('.childElement').click(function(e){
e.stopPropagation();
}); to prevent the click event propagating to the parent element. You could also check the event.target property as described here http://api.jquery.com/event.target/
you need to prevent the click event bubbling up to the container
capture the event and use event.stopPropagation
$(document).on('click', "a", function(event){
event.stopPropagation();
});
I will assume that I understood your question, so here's what I would probably do:
$(document).on("click", ".playlist-row", function(e) {
if (!$(e.currentTarget).is("a")) {
selectSongInPlaylist($(this));
}
}
In the below markup, the #enable button will add a class to the #show div. This class has a method attached to it that fades in/out the #hidden span.
However, even though the class is added to the #show div, the method attached to the class isn't triggered.
HTML
<input type='button' id='enable' value='Enable' />
<div id='show'>
Testing.. <span id='hidden'>Testing, 1, 2, 3.</span>
</div>
JS
$(function() {
// Adds .testing class after the button is clicked. however..
$('#enable').click(function() {
$('#show').addClass('testing')
});
// It will not trigger after .testing class has been added to DIV?
$('.testing').hover(function() {
$('#hidden').fadeIn();
}, function() {
$('#hidden').fadeOut();
});
});
Fiddle to work with: http://jsfiddle.net/jS3nM/
It seems I am missing something conceptually. What is the correct way to handle this?
jQuery does not work like CSS. When you do, $("selector"), it will return a list of elements in the document that match that selector right now.
You will then operate on those elements with jQuery methods. There is no magic like "class-targeted method" going on.
You can find add a event listener to document:
$(document).on({
mouseenter: function() {
$('#hidden').fadeIn();
},
mouseleave: function() {
$('#hidden').fadeOut();
}
}, ".testing");
document is always found and always exists, and the event listener is added to that. The selector at the end filters out what elements are qualified for the event.
Because when you bind the hover handler there is no element with class of testing in the document, you should delegate the event, you can use the on method, try the following"
$(document).on('mouseenter', '.testing', function(e) {
$('#hidden').fadeIn();
});
$(document).on('mouseleave', '.testing', function(e) {
$('#hidden').fadeOut();
});
I want to hide and show some form in my page.
For each form theres a link, and i want that, when i click on this link,
it hide and show the nearest form of the link.
My code looks like this :
$$('.flagLink').each(function(s){
$(s).observe('click', function(event) {
// here i want to hide and show the nearest form
});
});
I've tried this :
$$('.flagLink').each(function(s){
$(s).observe('click', function(event) {
$(s).next('form').toggle();
});
});
It works but, i would like to be more precise like :
$$('.flagLink').each(function(s){
$(s).observe('click', function(event) {
$(s).next('.flagForm').toggle();
});
});
but the .flagForm selector doesnt work.
My code looks like this :
flag
First I hide all the form in the page :
$$('.flagForm').each(function(s){
$(s).hide();
});
Then i add the onclick event on them:
$$('.flagLink').each(function(s){
$(s).observe('click', function(event) {
$(s).next('.flagForm').toggle();
});
});
But with the .flagForm selector, it does not work
To avoid hazardous DOM traversal, I recommend using element ids to bind a form to its link, like so:
<form id="myform1">...</form>
...
<a id="link_myform1" class="flagLink" href="#">...</a>
Then you can match the id of your A element against a regexp /link_(.*)/ to get the id of your form:
$$('.flagLink').invoke('observe', 'click', function(event) {
if(event.element().id.match(/link_(.*)/)) $(RegExp.$1).toggle();
});
If you can't use this solution, then you have to be more specific about what you mean by "nearest". If the link and the form always have a common ancestor, then you can use a css selector to find the form wherever it is. Say the link and the form always have a common ancestor that is the grand-parent of the link, you can do:
$$('.flagLink').invoke('observe', 'click', function(event) {
var form = event.element().up(2).select('form').first();
if(form) form.toggle();
});