Javascript not hiding nested elements simultaneously

[signmeup9]

I put together a little javascript that will hide a header and footer while scrolling. The problem is the nested elements in the header and footer are delayed in being hidden and shown. Even if I set every element to be hidden, they are still delayed from the parent div element (<div1>). Any thoughts on how I can get everything to disappear at the same time?
Let's say the header/footer layout is something like the following and the code is set to hide <div1>:

<div1>
    <img>
    <div2></div2>
    <div3>
        <div4>
        </div4>
    </div3>
</div1>

<div1> will hide instantly, then the nested elements hide about 300ms later.

ACTUAL CODE

<script>
// HIDE MOBILE TOP AND BOTTOM MENU ELEMENT ON SCROLLING

    var timer2;
    function hideme() {

        // Clear the timer
        if(timer2 != "undefined"){
            clearTimeout(timer2);
        }

        // Hide the header and footer menu in mobile mode
        document.getElementById("mobile_top_menu").style.visibility = "hidden";
        document.getElementById("mobile_bottom_menu").style.visibility = "hidden";


        // Set the timer to show the header and footer menu in mobile mode
        timer2 = setTimeout(function(){
            document.getElementById("mobile_top_menu").style.visibility = "visible";
            document.getElementById("mobile_bottom_menu").style.visibility = "visible";
        },400)//Threshold is 400ms

    };

    // Call the function when scrolling
    window.onscroll = hideme;

</script>

Thanks

 

[FResher]

I see 3 'to debate' errors :

1 -
the css setting 'visibility' act on "what you see" , prefers to use 'display:none' because that really throw out the element with 'display:none'. ( out of the interactive elements )
In fact 'visibility' keep the element 'active' for user instead of making the element inactive.

2 -
the choosen event to apply hideme() : window.onscroll
this event is surely too 'heavy' for what you require, because of long an repeated call.

3 -
the use of a Timer is risky because 400ms is really fast
why don't you use a boolean ( true | false ) as 'status', with a 'status' for the animation, the two box disappear, and when the scroll is over, they come back on the screen.
Timers are hard time ( joke ) and very demanding to set the interval.

one other thing, do you use 'z-index : 10' for the header and footer ( or the body only ), by this css setting, you can act on a layer instead of acting on 'boxes'.
with footer and header at z-index:10, and body on another layer z-index: 0, you separate safely the 2 areas.

and you can use 'display:fixed' for the header and footer to stay at their place on the screen.

do the 'screen' clipping when you use your code ? it is 'flashing' when moving ?

<script>
// HIDE MOBILE TOP AND BOTTOM MENU ELEMENT ON SCROLLING

    var status = true;
    function toggleHBF() { // it's a toggle function

        // Clear the timer
        if(status == false){
            document.getElementById("mobile_top_menu").style.display = "none";
            document.getElementById("mobile_bottom_menu").style.display = "none";
            status = true;
        }{
            document.getElementById("mobile_top_menu").style.display = "fixed";
            document.getElementById("mobile_bottom_menu").style.display = "fixed";
            status = false;
        }

       

    };

    // Call the function when scrolling
    window.onscroll = setTimeOut(toggleHBF,400);

</script>

 

[signmeup9]

Thanks. I tried your code and it doesn't work. One of the issues....I believe...with your timer version is that upon initial load of the page the elements shift a little so it activates the function based on that scrolling and hides it, then it wont come back. My version will call the timer and bring the elements back. Initially I was trying to make the code so it wouldn't activate unless it scrolls a certain amount to eliminate this issue, but couldn't figure out how to do it.

But a couple other things (javascript is not my thing).

1/ Fixed doesn't bring the element back, I have to put display:inline first and then set the position:fixed and placement attribute.
2/ setTimeOut should be setTimeout from what I've read.

Issues with your version for my situation:
At the top of my page, there is a gap, when I do display:none, and remove that element, so when I scroll to the top of the page that space is no longer there, then when I bring the element back with fixed, it ends up covering up some content. If I use position:relative it will shift the page down to not cover the content, but it is not visually appealing watching that shift. And the element does not reappear "properly" (cosmetically).

In answering your question, the screen will flash only when I use display:none, and bring it back with display:inline.

I got mine working the way I want, but with a lot of unnecessary coding as far as I see and it's not pretty. I was real hopeful with your "position:fixed" solution until I scrolled to the top. Would have taken out a good 20 lines of code.