i have div contains info chart. let's call container. within container have 2 other divs. 1 div header dates, other div data corresponding dates. want have header/dates div positioned fixed. follow user scroll down. problem having it removes overflow: hidden css style because of it's position. there way still retain overflow: hidden div styled position: fixed or position: absolute?
here simple jsfiddle example. remove css style position: fixed .titlesection-right see desired cut off point
for overflow:hidden on .titlesection-right work need set fixed width on element . it's width, in case, needs equal parents width, respectively .rightside has percentage width. added code in js
var maxwidth = $(".rightside").width() $(".titlesection-right").width(maxwidth) this way , .titlesection-right have width of .rightside
see here : jsfiddle
or snippet below
$(function() { var maxwidth = $(".rightside").width() $(".titlesection-right").width(maxwidth) var dates = ['7/1/2016', '7/2/2016', '7/3/2016', '7/4/2016', '7/5/2016', '7/6/2016', '7/7/2016', '7/8/2016', '7/9/2016', '7/1/2016', '7/2/2016', '7/3/2016', '7/4/2016', '7/5/2016', '7/6/2016', '7/7/2016']; var employees = ['smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', 'smith, bob', ]; var employeeprojections = ['fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll', 'fulllllllll']; var container = $('#container'); var leftside = $('.leftside'); var rightside = $('.rightside'); var titlesectionleft = $('.titlesection-left'); var titlesectionright = $('.titlesection-right'); var resources = $('.resources'); var projections = $('.projections'); createheaderdates(); createresources(); createprojections(16); function createheaderdates() { dates.foreach((date) => { var datediv = $('<div class="date">' + date + '</div>'); titlesectionright.append(datediv); }); } function createresources() { employees.foreach((employee) => { var employeediv = $('<div class="employee">' + employee + '</div>'); resources.append(employeediv); }); } function createprojections(numofweeks) { employees.foreach((employee) => { var projectionrow = $('<div class="projectionrow"></div>'); for(var = 0; < numofweeks; i++){ var projectiondiv = $('<div class="projection">' + employeeprojections[i] + '</div>'); projectionrow.append(projectiondiv); } projections.append(projectionrow); }); } });body { background-color: azure; } #container { display: block; height: 8000px; width: 800px; background-color: darkolivegreen; margin: 0 auto; } .leftside { width: 14%; display: inline-block; background-color: forestgreen; vertical-align: top; } .rightside { width: 85%; display: inline-block; background-color: cadetblue; overflow: auto; } .titlesection-left { display: inline-block; width: 100%; } .employee { height: 30px; } .titlesection-right { background-color: royalblue; display: inline-block; white-space: nowrap; position: fixed; overflow:hidden; } .projectionrow { white-space: nowrap; height: 30px; } .projections { display: inline-block; } .projection { display: inline-block; border: 1px solid black; margin-right: 10px; } .date { margin-right: 10px; display: inline-block; border: 1px solid black; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id='container'> <div class='leftside'> <div class='titlesection-left'> <label>resource</label> </div> <div class='resources'></div> </div> <div class='rightside'> <div class='titlesection-right'></div> <div class='projections'></div> </div> </div> </body>
Comments
Post a Comment