0

Here is my problem. I have some custom jquery written to toggle down a login form on my site. I then added some code I found here to close that box if you click off it.

The problem comes in because I have a link to a fancybox inside this div that toggles in/out. Because i'm using event.stopPropagation(); along with the clickoff, it messes with that fancybox link. Full code example is below.

//Login Toggle
    $('a.login').click(function() {
        if ($('.login-box').is(':hidden')){
            $('.login-box').fadeIn('normal');
            $('span.arrow-up').fadeIn('normal');
            $(this).text('Close');
        }
        else{
            $('.login-box').fadeOut('normal');
            $('span.arrow-up').fadeOut('normal');
            $(this).text('Log-In');
        }
    });
    //Close when click off login
    $('html').click(function() {
        $('.login-box').fadeOut('normal');
        $('span.arrow-up').fadeOut('normal');
        $('a.login').text('Log-In');
    });
    //Exclude these divs, so clicking inside them won't close login
    $('.login-box, a.login, span.arrow-up').click(function(event){
        event.stopPropagation();
    });

    //Forgot Password Fancybox
    $("a.fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'fade',
        closeEffect : 'fade'
    });

If I take out the stopPropagation, everything works as expected (the fancybox button works), I just lose the ability to close the login box by clicking outside of it. Can anyone help me with a smarter way of writing it that doesn't break the fancybox functionality?

Sean
  • 344
  • 2
  • 12
  • 1
    Any console errors? I am not an expert with fancybox but it sounds like a DOM issue to me. Maybe try using .live() or .on() depending on what version of jQuery you are using. – khollenbeck Jan 29 '13 at 16:15
  • I am not seeing any console errors. So you suggest wrap the event.stopPropagation in a .live() or .on()? – Sean Jan 29 '13 at 16:39
  • Yeah I would give that a shot. Try $('.login-box, a.login, span.arrow-up').live("click",function(){ }); and or $('.login-box, a.login, span.arrow-up').on("click", function(){ }); – khollenbeck Jan 29 '13 at 16:41
  • .live() and .on() didn't work. Just does the same thing as removing it all together now. It shows, then immediately hides the login box. – Sean Jan 29 '13 at 16:51
  • Are you able to re-create this in jsFiddle? – khollenbeck Jan 29 '13 at 16:52
  • I think I may have miss understood how your site is working. Try using live() and .on() with you $('html').click(function(){}); – khollenbeck Jan 29 '13 at 16:59
  • Still no go. I've edited the original post with the page. – Sean Jan 29 '13 at 17:23
  • So fancybox is creating the login popup? Also what browser are you using? – khollenbeck Jan 29 '13 at 17:24
  • Firefox right now, but it's the same across everything I've checked. – Sean Jan 29 '13 at 17:26
  • I am not sure I see the problem. I click login it pops open. I click on the page it closes. Isn't that what you want? – khollenbeck Jan 29 '13 at 17:29
  • The problem is the forgot password link INSIDE the login box. It does not function to bring up the page as a fancybox. If I remove the logic to "close box when I click outside it" the forgot password link works as a fancybox again. – Sean Jan 29 '13 at 17:33
  • Okay. When I click on that I get a PHP error. Notice: Undefined variable: aData in D:\Sites\RSVPWeddingManager\webroot\views\forgotpassword.php on line 10 – khollenbeck Jan 29 '13 at 17:35
  • That page isn't finished yet, we just need the broken page to show up in the lightbox/fancybox. I've removed the click outside of box logic so you can see. – Sean Jan 29 '13 at 17:40

1 Answers1

3

event.stopPropagation() is preventing the event from reaching the handler that is set by fancybox

You need to allow events targeting a.fancybox to continue propagating

$('.login-box, a.login, span.arrow-up').click(function(event){
    if ($(event.target).hasClass('fancybox') == false) {
        event.stopPropagation();
    }
});

This will allow events to propagate for any elements that have the class 'fancybox'

This is unrelated to your problem, but I would suggest that you add event.preventDefault() or return false to click handlers for links

Krule
  • 6,468
  • 3
  • 34
  • 56
Dogoku
  • 4,585
  • 3
  • 24
  • 34
  • Awesome! This worked perfectly. I also added return false to my a.login click handler as you suggested. – Sean Jan 29 '13 at 18:13