Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: span height?

  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    311
    Thanks
    17
    Thanked 0 Times in 0 Posts

    span height?

    Hey All,
    I have a table comprised of 13 six row "sections" distinguished by classNames "headerRow" or alternately "headerRow gray".
    Each row contains a <textarea> which if Empty (or value="Note:") will hide (row.display='none') EXCEPT FOR the section headerRow.
    This all works fine, however for print formatting I would like to insert a "page-break-before" each section IF and when it grows to a height which exceeds the lower page boundary.
    To wit, it would be entirely possible for a user to write "War and Peace" within but a single row/textarea of a given "section", but for the intended use case, and user profile I am not too concerned about that.
    Initially, I thought I would simply check position of the headerRow and insert a "page-break-before" if(headerRow.offsetTop > PagePrintHeight) but this would NOT account for the possiblity of the bottom row of the preceeding section also being greater than the specified PagePrintHeight.

    Was thinking it might be possible to wrap table sections by <span>section rows</span> gauging by span height, but this doesn't seem to work either. Would be greatful for any suggestions.
    Here's a TWO ROW sample "section":
    PHP Code:
    <script>
    function 
    spanHeight(){
    var 
    spanHt=document.getElementById('span_1').offsetHeight;
    alert(spanHt);
    }
    </script> 

    <table id="table1" border="4" cellpadding="0" style="border-collapse: collapse; position:absolute; left:3px; top:43px" bordercolor="#000080" width="689">
    <span id="span_1" oncontextmenu="spanHeight(); return false;">
        <tr class="headerRow gray" id="grounds1">
                <td width="5" valign="top">&nbsp;</td>
                <td width="50" valign="top" align="center"><br>
                <b><font color="#FF0000">1</font></b></td>
                <td width="585"><b>Page 4&nbsp; GROUNDS</b><br>
                <textarea name="row_1"cols="100" rows="5" onclick="select()" >Note:</textarea></td>
                <td align="center" valign="top"><br>
                <input type="button" class="button" value="+" name="GD_1" onclick="if(document.Q_note.row_1.value !=='Note:')
                {show('grounds2', true);    document.Q_note.row_2.select();} else{document.Q_note.row_1.select(); return;}"></td>
        </tr>
            <tr id="grounds2" class="gray">    <td width="5" valign="top">&nbsp;</td>
                <td width="50" valign="top" align="center">
                <b><font color="#FF0000">2</font></b></td>
                <td width="585"><textarea name="row_2" cols="100" rows="5" onclick="select()" >Note:</textarea></td>
                <td align="center" valign="top">
                <input type="button" class="button" value="+" name="GD_2" onclick="if(document.Q_note.row_2.value !=='Note:')
                {show('grounds3', true ); document.Q_note.row_3.select();} else { myAlert();show('grounds2',false);}"></td>
            </tr>
        </span>
    </table> 

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Simple solution: don’t use a table at all. I’m sure it’s not correct in this context anyway. With divisions page breaks are much easier as the occur automatically according to the height of an element and the available height on the page – and it would be semantically correct.

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    311
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Okay, Thanks VIPStephan,
    I'll consider re-thinking 800 lines of code and the script to hide the empty rows (see below), but what's really piqued my curriosity now is your assertion that...
    I’m sure it’s not correct in this context anyway.
    Please explain.
    The following was my best effort at collapsing the sections to hide un-used rows. Not sure how to go about differently (non-table layout). Any thoughts?
    PHP Code:
    <script language="JavaScript">

    function 
    showNotes() {
    var 
    tbl,rows;
        if(
    document.getElementById && document.getElementsByTagName) {
            
    tbl document.getElementById('table1');
            
    rows tbl.getElementsByTagName('tr');
            } 
        for(var 
    i=1;i<rows.length;i++) {
            var 
    rowID=rows[i].id;
            
    //alert(rowID);
            
    if((document.Q_note.elements['row_'+(i)].value == 'Note:'
                && (
    rows[i].className !='headerRow')
                    && (
    rows[i].className !='headerRow gray')) {
            
    document.getElementById(rowID).style.display='none';
            } 
         }
    }
    function 
    myAlert(){
    alert('No notes. Hiding This Row.');
    }
    </script> 
    Last edited by fuzzy1; 05-09-2008 at 05:29 PM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    How about making the rows like http://www.webcredible.co.uk/user-fr...ss-forms.shtml
    and wrap the required rows inside a div instead of span ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Apr 2006
    Posts
    311
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Thank You abduraooft,
    I have visited http://www.webcredible.co.uk/user-fr...ss-forms.shtml in the past for tips on forms style, but I'm not clear on your meaning in I see no "rows" in the source code there. Cetrainly, wraping the rows with DIV tags was my first impulse, but I don't think it possible to wrap my table "sections" (group of rows) with a DIV as with a SPAN? (only within cells?)

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    They have used <p></p> instead of table's <tr></tr>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Apr 2006
    Posts
    311
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Thanks Again abduraooft,
    It's been a while since I had any opportunity to focus on this.
    I have worked out an alternative employing both <div><p></div>
    and while the code is admitadly cleaner than my table approach,
    the result is only a marginal improvement in terms of printablility.

    For anyone who might stumble across this post looking for a similar solution,
    it seems that the browsers just aren't quite ready for robust print media complete with headers, footers etc. Looking now into the possibliity of a php work around. I will post if I find a suitable solution.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •