I'm wondering how i can fadeout a class element in jQuery. I've got a list of div's and all of them got the same class name. So, if i click on of them, all fades out. How can i make it so just the one I'm clicking is fading out?
$(document).ready(function() {
$('.imageWrap').click(function() {
$(this).fadeOut();
}
});
I've been checking the jquery docs but i can't find any solutions too this. I know it's a basic question but i hope someone can help me out. Thanks!
This will work as you expect it but you have a typo:
$(document).ready(function() {
$('.imageWrap').click(function() {
$(this).fadeOut();
}); // < - missing parathesis and semicolon
});
jsFiddle: http://jsfiddle.net/NTtqx/
That code you have above should be fading just the image you click on out, he $(this) part selects just the image that has been clicked on and then fades it out, your issue is the typo, you've got a missing ):
$('.imageWrap').click(function() {
$(this).fadeOut();
}) //ADD THE CLOSING BRACKET HERE
I've pretty much copied your code line for line in this JSFiddle and as you can see when you click on one div just that div fades out: http://jsfiddle.net/SMtuG/, so it's clearly just the typo causing this issue.
You forgot to close 'click' event with '});':
$(document).ready(function() {
$('.imageWrap').click(function() {
$(this).fadeOut();
});
});
Related
I have an issue with jQuery's .hover() method. I have a few paragraphs inside a tags which I use as a menubar. What I intend to do is, if I hover one of these menulinks, a new element gets displayed over the menulink which contains links to submenu links. The problem is, that the .hover() stops working immediately.
I did a simple FIDDLE to show my problem.
Any help is much appreciated.
Edit: Worth to say is, that I also want the sublinks to be clicked, so the hover must be still working then. It only stops when I leave the red div.
What about this?
$('p').hover(function() { $('div').fadeIn(); }, function() { });
$('div').hover(function() { }, function() { $('div').fadeOut(); });
Demo fiddle: http://jsfiddle.net/lparcerisa/1urs0wfr/2/
I have the following code that hides one text box and shows another. When the next one shows, I need the cursor to be on it, so I call .focus() on it. However, even though I have the call to .focus() as the second parameter, it still isn't focusing. Any ideas?
$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show(0, function() {
$(this).focus();
});
});
});
Sorry for the trouble everybody. It turns out that after messing with it some more, my DOM traversal wasn't quite right. I removed the divs I had around the input boxes and it works like a charm. Thank you.
That behavoiur occurs, becaus $(this) refers to the just hidden input field change your code like:
$(this).next().show(0, function() {
$(this).next().focus();
});
$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show().focus();
});
});
EDIT:
check this fiddle
I'm trying to use the following script to make the button close its menu by clicking outside of it.
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});});
You can see the demo ([Ideal Fiddle])(http://jsfiddle.net/craigmdennis/H2Chj/2/)
But my button ([Problematic Fiddle]) (http://jsfiddle.net/xJ9ug/) isn't working that well. It takes a few clicks to open the menu. Would you please tell me what's wrong with the css or the script? Any help is much appreciated.
Check out this fiddle. All you need is a simple condition check to make this work.
if ($('#dropdown').has(e.target).length === 0)
actually your code is correct .. the reason why it is not working is it have <input type="checkbox" /> inside a span and click event is being added for span. I don't know the exact reason why checkbox is not let the event propogate but removing the checkbox works like a charm..
and yea one more thing you haven't closed first span tag properly.
working demo without checkbox HERE
use addClass() and removeClass() to acheive the effect you demo had.
thanks
Add .dropdown_content li a,its working now..
$(document).ready( function(){
$('.dropdown').click( function(event){
event.stopPropagation();
$('.dropdown_content li a').toggle();
});
});
I am very new in programming, please give me a mercy. Below is my code:
$(function(){
document.getElementById("custom_link").addEventListener("mouseover",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.toggle('highlightDiv');
},false)})
$(function(){
document.getElementById("custom_link").addEventListener("click",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.add('highlightDiv');
},false)})
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight again. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
According to my code, it does not work properly because the behavior when hovering is strange. It would be very nice if you can explain me with full code structure or jsfiddle example. Thank you for your advance help.
http://jsfiddle.net/ETrjA/2/
$('#custom_link').hover(function () {
$('#custom_div').toggleClass('highlighted');
});
$('#custom_link').click(function (e) {
$('#custom_div').addClass('highlighted');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
You only need one class highlighted and you can access the link element directly within the click event callback via e.currentTarget.
You are mixing Javascript with its framework jQuery. Stick with jQuery for this.
// CSS: Create the highlight accessible with two classnames.
.highlight, .highlight_stay{
background:yellow;
}
Jquery
$(function(){
$('.custom_link').hover(function(){
$(this).addClass('highlight');
}, function(){
$(this).removeClass('highlight');
});
$('.custom_link').click(function(){
$(this).addClass('highlight_stay');
});
});
here is a link http://jsfiddle.net/8GV7B/2/
$(function(){
mouse_is_clicked = false;
$(".custom_link").hover(function(){
$("#container").addClass("highlight");
}, function(){
if(!mouse_is_clicked){
$("#container").removeClass("highlight");
}else{
mouse_is_clicked = false;
}
});
$(".custom_link").click(function(){
$("#container").addClass("highlight");
mouse_is_clicked = true;
});
});
How would I slideUp() the content only when '.areaCodeList' is clicked a second time?
$(".areaCodeList").on('click', function() {
$(this).next('.churchList').slideDown();
($this.die());
$('.churchList').slideUp();
});
You should use slideToggle()
$(".areaCodeList").on('click', function() {
$(this).next('.churchList').slideToggle();
});
Example
You may use some class to indicate it already clicked before running the code
$(".areaCodeList").on('click', function() {
if (!$(this).is('.clicked')){
$(this).addClass('clicked');
return false;
}
$(this).next('.churchList').slideDown();
$(this).die();
$('.churchList').slideUp();
});
You also may consider using attributes ($(el).attr('clicked')) instead of class and check for it later in a similar way.
Update:
The question title is really confusing and it seems that only many of us (answering the question) don't got it from the start:
Initially I got it like this:
Slide the element up if it clicked for the second time.
If it's the case than the sample I've provided is correct.
But it looks like the question is more like this:
Slide the element down on every even click and slide it up on every odd click.
If this is the case that slideToggle is the solution (as explained in epascarello's answer)
You can check if the .churchList is visible (slided down):
$(".areaCodeList").on('click', function() {
if( $(this).next('.churchList').is(':visible') === true){
$(this).next('.churchList').slideUp();
}else{
$(this).next('.churchList').slideDown();
}
});