Primefaces: Timeline with fixed header

Question

im working on a project using primefaces and its extensions including the timeline.

its not supported to have a fixed header on this (yet, i believe they plan on implement it) so i did it myself.

on my site i have 2 linked timelines, the only problem im facing is this:

http://s14.postimg.org/f9rhpkn1d/problem.png

when i change the viewport (drag and drop it to left/right or zoom in/out), the minor/major labels on the header dont get hidden, they still show until the complete day is not visible anymore

i tried fixing this with some z-index stuff, but no luck yet.

thanks in advance,

mike

Answer 1

well... there you go

not working for ie and only with pf5.1&extensions3.2.0

my 2 timelines have the ids timelineWeekly and timelineWeeklyBlocked and i put them inside a native scrollpanel with max height 450

code:

<h:outputScript id="connectTimelinesFixed" target="body"
            unescape="true" rendered="#{!weekTimelineController.isIE}">
//<![CDATA[
$(function() {
    onrangechange2();
});
function onrangechange1() {  
    var range = PF('timelineOneWdgt').getVisibleRange();  
    PF('timelineTwoWdgt').setVisibleRange(range.start, range.end);
    var minorFirst = jQuery($(".timeline-selectable > div:nth-child(1) > div:nth-child(1) > div:nth-child(19)"));
    var minorSecond = jQuery($("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(19)"));
    var majorFirst = jQuery($(".timeline-selectable > div:nth-child(1) > div:nth-child(1) > div:nth-child(6)"));
    var majorSecond = jQuery($("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(6)"));
    var offsetRightMinor = ($(window).width() - (minorFirst.offset().left + minorFirst.outerWidth()));
    var offsetRightMajor = ($(window).width() - (majorFirst.offset().left + majorFirst.outerWidth()));
    var factorMinor = Math.round($(window).width()/offsetRightMinor).toFixed(1);
    var factorMajor = Math.round($(window).width()/offsetRightMajor).toFixed(1);
    console.log(factorMajor);
    if(factorMinor==12){
    minorFirst.css({'visibility' : 'hidden'});
    minorSecond.css({'visibility' : 'hidden'});
    } else if(factorMinor<12){
        minorFirst.css({'visibility' : 'visible'});
        minorSecond.css({'visibility' : 'visible'});
    }
    if(factorMajor==12){
        majorFirst.css({'visibility' : 'hidden'});
        majorSecond.css({'visibility' : 'hidden'});
    } else if(factorMajor==11||factorMajor==10){
        majorFirst.css({'visibility' : 'visible'});
        majorSecond.css({'visibility' : 'visible'});
    }
}  

function onrangechange2() {  
    var range = PF('timelineTwoWdgt').getVisibleRange();  
    PF('timelineOneWdgt').setVisibleRange(range.start, range.end);
    var minorFirst = jQuery($(".timeline-selectable > div:nth-child(1) > div:nth-child(1) > div:nth-child(19)"));
    var minorSecond = jQuery($("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(19)"));
    var majorFirst = jQuery($(".timeline-selectable > div:nth-child(1) > div:nth-child(1) > div:nth-child(6)"));
    var majorSecond = jQuery($("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(6)"));
    var offsetRightMinor = ($(window).width() - (minorSecond.offset().left + minorSecond.outerWidth()));
    var offsetRightMajor = ($(window).width() - (majorSecond.offset().left + majorSecond.outerWidth()));
    var factorMinor = Math.round($(window).width()/offsetRightMinor).toFixed(1);
    var factorMajor = Math.round($(window).width()/offsetRightMajor).toFixed(1);
    console.log(factorMajor);
    if(factorMinor==12){
    minorFirst.css({'visibility' : 'hidden'});
    minorSecond.css({'visibility' : 'hidden'});
    } else if(factorMinor<12){
        minorFirst.css({'visibility' : 'visible'});
        minorSecond.css({'visibility' : 'visible'});
    }
    if(factorMajor==12){
        majorFirst.css({'visibility' : 'hidden'});
        majorSecond.css({'visibility' : 'hidden'});
    } else if(factorMajor==11||factorMajor==9){
        majorFirst.css({'visibility' : 'visible'});
        majorSecond.css({'visibility' : 'visible'});
    }
}//]]>
        </h:outputScript>
        <h:outputScript id="JS" target="body" unescape="true"
            rendered="#{!weekTimelineController.isIE}">
//<![CDATA[
jQuery(function($) {
var oldWidth = $(window).width();
var $cache = jQuery(".timeline-selectable > div:nth-child(1) > div:nth-child(1)");
var $cache2 = jQuery("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)");
var top = 168;
var top2 = 635;
if(${weekTimelineController.browserCompatibility})
    top = 164,
    top2 = 630;
  function fixDiv() {
    var scroll = $(window).scrollTop();
    var viewportWidth = $(window).width();
    var factor = oldWidth/viewportWidth;
    if(scroll > top)
      $cache.css({
        'top': '-'+(scroll-top)+"px",
        'margin-top': ''
      });
    else
      $cache.css({
        'position': 'fixed',
        'top': '-'+(scroll)+"px",
        'margin-top': top+'px',
        'z-index' : '1',
        'left': '*1.27'
      });
    if(scroll > top2)
      $cache2.css({
        'top': '-'+(scroll-top2)+"px",
        'margin-top': ''
      });
    else
      $cache2.css({
        'position': 'fixed',
        'top': '-'+(scroll)+"px",
        'margin-top': top2+'px',
        'z-index' : '1',
        'left': '*1.27'
      });
  }
  $(window).scroll(fixDiv);
  $(window).resize(function() {
    var viewportWidth = $(window).width();
    var factor = oldWidth/viewportWidth;
    $cache.css({
        'left': '*'+factor*1.28
      }),
    $cache2.css({
        'left': '*'+factor*1.28
      });
});
  fixDiv();
});
//]]>
        </h:outputScript>
        <!-- css classes to set the height of the horizontal lines when header is fixed -->
        <h:outputStylesheet rendered="#{!weekTimelineController.isIE}">
#page {
    min-width: 800px !important;
}
div.timeline-axis-grid-minor {
    height: 428px !important;
}
div.timeline-axis-grid-major{
    height: 450px !important;
}
        </h:outputStylesheet>

looks like this:

http://s1.postimg.org/spfdd2bq7/image.png

i censored the names but u can see i scrolled down to the bottom and the header stayed fixed

i know its not especially elegant, but it was a requirement and i know theres other people that wanted to have this...