I'm making my own lightbox and I have problem after closing the lightbox and turning it on again.
Here is the simple function code
(function($) {
$.fn.lghtbx = function() {
var lghtbxLink = $(this);
lghtbxLink.click(function() {
$('body').append("<div id=\"ZoomGallery\"></div>");
$('#ZoomGallery').css({'width': '100%','height': '100%', 'position': 'absolute', 'left': '0px', 'top': '0px', 'backgroundColor':'#000'});
$('#ZoomGallery').live('click',function() {
$('#ZoomGallery').remove();
})
$(document).keydown(function(event) {
switch (event.keyCode) {
case 37://left
alert('left!');
break;
}
})
})
}
})(jQuery);
I'm calling that function like this
$(document).ready(function() {
$('.lightbox').lghtbx();
});
And this is the simple html
<a class="lightbox" href="#">a</a>
When I click on the link and press left arrow on the keyboard alert appears. That's how it's supposed to work. But when I close the lightbox by clicking on the black div and when I open it again by clicking on the link then the problem pops out. Every time I click the left arrow I'm getting alert two times. If I close and open lightbox again and press the left arrow I will get alert three times... and so on.
Can you help me to solve this problem?
first remove the old event
$(document).unbind("keydown").keydown(function(event) {
That's becuase you are binding the event more then once. You should unbind the event when you close the lightbox:
$('#ZoomGallery').live('click',function() {
$('#ZoomGallery').remove();
$(document).unbind("keydown");
})
fiddle here: http://jsfiddle.net/ASS4D/
Related
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/
I'm trying to show a div when an image is clicked and then hide it after a given number of seconds. I've found two separate code samples that match my needs but I don't have the knowledge to put them together.
the code which makes content disappear after x seconds:
<script>
window.setTimeout(function() {
$('#fadeout').hide(2000);
}, 4000);
</script>
The code which makes the div appear on imageclick:
<SCRIPT>
function fade(div_id, button) {
if(button.value == 'FadeOut') {
$('#'+div_id).fadeOut('slow');
button.value = 'FadeIn';
}
else {
$('#'+div_id).fadeIn('slow');
button.value = 'FadeOut';
}
}
$('#sometext').fadeOut(2);
</script>
Maybe this could help:
$('#fadeout').hide(); // hide div
$('img').live('click', function(e){
e.preventDefault(); //cancel default action of click
$('#fadeout').show().delay(5000).fadeOut(1000); //show div on img click then hide after 5 seconds
});
here's a working sample: http://jsfiddle.net/7X767/3/
Instead of using 'slow', you can use time value in milliseconds.
On my site I have a contact button that when pressed slides a div containing a contact form downwards (using jQuery animate). This div has a close button in it that when pressed slides it back up (it's original position is off the screen). I need to make it so when the contact button is pressed, it only works once but then works again when the div has been closed.
I know this uses the bind / unbind function, however I can't get it working. Here is my code:
$(document).ready(function() {
var handler = function() {
$('.top,.left,.main,.header').animate({
top: '+=120'
}, 1300, 'easeOutBounce');
}
$('#contact').bind('click', handler);
$('#contact').unbind('click', handler);
});
$('#close').click(function() {
$('.top,.left,.main,.header').animate({
top: '-=120'
}, 1300, 'easeOutBounce');
});
the site where I'm trying to add it into is here: www.samskirrow.com/projects/move_div
Thanks for your help.
Sam
Figured it out, decided not to use bind, unbind commands but instead toggle. I have a close button that just takes on the role of the open button, therefore it doesn't disrupt the toggle cycle.
$(document).ready(function() {
$('#contact').toggle(function() {
$('.top,.left,.main,.header').animate({
top: '+=120'
}, 1300, 'easeOutBounce');
},function() {
$('.top,.left,.main,.header').animate({
top: '-=120'
}, 1300, 'easeOutBounce');
})
$('#close').click(function() {
$("#contact").click();
});
});
Hope this is useful to someone :)
How can I prevent the page from "jumping up" each time I click a link? E.g I have a link somewhere in the middle of the page and when I click it the page jumps up to the top.
Is the anchor href="#"? You can set it to href="javascript:void(0);" instead.
If you are going to a prevent default please use this one instead:
event.preventDefault ? event.preventDefault() : event.returnValue = false;
Let's presume that this is your HTML for the link:
Some link goes somewhere...
If you're using jQuery, try like this:
$(document).ready(function() {
$('a#some_id').click(function(e) {
e.preventDefault();
return false;
});
});
Demo on: http://jsfiddle.net/V7thw/
If you're not on jQuery drugs, try with this pure DOM JavaScript:
window.onload = function() {
if(document.readyState === 'complete') {
document.getElementById('some_id').onclick = function(e) {
e.preventDefault();
return false;
};
}
};
It will jump to the top if you set the link href property to # since it is looking for an anchor tag. Just leave off the href property and it won't go anywhere but it also won't look like a link anymore (and make sure to handle the click even in javascript or else it really won't be of much use).
The other option is to handle the click in javascript and inside your event handler, cancel the default action and return false.
e.preventDefault();
return false;
I am essentially brand new to coding (html5 forms, CSS3 and now jQuery).
What I am trying to do is have an imageswap (which I have done) attached to a radio button. So what I'm doing is replacing the buttons with images, each with a "pressed" version. However, before even attaching it to a form function/radio button input, I want to find a way so that when I click one button, it switches the other images back to "un-pressed". Essentially so that only one image can be "pressed" at a time.
Right now the code for me pressed images are
$(function() {
$(".img-swap1").live('click', function() {
if ($(this).attr("class") == "img-swap1") {
this.src = this.src.replace("_U", "_C");
} else {
this.src = this.src.replace("_C","_U");
}
$(this).toggleClass("on");
});
});
I thought about using an if statement to revert all the "_C" (clicked) back to "_U" (unclicked).
Hopefully I've included enough information.
A good pattern for solving this problem is to apply the unclicked state to ALL your elements, then immediately afterward apply the clicked state to the targeted element.
Also, your if statement ($(this).attr("class") == "img-swap1") is redundant -- it will always be true because it's the same as the original selector $(".img-swap1").live('click'...
Try
$(function() {
$(".img-swap1").live('click', function() {
$(".img-swap1").removeClass('on').each(function(){
this.src = this.src.replace("_U", "_C");
});
this.src = this.src.replace("_C","_U");
$(this).addClass("on");
});
});
If I understand the question correctly the following may work for you:
$(function(){
$('.img-swap1').live('click', function() {
$('.img-swap1').removeClass('on').each(function(){
$(this).attr('src', $(this).attr('src').replace("_C", "_U")); // reset all radios
});
$(this).attr('src', $(this).attr('scr').replace("_U", "_C")); // display pressed version for clicked radio
$(this).toggleClass("on");
});
});
I hope this helps.