Question

Below is the code used to show and hide a footer banner. Everthing is working fine except the MouseOver.

The MouseOver does work (and when triggered it shows a highlight to the area) however the user clicks in the area, the highlight disappears but then when the user exits the area the highlight flashes as its triggered again post click on the exit.

Therefore it appears the mouseenter/mouseleave code is reset after a click in the same area.

How can I prevent the triggering of this event again even after the click? thankyou.

// Hide the Footer
$(document).on('click','div#fixedPageFooterShown', function() {hideFooterBanner();});


// Highlight Footer MouseOver
$(document).on('mouseenter','div.fixedPageFooterDisplay', function() {
        $('img.bannerBottomMouseOver').show();
    }).on('mouseleave','div.fixedPageFooterDisplay', function () {
        $('img.bannerBottomMouseOver').hide();
});


// Hide Footer Banner Function
function hideFooterBanner() {
    $('div#fixedPageFooter').fadeOut('fast', function () {
        $('div#fixedPageFooterClosed').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMin').hide();
        $('img#footerArrowMax').show();
    });
}


// Show Footer Banner Function
$(document).on('click','div#fixedPageFooterClosed', function() {
    $(this).fadeOut('fast', function () {
        $('div#fixedPageFooter').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMax').hide();
        $('img#footerArrowMin').show();
    });
});

Answer 1

I not sure what not works with, can help more if you show html layout

I think you can use event.preventdefault() to prevent default events:

// Hide the Footer


// Highlight Footer MouseOver
//i'll change here to be more jquery'ish - not need on() i think as it replacemement for live()

$('div.fixedPageFooterDisplay').bind('mouseenter', function() {
    $('img.bannerBottomMouseOver').show();
}).bind('mouseleave', function() {
    $('img.bannerBottomMouseOver').hide();
});


// Hide Footer Banner Function
var hideFooterBanner = function(event) {
    //prevent default event handler
    if (event !== undefined) {
        event.preventdefault();
    }

    $('div#fixedPageFooter').fadeOut('fast', function() {
        $('div#fixedPageFooterClosed').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMin').hide();
        $('img#footerArrowMax').show();
    });
};

//i'll change here to be more jquery'ish
$('div#fixedPageFooterShown').click(hideFooterBanner);


// Show Footer Banner Function
//i'll change here to be more jquery'ish
$('div#fixedPageFooterClosed').click(function(event) {

    //prevent default event handler     
    event.preventdefault();

    $(this).fadeOut('fast', function() {
        $('div#fixedPageFooter').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMax').hide();
        $('img#footerArrowMin').show();
    });
});​