0

I am having a table which is a collection of divs. I have a div for header and a div for item (cells). Basically I would like to have javascript to calculate the width of header div and the width of the item divs (that falls in the header column) and see which is greater. Whichever is greater, that greatest width has to be set for both header and item.

Since I am new to javascript, I don't know how to call a javascript function from the style. For example: I would like say:

<div id="Header1_div" style="width: CalculateWidth(); display: inline-block">Header 1</div>

Here is the javascript and html code:

Please let me know how I can achieve the desired objective. Thanks in advance.

function InitApp()
{
    var gridHeight = 400;
    var gridWidth = 500;
    var scrollBarWidth = getScrollSizes(); //get scroll bar's width.
    
    $("#div-header").css("width", (gridWidth - scrollBarWidth) + "px");
    $("#div-header-hack").css("width", (scrollBarWidth) + "px");
    $("#div-item").css("width", (gridWidth) + "px");
    
    $("#div-header-hack").css("left", (gridWidth - scrollBarWidth) + "px");
    
    $("#div-item").css("max-height", (gridHeight) + "px");
}

function ScrollHeader()
{
    $("#div-header").scrollLeft($("#div-item").scrollLeft());
}

function getScrollSizes() 
{ 
    // call after document is finished loading
    var el= document.createElement('div');
    el.style.display= 'hidden';
    el.style.overflow= 'scroll';
    document.body.appendChild(el);
    var h= el.offsetHeight-el.clientHeight;
    document.body.removeChild(el);
    return h;
}
<HTML>
    <head>
        <script type="text/javascript" src="table.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
    </head>
    <body id="doc-body" style="width: 100%; height: 100%; overflow: hidden; position: fixed" onload="InitApp()"> 
        <div>
        
            <div id="div-header" style="position: absolute; top: 0px; overflow: hidden; height: 20px; background-color: gray">
                <div style="min-width: 1000px;">
                    <div id="Header1_div" style="width: 120px; display: inline-block">Header 1</div>
                    <div id="Header2_div" style="width: 180px; display: inline-block">Header 2</div>
                    <div id="Header3_div" style="width: 120px; display: inline-block">Header 3</div>
                    <div id="Header4_div" style="width: 190px; display: inline-block">Header 4</div>
                    <div id="Header5_div" style="width: 250px; display: inline-block">Header 5</div>
                    <div id="Header6_div" style="width: 120px; display: inline-block">Header 6</div>
                </div>
            </div>
            
            <div id="div-item" style="position: absolute; top: 20px; overflow: auto" onscroll="ScrollHeader()">
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>
                <div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
                        <div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
                        <div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
                        <div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
                        <div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
                        <div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
                        <div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
                </div>                
            </div>
            
        </div>
    </body>

</HTML>
Fast Chip
  • 425
  • 1
  • 4
  • 16
  • Did my answer solved it for you? – Asons Oct 13 '15 at 19:03
  • Hi sorry for my late response. I am still trying to find a way to loop through a collection of divs in a column and set to the greatest width of the column and header. For instance, in the present html, the "Header1" has a greater width than "Item1". So the width of every "Item1_div" should be set to the width of "Header1_div" Can you write a code to achieve my desired result? – Fast Chip Oct 16 '15 at 13:43
  • First, may i ask why you use absolute positioned div like that? ... I mean, with a table this would adjust by itself. – Asons Oct 16 '15 at 14:39
  • The main objective that I am trying to achieve here is have a condensed table with a horizontal and vertical scroll bars. I have tried using a table and following this approach: http://jsfiddle.net/X2Kmd/389/ but it seems that columns and rows don't adjust themselves due to the min-width specified in the css class. In some scenarios when i implement that solution, i see that the header is having a different width and the rows under that header are having a consistent width which makes the display very awkward. This is why i resorted to using this solution of using divs. – Fast Chip Oct 16 '15 at 15:14
  • May I then ask, can you show or explain in which scenarios the head and body columns have inconsistent width? – Asons Oct 16 '15 at 15:54
  • What I am trying to say is, with the fiddle you showed me, you only need to fix the header with a script, if you can't figure out why the header and body have inconsistent width. With your div you need to script everything. And by putting spans or divs inside your cells will make the "cell content" behave like divs and spans instead of quirky cells. – Asons Oct 16 '15 at 17:19
  • Can you please suggest how I can fix the header width with the script in order to adjust appropriately with the cells width under that header? – Fast Chip Oct 16 '15 at 18:31
  • I'v been searching around for a while as I were interested in if this were solved before. I found some really good solutions which works more or less out of the box, some as jQuery plugins. Check this post and follow the links and pick the one that suits your need best, because I can't do this better: http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body – Asons Oct 16 '15 at 18:39

0 Answers0