Question

I am using a js plugin to create scroll bars. Basically, when you load the page, it automatically sets itself to “display: none” when it shouldn’t be. Then, if you resize the browser even a little bit, it switches itself to “display: block” and works correctly. I can’t for the life of me figure out what is wrong, especially because it is an exact replica of the code from the past two (different IDs) that are functioning correctly.

I believe this is the relevant code, but I can include other pieces if you need. mcs3_container is what needs a scroll bar.

/*----PART 4----*/
/*----LOCATIONS----*/
echo '
  <div class="reserveAPickupAppointmentForm" id="reserveAPickupAppointmentForm4">
    <div class = "reserveAPickupAppointmentText">
      Please choose from the following locations:
    </div>
    <br />';

$sql = "
  SELECT DISTINCT timeBlocks.location
  FROM timeBlocks
  WHERE
    timeBlocks.school = '".$_SESSION["school"]."'
    AND timeBlocks.date >= CURDATE()
  ORDER BY timeBlocks.priority;
";

include "databaseConnection.php";
mysql_close($connection);

if (mysql_num_rows($result) == 0) {
  echo 'There are currently no appointments available online.  Time blocks for pick ups during move-out week are released after Spring Break, and you can reserve an appointment at that time.  If you want to schedule a custom appointment during a different time of the year, please email or   call us, and we can help to create a custom pick up.';
} else {
  echo '
    <div id="mcs3_container">
      <div class="customScrollBox">
        <div class="container">
          <div class="content">';
  mysql_data_seek($result, 0);
  while ($row = mysql_fetch_array($result)) {
    echo '
            <div class = "reserveAPickupAppointmentLocationText reserveAPickupAppointmentButtonText">'..$row["location"].'</div>
            <div class="buttonBreak">&nbsp;</div>';
  }
  echo '
            <noscript>
              <style type="text/css">
                #mcs_container .customScrollBox{overflow:auto;}
                #mcs_container .dragger_container{display:none;}
              </style>
            </noscript>';
  echo '
          </div>
        </div>
        <div class="dragger_container">
          <div class="dragger"></div>
        </div>
      </div>
      <!-- scroll buttons -->
      <a class="scrollUpBtn" href="#"></a>
      <a class="scrollDownBtn" href="#"></a>
    </div>';
}
echo '
  </div>';
echo '
  <script>
    $(window).load(function() {
      $("#mcs3_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"fixed","yes","yes",10);
    });
  </script>';

Answer 1

After you run the mCustomScrollbar plugin, trigger a resize event on the window object. You state that once you re-size the view-port that it works correctly, this is just automatically triggering that re-size:

$(window).load(function() {
    $("#mcs3_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"fixed","yes","yes",10);
    $(window).trigger('resize');
});