CODEWITHSUNDEEP
jqueryfirefoxubuntuslide
MEM
MEM

Reputation: 31367

jquery slide flashing/blink issue on Firefox ubuntu

I have a <ul> list that is a little bit long. When you expand (slide down) that list elements, the browser does NOT scroll down and everything’s alright. When you contract (slide up) that list of elements, the browser scrolls up will flash/blink A lot while doing so.

Does anyone had this issue before? If so, what can we do to solve it?

Here's a code sample for better understanding:

$('#btCatA').click(function() {
    $('#btCatA').toggleClass('selec');
    $('#listcatA').slideToggle('slow', function() {
        // ...
    });
});

Upvotes: 0

Views: 851

Answers (1)

jwueller
jwueller

Reputation: 31006

You could probably prevent this by decreasing the scrollTop property of the window object by the height of that element before you slide up your list elements. jQuery has a method for that: .scrollTop(). You could animate that, too so that it looks a bit less hasty. The following (untested) code should do the trick:

var toggleClass = 'selec';

$('#btCatA').click(function() {
    var target = $(this),
        listElement = $('#listcatA');

    if (target.hasClass(toggleClass)) {
        target.removeClass(toggleClass);
        $(window).animate({
            scrollTop: '-='+listElement.height()+'px'
        }, 'slow', function () {
            listElement.slideUp('slow');
        });
    } else {
        target.addClass(toggleClass);
        listElement.slideDown('slow');
    }
});

Upvotes: 1

Related Questions