I was trying to create a lightbox that triggers on a button click. I already have a lightbox that triggers on click on a div in the same document.ready that works perfectly, BUT the one on the button doesn't work the first time I click it. Then, works perfectly. Well, I don't want to create a tooltip that says "please click it twice first time", so how can I fixed?
(If anyone can also explain to me why this happens would be marvelous)
$(document).ready(function () {
//BUTTON CLASS
$(".focosBTN").click(function () {
$("body").append("<div class='img-popup'></div>");
$(".img-popup").click(function () {
$(".img-popup").fadeOut(500, function () {
$(this).remove();
}).addClass("lightboxfadeout");
});
$(".focosBTN").click(function () {
$(".img-popup").fadeIn(500);
});
});
//DIV CLASS
$(".lightbox").click(function () {
let imgsrc = $(this).find('.lightboxImg').attr('src');
$("body").append("<div class='img-popup'><img src='" + imgsrc + "'></div>");
$(".img-popup").click(function () {
$(".img-popup").fadeOut(500, function () {
$(this).remove();
}).addClass("lightboxfadeout");
});
});
$(".lightbox").click(function () {
$(".img-popup").fadeIn(500);
});
});
Related
I'm trying to change the area and the button value by clicking the different Tabs.
Here's my question:
First loading the page, the button effect is working, but after clicking the other Tabs, it can't work.
On clicking the second Tab, then clicking the area button, you'll find it can't work.
Here's part of my code:
$(document).ready(function () {
var _showTab = 0;
$('ul.tabs').each(function () {
$(this).find('li').each(function (k) {
if (k != 0) {
$($(this).find("a").attr("href")).hide();
} else {
$(this).addClass('active').append("<span class='tr_icon'></span>");
}
})
});
$('ul.tabs li').click(function () {
var $this = $(this),
_clickTab = $this.find('a').attr('href');
$this.addClass('active').append("<span class='tr_icon'></span>").siblings('.active').removeClass('active').children().remove('span');
// $(_clickTab).stop(false, true).fadeIn().siblings().hide();
paidChange();
areaChange();
return false;
}).find('a').focus(function () {
this.blur();
});
});
Here's all of my code:
Sorry for my poor English, and I hope you'll understand what I mean.
document.on click will trigger on dynamically added tabs.
Change
$('ul.tabs li').click(function() { });
to
$(document).on("click", 'ul.tabs li', function(){});
How can I wait for a click event ?
eg. I want that my <div> wait for 3 seconds after it's fade in, and if within 3 seconds the <div> is not clicked then it fade out.
I tried to give time 2 seconds in fadeOut but mouse click is not working it just fadeOut.
my .js file code:
$(document).ready(function () {
$(".arrow").hide()
$(".container").mouseenter(function () {
$(".arrow").fadeIn()
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000)
});
$(".arrow").click(function () {
$(".container").hide()
});
I'm not sure what you're trying to accomplish but your onClick handler isn't working because syntax is wrong.
Try this:
$(".arrow").on('click', function () {
$(".container").hide()
});
Also you seem to be missing the closing braces of the ready-function.
It should be like this:
$(document).ready(function () {
// Your code here
}); // Don't forget this line
Use a boolean to check if arrow has been clicked at the end of your time limit.
Example
$(document).ready(function () {
var clicked = false;
$(".arrow").click(function () {
clicked = true;
});
$(".container").hover(function () { // i put the two mouseenter, mouseleave functions into one hover(mousein, mouseout) function
$(".arrow").fadeIn();
setTimeout(function () {
if (clicked === false) {
$(".arrow").fadeOut(2000);
}
}, 3000);
}, function () {
$(".arrow").fadeOut(2000);
clicked = false; // i don't know if you want this or not. this resets everything on mouseout. if you want the .arrow thing to stay even after the mouse leaves .container, just get rid of this line
}); // .hover
}); // .ready
$(document).ready(function () {
var clicked = 0;
$(".container").mouseenter(function () {
$(".arrow").fadeIn();
setTimeout(function() {
if(clicked == 0) {
$(".arrow").fadeOut(2000);
}
},3000);
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000);
});
$(".container").click(function () {
clicked = 1;
});
I have a list which has a jquery handler for a mouse click. I need to place an image within the list, but need a mouse click on the image to perform a different function. I was thinking some sort of unbind on mouseover and bind on mouseout but can not get it to work. Is there an easier method?
The problem I am having is it performs the two clickable events when I click the image.
JS
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function () {
alert("This is a click on the list")
}
});
});
html
<li id="tab" runat="server">Keywords <a class="fake-link" onclick="alert("This is an image click")"><img id="icon" src="images/icon.gif" style="float: right; visibility:visible"/></a></li>
So any ideas how I can only have the alert from the image click? Thanks in advance!
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function (e) {
if($(e.target).attr('id')==='icon')){
//call that function which runs on image click
}
else {
alert("This is a click on the list")
}
}
});
});
Edit: As puppybeard suggested here is another way if you want to have different function to run for all images in the li's
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function (e) {
if($(e.target).is('img'))){
//call that function which runs on image click
}
else {
alert("This is a click on the list")
}
}
});
});
It's hard to do because of event bubbling.
Event namespaces and .on() .off() would help.
For example:
var items = $('#v-nav>ul>li');
var someFunctionToPerform = function() {
alert('Imma list click event');
}
items.on('click.someEventNameSpace', someFunctionToPerform);
items.find('img').on({
'mouseover': function() {
items.off('click.someEventNameSpace');
},
'mouseleave': function() {
items.on('click.someEventNameSpace', someFunctionToPerform);
},
'click': function() {
alert('Imma list image click event!');
}
});
This code will unbind click event for list items after mouseover event on image inside the list and bind them back after mouseleave event on image.
That's probably the hard way, but still it should work. Other answer could be buggy in IE 8- because of different dirrection of event bubbling.
I have an element in aspx page with class= "._aHide" it carrying a message, And it is shown repeatedly.
<div id="Message1" class="._aHide" runat="server" visible="true"><p>My Message</p></div>
aspx server side elements not created when page load if it's visible property = true.
I need to hide this div after 7 seconds of show it, unless mouse over.
I created this code
$(document).ready(function () {
var hide = false;
$("._aHide").hover(function () {
clearTimeout(hide);
});
$("._aHide").mouseout(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
$("._aHide").ready(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
});
But somthings wrong here
1- this code work for one time only, And I show this message many times.
2- All message boxes hides in one time, because I can't use $(this) in settimeout and I don't know why.
Thank you for your help, and I really appreciate it
Remove the point in the HTML code:
<div id="Message1" class="_aHide" runat="server" visible="true"><p>My Message</p></div>
See: http://api.jquery.com/class-selector/
tbraun89 is right, remove the "." in your html code.
Then, you can simplify your code like this :
JQuery hover have 2 functions using mouseenter and mouseleave
$(document).ready(function () {
var hide = false;
$("._aHide").hover(
function () {
//Cancel fadeout
clearTimeout(hide);
},
function(){
//re-set up fadeout
clearTimeout(hide);
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
//Set up fadeout
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
Im trying to make a button so that when I click on it it creates a new button after it then when I click on the next/new button it will create a button after itself but the click event only works on the first button, can you help?
Here is my fiddle = http://jsfiddle.net/hyeFB/
// $(document).ready(function () {
var myDiv = '<div class="myButton">myButton</div>';
$('#c').append(myDiv);
$('.myButton').click(function () {
$(this).after(myDiv);
});
//});
try using on
var myDiv = '<div class="myButton">myButton</div>';
$('#c').append(myDiv);
$('body').on('click', '.myButton',function () {
$(this).after(myDiv);
});
// $(document).ready(function () {
var myDiv = '<div class="myButton">myButton</div>';
$('#c').append(myDiv);
$('.myButton').live(function () {
$(this).after(myDiv);
});
// Or Use delegation
$('body').delegate('.myButton','click',function () {
$(this).after(myDiv);
});
//});
Would do the trick. http://api.jquery.com/live/ for more info.
Note that live is deprecated starting with jquery 1.7, so the above answer is the more correct one for 1.7+