1

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>';
DaveRandom
  • 87,921
  • 11
  • 154
  • 174
radleybobins
  • 863
  • 5
  • 10
  • 23
  • Please indent your code sensibly if you want other people to be able to pick it up and understand it... – DaveRandom Feb 20 '12 at 23:54
  • 1
    @Dave, it looks right on my computer, but I'm havin some trouble with stackoverflow...also, I apologize, I had surgery on m right arm and I'm stuck typing one handed. – radleybobins Feb 20 '12 at 23:55
  • 1
    Fair enough, a hint for making sure it looks right everywhere is to use spaces instead of for indentation, various different rednering engines display tabs very differently... – DaveRandom Feb 21 '12 at 00:07
  • @Dave, how many spaces to a tab? – radleybobins Feb 21 '12 at 00:17
  • That's sort of the point - it's very much open to interpretation and varies widely. Many code editors display tabs and spaces as the same width, which produce messy indentation in places that don't. Which is why I always stick to just spaces. Re the question - are you sure `$(window).load()` is firing? Stick an `alert()` or a `console.log()` in there to confirm that it fires before window resize... **EDIT** I see you have solution but it's a bit hacky and you could do with finding/fixing the actual problem rather than working around it... – DaveRandom Feb 21 '12 at 00:22

1 Answers1

2

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');
});
Jasper
  • 75,717
  • 14
  • 151
  • 146