Question

I have a login box that fades in over a big image slider. I want to prevent the image slider links from being clicked when the login box is open (so they can click anywhere on it to close the login box).

Below is my code, but it does not work and clicking the slider still activates the link.

$('#my-raveis-login').click(function() {
    if ($('#login-box').is(':hidden')){
        $('#login-box').fadeIn('normal');
        $('#login-box').find('.login-toparrow').fadeIn('normal');
    }
    else{
        $('a.featured').click( function() {
            e.preventDefault();
        });
        $('#login-box').fadeOut('normal');
        $('#login-box').find('.login-toparrow').fadeOut('normal');
    }
    return false
});

Any ideas?

Was it helpful?

Solution

Was able to answer my own question. Here is my working code.

//Login Toggle
$('#my-raveis-login').click(function() {
    if ($('#login-box').is(':hidden')){
        $('#login-box').fadeIn('normal');
        $('#login-box').find('.login-toparrow').fadeIn('normal');
    }
    else{
        $('#login-box').fadeOut('normal');
        $('#login-box').find('.login-toparrow').fadeOut('normal');
    }
    return false
});
//Prevent slider if login is open
$('#home-slider a.featured').click(function(e) {
    if ($('#login-box').is(':visible')){
        e.preventDefault();
        $('#login-box').fadeOut('normal');
        $('#login-box').find('.login-toparrow').fadeOut('normal');
    } 
});

It kind of duplicates some of the code for hiding the login, but it definitely works. Feel free to post if you have a cleaner way of doing this.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top