Disable a jQuery function onClick then enable function

Question

I'm using three jQuery functions in my website.

In my function.js file, I also use document.ready to call my functions.

Here is my jQuery code :

$(document).ready(function() {
    bottom_cartouche();
    pre_scroll_cartouche_top();
    pre_scroll_cartouche_bottom();
});

function pre_scroll_cartouche_top() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
    var cartouche_fixed_H = $('.cartouche_fixed').height();
    var cartouche_top_position = -($('.cartouche_top').height() - $('.top_table').height());

    /*----------------------------- TOP ---------------------------------------------------*/

    $('.cartouche_top').on("mouseenter", function() {
        $('.cartouche_top').stop().animate({
            top: -$('.cartouche_top').height() + $('.cartouche_fixed').height()
        });

        $('.archives_open').on('click', function() {
            $('.cartouche_top').stop().animate({
                top: '0px'
            }, function() {
                $('.cartouche_fixed').addClass('active');
            });
            $('.archive_close').css('opacity', '1');
        });

        $('.archive_close').on('click', function() {
            $('.archive_close').css('opacity', '0');

            $('.cartouche_fixed').removeClass('active');

            $('.cartouche_top').stop().animate({
                top: cartouche_top_position
            });
        });
    });

    $('.cartouche_top').on("mouseleave", function() {
        $('.cartouche_fixed').removeClass('active');
        $('.cartouche_top').stop().animate({
            top: cartouche_top_position
        });
    });
}

function pre_scroll_cartouche_bottom() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
    var cartouche_fixed_H = $('.cartouche_fixed').height();
    var cartouche_top_position = -($('.cartouche_top').height() - $('.top_table').height());

    /*----------------------------- BOTTOM ---------------------------------------------------*/

    $('.cartouche_bottom').on("mouseenter", function() {
        $('.layout_bottom').slideUp();

        $('.cartouche_bottom').stop().animate({
            top: $(window).height() / 1.5
        });
    });

    $('.cartouche_bottom').on("mouseleave", function() {
        $('.layout_bottom').slideDown();

        $('.cartouche_bottom').stop().css('position', 'fixed').animate({
            top: cartouche_bottom_position
        });
        $('.cartouche_bottom_inside').removeClass('active');
        $('.bottom_close').hide();
    });
}

function bottom_cartouche() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();

    $('.cartouche_bottom_inside').on('click', function(e) {
        e.preventDefault();

        if (!$(this).is('.active')) {
            $('.layout_bottom').slideUp();

            $('.cartouche_bottom').css({
                'position': 'absolute',
                'cursor': 'text',
                'left': '0'
            }).animate({
                top: $(".top_table").height();
            });

            $('.bottom_close').show();
            $(this).addClass('active');
        }
    });

    $('.bottom_close').click(function() {
        $('.cartouche_bottom').css({
            'position': 'fixed',
            'cursor': 'context-menu'
        }).animate({
            top: cartouche_bottom_position
        }, function() {
            $('.cartouche_bottom_inside').removeClass('active');
        });

        $('.bottom_close').hide();

        $('.layout_bottom').slideDown();
    });
}

what I'm trying to do to add on/off actions in my 3rd function (function bottom_cartouche()).

I would like, when "$('.cartouche_bottom_inside').on('click', function(e){" to disable the functions pre_scroll_cartouche_top() and pre_scroll_cartouche_bottom()

and when "$('.bottom_close').click(function(){" to enable the 2 functions again.

I tried using on/off, and bind and unbind, but I couldn't find a way to make it work.

here is what I've tried :

    function bottom_cartouche(){

        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();

    $('.cartouche_bottom_inside').on('click', function(e){

        e.preventDefault();

        if( !$(this).is('.active') ){

// DISABLE //

    $('.cartouche_top').off('mouseenter',pre_scroll_cartouche_top());
    $('.cartouche_bottom').off('mouseleave',pre_scroll_cartouche_bottom());

// END DISABLE //

            $('.layout_bottom').slideUp();

            $('.cartouche_bottom').css({'position' : 'absolute', 'cursor' : 'text', 'left' : '0'}).animate({

            top :$(".top_table").height();

            });

            $('.bottom_close').show();

            $(this).addClass('active');

        }

    });

    $('.bottom_close').click(function(){

// ENABLE //

    $('.cartouche_top').on('mouseenter',pre_scroll_cartouche_top());
    $('.cartouche_bottom').on('mouseleave',pre_scroll_cartouche_bottom()); 

// END ENABLE //

        $('.cartouche_bottom').css({'position' : 'fixed', 'cursor' : 'context-menu'}).animate({

            top : cartouche_bottom_position

            },function(){   $('.cartouche_bottom_inside').removeClass('active');
        });

        $('.bottom_close').hide();

        $('.layout_bottom').slideDown();

    });

    }

