Fancybox won't close when click spans - javascript

I want the fancybox to close when either of the spans are clicked, currently it seems to be reopening the window after they are clicked and clicking anywhere else closes it like it should.
<div class="fancybox" style="display: none;">
<span class="ChooseEnglish">English</span>
<span class="ChooseCymraeg">Cymraeg</span>
</div>
$(".fancybox").fancybox({
closeClick: true
});
$( ".fancybox" ).trigger( "click" );
$( ".ChooseEnglish" ).click(function() {
$.fancybox.close();
});
$( ".ChooseCymraeg" ).click(function() {
$.fancybox.close();
});
http://jsfiddle.net/K8NDm/
Thanks
Alex

The issue is that the selector .fancybox is bound to fancybox but it's also the content of fancybox. In other words, that selector is both the trigger and the target of fancybox.
Of course, any click on the selector and/or its contents (your <span>) will trigger fancybox over an over again.
You need another selector to fire fancybox (that can be hidden if you prefer so) like :
<a href="#fancybox" class="fancybox" style="display: none;"><a>
Then change the div selector from class to ID so it can be targeted by the link like :
<div id="fancybox" style="display: none;">
<span class="ChooseEnglish">English</span>
<span class="ChooseCymraeg">Cymraeg</span>
</div>
and finally the simplified script :
$(".fancybox").fancybox({
closeClick: true
}).trigger("click"); // you can chain fancybox and trigger methods
$(".ChooseEnglish, .ChooseCymraeg").click(function () {
$.fancybox.close();
}); // bind the same click event to both selectors at once
See JSFIDDLE
NOTE: if you want to prevent the visitor from closing fancybox without choosing any of your (<span>) options, then you can add modal:true instead like :
$(".fancybox").fancybox({
// force to close clicking on any span only
modal: true
}).trigger("click");
See forked JSFIDDLE

The click event is bubbling from the span to the div, so the fancybox gets reopened. You can use .stopPropagation to prevent bubbling:
$( ".ChooseEnglish" ).click(function(e) {
e.stopPropagation();
$.fancybox.close();
});
$( ".ChooseCymraeg" ).click(function(e) {
e.stopPropagation();
$.fancybox.close();
});

Related

jQuery make an event available only when a div is visible and disable it while the div is not visible

I have a dropdown(.dropdown) div that opens when I click on .open:
Html:
<div class="open">Open</div>
<div class="dropdown">Dropdown</div>
jQuery:
$(".open").click(function(){
$(".dropdown").show();
});
Once the dropdown is open I'm using this jQuery script to close it when i click is made outside .dropdown div:
$(document).click(function(){
$('.dropdown').hide();
console.log('click');
});
$('.open, .dropdown').click(function(e){
e.stopPropagation();
});
The problem is that the click event for document is executed even if the div is not visible. Now, I could check to see if the div is visible before executing the .hide() method but is there a solution to activate the event on the document when the div is visible and deactivate it when the div is hidden?
It looks like you need to bind a click event to the document anyways to hide the dropdown. So, what about doing something like:
$(document).ready(function(){
$(document).click(function(e){
if ($(e.target).hasClass("open")) $(".dropdown").show();
else $(".dropdown").hide();
});
});
It's more concise and you don't have to worry about event propagation.

Accordion preventing click on link

I have an accordion with a link in it, but whenever I click on the link, the accordion thinks I'm trying to close it. It's set up so you can click anywhere on the accordion to open or close it which I would like to keep, but when I person clicks on the link, ignore the accordion behavior and follow the link instead.
<div class="wrap">
<div class="top"></div>
<div class="middle">
<h3>Always showing</h3>
<div class="hidden">
<p>I want to follow this link.</p>
</div>
</div>
<div class="bottom"></div>
</div>
$('.wrap').on(touchClick, function (e) {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).find('.hidden').slideUp('fast');
return false;
}
$('.wrap').each(function (index, el) {
$(this).removeClass('active');
$(this).find('.hidden').slideUp('fast');
});
$(this).find('.hidden').slideDown('fast');
$(this).addClass('active');
});
Not tested but I believe this will work
$('.wrap').on(touchClick, function (e) {
//other code
});
$( "a" ).click(function( event ) {
event.stopPropagation();
});
It should stop the click from bubbling up and triggering the accordion events.
As an afterthought if you want use touchClick like youre accordion you could rewrite it as.
$( "a" ).on(touchClick, function (e) {
e.stopPropagation();
});
You will need to tell the browser to stop the event from bubbling up the event chain using event.stopPropagation() (see this so post for more details on this). This means that jQuery never gets to know about the click event, thus it won't close the accordion.
Add this in the specific link's click event listener and it should work as you want it to:
$('.wrap a').each(function(e){
e.stopPropagation(); // stop the event from bubbling up
});
However, don't confuse it with event.preventDefault(), which would not stop the event from bubbling up, but it would stop the browser from opening the link when it's clicked.

