Toggle sidebar shifting content

[Kitten4u]

Site: notorioustest.proboards.com/

So I have a nice toggleable sidebar and all that's working. The last piece I can't quite figure out is that I want the wrapper to be centered regardless of whether the sidebar is toggled or not. So basically, when the sidebar is hidden, I want to push the content 250px to the left (the width of the sidebar). Currently I'm mostly doing that, however on reload it has to shift back to the left instead of being centered right away and it's kind of annoying and I'd like it to just be in the right spot. Is it possible to do that? Here's what I have so far, stripped down to focus on the important parts (see the site itself if you want all of it):

HTML

<div id="sidebar">
   Sidebar Content
</div>
<div id="menu-spacing">
    <div id="wrapper">
         Wrapper Content
    </div>
</div>

CSS
#sidebar {
   height: 100%;
   width: 250px;
   margin-top: 30px;
   background-color: white;
   border-right: 1px solid black;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   text-align: center;
   display: none;
}

#menu-spacing {
   margin-top: 30px;
   margin-left: 250px;
   transition: margin-left 600ms;
}

Javascript

<script>
    $(document).ready(function(){
         var cookieName = 'sidebarcookie';
               
         function SetCookie(key, value) {
              var expires = new Date();
              expires.setTime(expires.getTime() + 2592000000);
              document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
         }

         function GetCookie(key) {
              var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
              return keyValue ? keyValue[2] : null;
         }
               
         if (GetCookie(cookieName) === '1') {
              $('#menu-spacing').css('margin-left', '250px');
              $('#sidebar').show();
         }
         else if (GetCookie(cookieName) === '0') {
              $('#menu-spacing').css('margin-left', '0px');
              $('#sidebar').hide();
         }
         else {
              SetCookie(cookieName, '1');
              $('#menu-spacing').css('margin-left', '250px');
              $('#sidebar').show();
         }
               
         $(".burger").click(function(){
              if ($('#sidebar').is(':hidden')) {
                   $('#sidebar').show('slide', {direction: 'left'}, 600);
                   $('#menu-spacing').css('margin-left', '250px');
                   SetCookie(cookieName, '1');
              }
              else {
                   $('#sidebar').hide('slide', {direction: 'left'}, 600);
                   $('#menu-spacing').css('margin-left', '0px');
                   SetCookie(cookieName, '0');
              }
         });
    });
</script>


[Kitten4u]

bumping this. Here's the reproduction steps in case I was unclear in my OP:

1.) Toggle the sidebar closed
2.) Refresh the page

From there, you should see the forum content slide to the left instead of just appearing there to begin with.

[Kami]

Javascript only works after all content it's modifying appears on the page, so it has to wait for the contents of the page to load before it "activates" so to speak which results in the forum seeming to shift.

[Kitten4u]

Aug 2, 2018 12:04:56 GMT -8 Kami said:

Javascript only works after all content it's modifying appears on the page, so it has to wait for the contents of the page to load before it "activates" so to speak which results in the forum seeming to shift.

Yeah, I know what causes it, I'm just wondering if there's anything I can do about it. I'm under the impression that most people deal with it with preloaders and the like, but that almost seems excessive here?

[Kami]

I’m not totally sure if having a preloader would be considered “preventing” ads from showing so you’d have to check with a PB admin in the tech support board on that front.

But, provided it’s allowed, I would say it just depends on how badly it annoys you. I personally think preloaders are more bothersome but your mileage may vary.

[Kitten4u]

Okay, so it sounds like my options are preloader or dealing with it. That's largely what I needed to know because I agree that a preloader would be way more annoying for a forum here. Thank you!