Geek Answers Handbook

Disable the jQuery onClick function, then enable the function

I use three jQuery functions on my website.

In my function.jsfile, 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 am I trying to do to add / disable actions in my third function (bottom_cartouche () function).

I would like when " $('.cartouche_bottom_inside').on('click', function(e){" to disable features pre_scroll_cartouche_top()andpre_scroll_cartouche_bottom()

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

I tried to use on / off as well as bind and untie, but I could not find a way to make it work.

here is what i 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 you try to disable, only the 1st function is disabled, and to enable it again it does not work at all ...

Can anyone help me with this?

+4
3

, if 2 (flag_top flag_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());
        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();


        });

}
+1

, off

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

, DOM ( ), . :

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

Try to remove the brackets when calling on / off, you should make a link to the function, and not execute the function:

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

More articles:


All Articles