Search code examples
javascriptjqueryhtmltoggleclass

Trying to write javascript to hide toggle side menu class until page is loaded. It currently shows for a split second until page loads

EDIT- Got it figured out, answer is below, thanks everyone!

I'm back with another head scratcher that I've been working on all morning and can't seem to solve on my own and was hoping someone would help out this rookie.

I currently have a problem with my phpbb forum when in responsive mode on my phone (can't duplicate it on desktop using mobile view, but it is happening on my phone and I assume most other phones since mine isn't much different than any other android).

So my problem is that my toggle side menu is loading before I would like it to. The easiest way to explain is with a picture I made (couldn't screenshot it because it doesn't stay long enough).

mock up of my problem

As you can see, for about a second (or fraction of a second, just long enough to bug me), the header expands and the menu items are visible. It doesn't show exactly as it would if the toggle was activated, for some reason, only the text and border items are visible. The background color does stay hidden. The background of the header does expand with the text, which is shouldn't do with when the toggle is activated, so I'm not exactly sure what I need to do, hoping I can get some help.

I didn't just come here hoping someone could do this for me, I've tried many many options.

I saw a similar question where it was advised to use #selector within the .css, but I had no luck with that.

I've tried this script code:

<script type="text/javascript">
// Short-form of `document.ready`
$(function(){
    $(".gf-menu-device-container").hide();
    $(".gf-menu-toggle").on("click", function(){
        $(".gf-menu-device-container").toggle();
    });
});
</script>

The code does nothing for me. I've also tried substituting .gf-menu-device-wrapper-sidemenu but nothing with that either.

Here's the html code for that menu, The javascript file is minified and nearly impossible for me to get anything out of, but if anyone would like to look at it, it's here: https://raiderforums.com/styles/corvus/template/rt_js/mootools-core.js

<div style="display: block;" class="gf-menu-toggle">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</div>

<div class="gf-menu-device-wrapper-sidemenu">
    <div class="gf-menu-device-container">
        <div class="gf-menu-device-container-wrapper">
            <ul class="gf-menu rt-desktop-menu l1  ">
                 <li class="items would follow">
             </ul>
         </div>
    </div>
</div>
Solution

  • Here's how I did it, thanks for the help guys. Changed the inline css to display:none, then this script got it working:

    <script type="text/javascript"> 
$(document).ready( function(){ jQuery('.gf-menu').fadeIn(1000); }); 
</script>

    See anything wrong with what I did? It works, but perhaps I could have done it different?