I'm currently using lightbox2 to display a group of images, and what I want is to add a custom button in the data-title attribute, after I add it and the button shows, but I can't catch the click event of that button, when I click it and none of my code executed. Why is this happening? and how am I supposed to make it work?
data-title='button'
I'm guessing that you have myfunction() wrapped in a:
$(document).ready(function(){
or a
$(window).load(function(){
which is defining the function out of scope. If you can pull it out of the .ready() or .load() function it should work for you.
Working Example
So to sum up, this works:
function myfunction() {
alert('it works!');
}
$(document).ready(function(){
//other stuff
});
But this won't work:
$(document).ready(function(){
function myfunction() {
alert('it works!');
}
});
Related
So, right now this is set to be activated on click. I keep trying to mess with the code to get it to just activate immediately and get rid of clicking entirely, but nothing's been working for me.... Pls help.
$(function () {
$(".item").onload(function () {
$(this)
.next().toggleClass("active");
});
$("#body").css("min-height", "100%");
});
write $('item').load(function(){
});
and if that doesnt work make a normal function and put the function on the onload attribute of item element.
Make jquery trigger event for you:
$(function() {
$(".item").click(function() {
$(this).next().toggleClass("active");
}).trigger('click');
$("#body").css("min-height", "100%");
});
I'm trying to make this persistant cart that lets you add products to cart without redirecting to a new page. It works perfectly, but the only problem is that it can not be closed when you click on the exit button in the corner. Live version here by clicking on cart. Make sure to add a product to see it work, else you won't see anything.
I have tried this:
<script type="text/javascript">
$(document).ready(function(){
$('.cart-show').click(function(){
$("#cart").hide();
});
});
</script>
Aswell as cartToggle with is a feature in the Shopify theme Timber.
The class .cart-show is adding to your [X] element later, so you should use event delegation:
$(document).ready(function() {
$('body').on('click', '.cart-show', function (e) {
$("#cart").hide();
});
});
Try this:
$(document).ready(function(){
$(document).on('click', '.cart-show', function (event) {
event.preventDefault();
$("#cart").hide();
});
1.) You should use event delegation,
2.) If you have id for element you should use id as selector
$(document).ready(function() {
$('body').on('click', '#exit', function () {
$("#cart").hide();
});
});
I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>
Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.
DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.
Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.
I am using ColorBox inline functionality and I have created a button which I've set to close the window when clicked:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
});
I have another function which I want to run when the button is clicked, so I've used:
<button class="closebutton" onclick="myFunction();">Close</button>
Problem is the myFunction is not working above.
Any ideas please?
UPDATE:
Here is where the code is:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".inline").colorbox({inline:true, width:"50%"}); //for colorbox inline
$('#cboxClose').remove(); //remove popup window close button
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
Adding myFunction(); before or after $.fn.colorbox.close(); is not working
myFunction code: (This goes after the code above on the page)
<script type="text/javascript">
function myFunction() {
$("#ajax-form").submit(function(){
$.post("update.php",
$("#ajax-form").serialize(),
function(data){
$('#jqm').attr('src',
$('#jqm').attr('src'));
}
);
return false;
});
}
</script>
UPDATE 2:
I'll try to explain better: I have a form and input on the main page that works find, so when you add some text to the input box and submit then form then the value of the input is submitted.
Now, when I put that same input in the inline area of colorBox so that it appears inside the popup window the value is not submitted. I've tried grabbing JS errors on firebag but cannot see anything there.
Hope this helps.
Why not just add myFunction() before $.fn.colorbox.close();? That way you can be sure what order things are handled in.
Instead of using inline javascript, you could simply do something like this :
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
I believe the problem is that myFunction() (the onClick attribute) is being overridden by jQuery. If you want your function to execute whenever a .closebutton is clicked just use:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
If its only for that button, try adding an id to that button and:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
if($(this).attr('id') == 'exampleID')){
myFunction();
}
});
Ok so, after reading your update #2, I understand that actually your problem is not that the myFunction code doesn't execute right.
The problem is that you moved your input inside the colorbox, so its value doesn't submit with the form, wich is normal because the input is now outside the form.
You could either simply move your whole form inside the colorbox, or use javascript to copy the value of the input you moved outside of your form in a hidden input.
I'm trying to make a page scroll to top when a link is clicked.
Heres what I got so far.
<script>
jQuery(document).ready(function () {
jQuery("ul.pager a").click(function() {
scroll(0,0);
return false;
});
});
<script>
Problem with that code is that it works only on first click.
How to make it work every time I click on a link?
Maybe you could use internal links (href="#top") instead of binding events with jQuery.
jQuery(document).ready(function () {
jQuery("ul.pager a").live("click", function() {
scroll(0,0);
return false;
});
});
try this