Div blinking while resize

debugcn Published at Dev

Etienne Arthur

I am working on a bootstrap based website and I have the following case : A main container and a floating left navigation menu. The floating left navigation menu, is set to position fixed, because it is following the user scroll.

What I would like is when the end user resize the window, and when the main content meets the left menu (overlap), the left menu becomes hidden, and when there is enough space the left menu comes back.

Actually, it is not really working, it is blinking. I have written a little bit of jquery binded to the resize function. Here is the jsfiddle :

https://jsfiddle.net/cuw46rsv/5/

function getDiffLeftMenu(div1, div2) {
    var value = ($(div1).offset().left - $(div2).offset().left);
    console.log(value  - $(div2).width());
    if(value - $(div2).width() < 0){
        return true;
    }
}

$(window).on('resize', function(event) {

    var value = ($('.central-content').offset().left - $('#sectionsMenu').offset().left);
    if(getDiffLeftMenu('.central-content','#sectionsMenu')){
        $('#sectionsMenu').hide();
    }
    else {
        $('#sectionsMenu').show();

    }
}).resize();

Is this possible to not have this blinking effet ? Thanks a lot for any help. Regards.

Slaven Tomac

Here's the solution with your logic, .hide() method causes it to have offset 0 and that's why it's blinking (it can get stuck as hidden all the time).

https://jsfiddle.net/cuw46rsv/7/

function getDiffLeftMenu(div1, div2) {
    var value = ($(div1).offset().left - $(div2).offset().left);
    console.log(value  - $(div2).width());
    if(value - $(div2).width() < 0){
        return true;
    }
}

By using opacity offset will stay there.

$(window).on('resize', function(event) {

        var value = ($('.central-content').offset().left - $('#sectionsMenu').offset().left);
        if(getDiffLeftMenu('.central-content','#sectionsMenu')){
            $('#sectionsMenu').css('opacity', 0);
        }
        else {
            $('#sectionsMenu').css('opacity', 1);

        }
    }).resize();

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-21

Comments

0 comments

From Dev

Related Related

Article

Div blinking while resize

Div blinking while resize

Blinking white cursor while booting

jQuery clickable blinking text div

Blinking issue of span with div hover

JQuery How to resize div while scrolling top or down

Android multiple notification avoid blinking while updating

Page blinking while clicking on it | jQuery .load()

Blinking of UIViewController while navigation from UICollectionViewController to UIViewController

using while (!(cin ... and getting blinking prompt

How to turn off blinking LED while suspend?

Laptop battery indicator blinking red while green

How to add blinking effect for the dynamically generated div

CSS hide div on mouse hover but it is blinking

Blinking div and mouseover/mouseout events and Prototype?

angularjs - resize div on window resize

Resize text in a div resize img

angularjs - resize div on window resize

Centering a Div on screen resize

Resize textarea with div

Automatically resize div tag

Div resize into divs %

Resize image to parent div

Resize specific div

Dynamically resize text in the div

Resize div circle

JQuery - resize div on click

Java strange graphics blinking in while lock.await()

Proportionally resize width and height of div on window resize

Extjs:Resize panel with parent div resize

resize div with image on page load and window resize