Dynamically applying a class to a button unable to do click event

I have two div of width 100% absolutely positioned side by side. On clicking a button I want to slide it to left. Then on clicking on same button I want it to come back to its normal position.
Here is my JsFiddle
The first part works fine, but I am not able to slide it back. The 2nd part of the jQuery code does not work. Can anyone please tell me the reason why its not working and how to make it work
<div class="about-deals">
<span class="view-tomorrow-deal">View Tomorrow Deals</span>
</div>
<div class="deals-image-wrapper">
<div class="deal-container">
<div class="today-deals">
</div>
<div class="tomorrow-deals">
</div>
</div>
</div>
try this JSFiddle
$(document).on('click', '.view-tomorrow-deal', function(event) {
$(this).removeClass('view-tomorrow-deal');
$(this).addClass('view-today-deal');
$(this).text('View Today Deals');
$('.deal-container').animate({left: '-100%'}, 1000);
});
$(document).on('click', '.view-today-deal', function(event) {
event.preventDefault();
$(this).removeClass('view-today-deal');
$(this).addClass('view-tomorrow-deal');
$(this).text('View Tomorrow Deals');
$('.deal-container').animate({left: '0%'}, 1000);
});
That's not really the way to create toggle functionality.
When you attach an event handler, that event handler is attached to any element matching the given selector at that time, changing the class later does not remove the event handler or make event handlers executed on pageload magically start working, unless they are delegated, but that makes very little sense here.
Just toggle the functionality in the same click handler, if needed use a flag etc.
$('.view-tomorrow-deal').click(function (event) {
$(this).text(function(_,txt) {
return txt == 'View Tomorrow Deals' ? 'View Today Deals' : 'View Tomorrow Deals';
});
$('.deal-container').animate({
left: $('.deal-container').position().left === 0 ? '-100%' : '0%'
}, 1000);
});
FIDDLE
Try jQuery toggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
or
$("#book").toggle("slide");
Link : https://api.jquery.com/slideToggle/
for slide effect
Stack link : slideToggle JQuery right to left

Stop JWPlayer when hidden the div with the player

I have a site where I'm using a JavaScript to add or remove a css class. Using this method I hide a div or show a div, as I need it. It works great.
The problem is one div opens a Video with a JWplayer, when I hide the "window" or better say, the div. The sound is still playing, so I need a code to put stop on the video when someone clicks the "hide" button or close button.
How do you do that? I have no idea.
Thanks
HTML
<div class="videoquon">
<div class='my-video-close'></div>
<div id='my-video'></div>
<script type='text/javascript'>
jwplayer('my-video').setup({
file: 'qvideo.f4v',
width: '600',
height: '337'
});
</script>
</div>
JavaScript
$('div.vidreveal a').click(
function(event) {
event.stopPropagation();
$('div.videoquon').slideToggle(300);
}
);
$('div.my-video-close').click(
function(event) {
event.stopPropagation();
$('div.videoquon').slideToggle(300);
}
);
I don't know JW Player, but judging by their docs, I'm going to go with
$( 'div.my-video-close' ).click( function( event ) {
event.stopPropagation();
jwplayer( 'my-video' ).stop();
$( 'div.videoquon' ).slideToggle( 300 );
});
...or jwplayer( 'my-video' ).pause(); depending on the desired effect.

Javascript onclick and not mouseover

$(function() {
$(".popup").hide();
$(".clickMe").mouseover(function () {
$(".popup").show();
}).mouseout(function() {
$(".popup").hide();//Set this to default hide
});
});
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<a class="clickMe" href="#"> Click here to see hidden item.</>
<div class="popup"> You've found me! </div>
I found this code that i would love to implement but unsure how. Instead of mouseover, how can i set it to onclick call instead? Thanks for your time.
This would do it
$(function() {
$(".popup").hide(); //Hide the popup first
$(".clickMe").click(function () { //Attach a click event to the .clickMe
$(".popup").toggle(); //Toggle the visibility of the popup
});
});
So all i've done is change the mouseover and mouseout events for a single click event for the element with a class of .clickMe. Then used a jQuery toggle effect which will show or display the div depending on whether it is already visible, hence 'toggle' the div. Look here for more info

Categories