Primefaces：使用固定標題的時間軸

Question

即時通訊工作在使用primefaces及其擴展包括時間線的項目上。

它不支持有一個固定的標題（但我相信他們計劃實施它），所以我自己做了。

我的網站上

我有2周相連的時間表，唯一的問題IM面對的，是這樣的：

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

當我改變視（拖放到左/右或放大/縮小） ，標題上的次要/主要標籤不會被隱藏，它們仍然會顯示，直到整個一天不再可見爲止

我試圖用一些z-index的東西來解決這個問題，但沒有運氣。

在此先感謝，

邁克

Answer 1

好...你去

不即工作，只用pf5.1 & extensions3.2.0

我的2個有時間表ID時間軸Weekly和timelineWeeklyBlocked，我把它們放在一個最大高度的原生滾動面板內。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> 

看起來是這樣的：

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

我刪的名字但你可以看到我向下滾動至底部，頭呆固定

我知道它不是特別優雅，但這是一個要求，我知道其他人想要這個...