When trying to disable, only 1st function is disabled, and for enable again, it's not working at all...

Can anybody help me with this?

Answer 1

It does not need name of function when You doing off

$('.cartouche_top').off('mouseenter');
$('.cartouche_bottom').off('mouseleave');

And don't forget element must belongs to DOM (already have done create) when you bind or unbind an event. Other case use this code:

$(document).off('mouseenter','.cartouche_top');
$(document).off('mouseleave','.cartouche_bottom');

Answer 2

I've found a solution using a different method with if statements, and 2 variables (flag_top & flag_bottom) . here is my code, maybe it can help :

function pre_scroll_cartouche_top(){


        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
        var cartouche_fixed_H = $('.cartouche_fixed').height();
        var cartouche_top_position = - ($('.cartouche_top').height()-$('.top_table').height());
        var flag_top = 0;
        /*----------------------------- TOP ---------------------------------------------------*/

        $('.cartouche_top').on("mouseenter", function(){
            if(flag_top==0){
                $('.cartouche_top').stop().animate({top : -$('.cartouche_top').height()+$('.cartouche_fixed').height()});

                $('.archives_open').on('click', function(){
                    flag_top = 1;

                    $('.cartouche_top').stop().animate({top : '0px'},function(){

                        $('.cartouche_fixed').addClass('active');

                    });

                    $('.archive_close').css('opacity','1');

                });

                $('.archive_close, .index_tableau a').on('click', function(){
                    flag_top = 0;
                    $('.archive_close').css('opacity','0');

                    $('.cartouche_fixed').removeClass('active');

                    $('.cartouche_top').stop().animate({top : cartouche_top_position});


                });
            }
        });

        $('.cartouche_top').on("mouseleave", function() {
            if(flag_top==0){
                    $('.cartouche_fixed').removeClass('active');
                    $('.cartouche_top').stop().animate({top : cartouche_top_position});
            }

        });
    }

    function bottom_cartouche(){

        /*----------------------------- PRE SCROLL BOTTOM ---------------------------------------------------*/


        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
        var cartouche_fixed_H = $('.cartouche_fixed').height();
        var cartouche_top_position = - ($('.cartouche_top').height()-$('.top_table').height());
        var flag_bottom = 0;
        /*----------------------------- MOUSEENTER ---------------------------------------------------*/


        $('.cartouche_bottom').on("mouseenter", function(){
            if(flag_bottom==0) {
                        $('.layout_bottom').slideUp();

            $('.cartouche_bottom').stop().animate({top :$(window).height()/1.5});
    }
        });

        /*----------------------------- MOUSELEAVE ---------------------------------------------------*/

        $('.cartouche_bottom').on("mouseleave", function(){
            if(flag_bottom==0) {
            $('.layout_bottom').slideDown();

            $('.cartouche_bottom').stop().css('position','fixed').animate({
                top :cartouche_bottom_position
            });
            $('.cartouche_bottom_inside').removeClass('active');
                $('.bottom_close').hide();

}

        });


        /*----------------------------- OUVERTURE BOTTOM ---------------------------------------------------*/

        $('.cartouche_bottom_inside').on('click', function(e){
            e.preventDefault();
            if( !$(this).is('.active') ){
                            flag_bottom=1;

                $('.layout_bottom').slideUp();
                //$('.slideshow').css('position','initial');
                $('.cartouche_bottom').css({'position' : 'absolute', 'cursor' : 'text', 'left' : '0'}).animate({
                top :$(".top_table").height(),
                });


                $('.bottom_close').show();
                if ($('.cartouche_bottom_inside').height() < $(window).height() ) {
            }
                $(this).addClass('active');

            }
        });

        /*----------------------------- FERMETURE BOTTOM ---------------------------------------------------*/

        $('.bottom_close').click(function(){
            flag_bottom=0;

            $('.cartouche_bottom').css({'position' : 'fixed', 'cursor' : 'context-menu'}).animate({
            top : cartouche_bottom_position
            },function(){   $('.cartouche_bottom_inside').removeClass('active');
        });
            $('.bottom_close').hide();

                    //$('.slideshow').css('position','relative');

                        $('.layout_bottom').slideDown();


        });

}

Answer 3

Try removing the parenthesis when calling on/off, you should make reference to the function, not execute the function:

$('.cartouche_top').off('mouseenter',pre_scroll_cartouche_top);
$('.cartouche_bottom').off('mouseleave',pre_scroll_cartouche_bottom);