#559 Stop the room titles scrolling off screen

open
nobody
None
1
2014-12-26
2014-07-01
Anonymous
No

Hi

Could you tell me how if at all possible to stop the room titles from scrolling off the screen when you have a lot of time slots.

for example in our rooms area we have 4 bookable rooms set at 15 min time slots when a user wants to book something later in the day they scroll down the page to find the time slot but this moves the room titles off the viwable area, a few of our users have booked facilities in the wrong are because of this.

I know they can change the text size within internet explorer but i thought i would ask the question just in case it has come up before
can this behaviou be changed.

IE9

MRBS 1.4.11

Database:

MySQL 5.6.17

System:

Windows NT ICTHELPDESK 6.1 build 7600 (Windows Server 2008 R2 Standard Edition) i586
PHP:
5.5.12

Discussion

  • John Beranek

    John Beranek - 2014-07-01

    The following kind of code could do it, note that I have not tested this!

    http://css-tricks.com/persistent-headers/

     
  • John Beranek

    John Beranek - 2014-07-01

    Does work in my test site, inserted code into js.inc at the appropriate point, and put the minimal CSS into css/mrbs.css.php

    // Starts at line 201 of js.inc in 1.4.11
    
    function UpdateTableHeaders() {
       $("table#day_main,table#week_main").each(function() {
    
           var el             = $(this),
               offset         = el.offset(),
               scrollTop      = $(window).scrollTop(),
               floatingHeader = $(".floatingHeader", this)
    
           if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height()))
               floatingHeader.css({
                "visibility": "visible"
               });
           } else {
               floatingHeader.css({
                "visibility": "hidden"
               });
           };
       });
    }
    
    // Existing load function...
    
    $(window).on('load', function() {
    
    // Floating header code
       var clonedHeaderRow;
    
       $("table#day_main,table#week_main").each(function() {
           clonedHeaderRow = $("thead", this);
           clonedHeaderRow
             .before(clonedHeaderRow.clone())
             .css("width", clonedHeaderRow.width())
             .addClass("floatingHeader");
    
       });
    
       $(window)
        .scroll(UpdateTableHeaders)
        .trigger("scroll");
    
    // Back to stock MRBS
    
      var args = {day: '<?php echo $day?>',
                  month: '<?php echo $month?>',
                  year: '<?php echo $year?>',
                  area: '<?php echo $area?>',
                  room: '<?php echo $room?>',
                  page: '<?php echo $page?>'};
    

    CSS:

    .floatingHeader {
      position: fixed;
      top: 0;
      visibility: hidden;
    }
    
     
  • John Beranek

    John Beranek - 2014-12-22

    I checked in these changes as [r2913].

     

    Related

    Commit: [r2913]

  • Campbell Morrison

    I was getting problems with the header columns not lining up with the body columns. I think this happens on certain tables when the body columns are constraining the width of the header columns and so when the body's not there the cloned header resizes its columns to suit itself. Looking at the original css-tricks.com post I see other people were having this problem and there was a fix suggested which I have modified slightly:

        $("table#day_main,table#week_main").each(function() {
          var originalHeader = $("thead", this);
          var clonedHeader = originalHeader.clone();
          clonedHeader.find('th').width(function (i, val) {
              return originalHeader.find('th').eq(i).width();    
            });
          clonedHeader
              .insertAfter(originalHeader)
              .css("width", originalHeader.width())
              .addClass("floatingHeader");
    
       });
    

    Essentially this sets the width of the header cells in the clone to match the width of the original.

    There are a couple of other problems I noticed which I might have a look at tomorrow:

    (1) If you have table refreshing turned on ($refresh_rate in the config file) then an Ajax request for a new table is sent periodically to the server. When the new table arrives the floating headers are lost.

    (2) If you resize the window then the floating header doesn't get resized.

     
    • Campbell Morrison

      This change now checked into the trunk in Rev 2914.

       
  • John Beranek

    John Beranek - 2014-12-22

    Oops, I guess fixable by moving the cloning code into a named function, and calling that function at the appropriate points.

     
  • Campbell Morrison

    Yes. It might also be fixable by making the cloning happen on table load (rather than window load) and then relying on the table load that is triggered after the refresh.

     
  • John Beranek

    John Beranek - 2014-12-22

    Indeed, I can provoke the width issue quite readily in my simple test installation - I guess I didn't test very well...

     
  • John Beranek

    John Beranek - 2014-12-22

    Apparently onload is not usable for tables, tested it myself and:

    http://stackoverflow.com/a/3870208

     
  • Campbell Morrison

    But I think that if you fire your own load event on the table it works. At least that's how the refresh code works.

     
  • Campbell Morrison

    Have checked in a load of fixes up to and including Rev 2923. Might come back to it later and try and make window resizing a little smoother by only doing the resize operations every now and then rather than on every resize event.

    And of course the other answer to the original question is that one could set

    $column_labels_both_ends = TRUE;
    

    which would duplicate the room titles in a table footer. And with floating headers this config option is probably redundant, but I'll leave it in anyway for the moment.

     
  • Campbell Morrison

    Have made window resizing a little smoother in Rev 2925.

     
  • Campbell Morrison

    One or two strange effects left which I might have a look at sometime. For example if you select a group of empty cells for booking and drag your mouse up over a floating header you're still selecting the cells underneath the header but you can't see them. The floating header should probably be the boundary for selection.

     
  • Campbell Morrison

    Fixed empty cell selection in Rev 2926.

     


Anonymous

Cancel  Add attachments





Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:

JavaScript is required for this form.





No, thanks