iPad2 Scroll Bars ??

Discussion in 'Javascript' started by Mel Smith, Dec 22, 2011.

  1. Mel Smith

    Mel Smith Guest

    Hi:

    Is there any way using Javascript to force Safari for mobile
    devices to display scroll bars beside a table when vertical content
    overflows ?

    (I have a 613-row table that is agonizing to vertically scroll using the
    one-finger swiping method)

    (btw, I posted this wrongly in the authoring.html group earlier )

    Thanks,

    --
    Mel Smith
     
    Mel Smith, Dec 22, 2011
    #1
    1. Advertising

  2. Mel Smith

    Evertjan. Guest

    Mel Smith wrote on 22 dec 2011 in comp.lang.javascript:

    > (I have a 613-row table that is agonizing to vertically scroll using the
    > one-finger swiping method)


    613??

    Better think of a more friendly alternative for any browser.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Dec 22, 2011
    #2
    1. Advertising

  3. Mel Smith

    Mel Smith Guest

    "Evertjan." <> wrote in message
    news:Xns9FC3CECB6351Eeejj99@194.109.133.133...
    > Mel Smith wrote on 22 dec 2011 in comp.lang.javascript:
    >
    >> (I have a 613-row table that is agonizing to vertically scroll using the
    >> one-finger swiping method)

    >
    > 613??
    >
    > Better think of a more friendly alternative for any browser.



    Well, I have 613 Homes in my Senior's Park, and a line for each home (7
    columns), so it works perfectly with a scroll bar, and a few search fields
    and sorting methods based on Denis McMahon's Javascript methods for sorting.

    So, when a user wishes to got to the bottom (or top) of the table (based
    on 1 of 4 different sorting columns/methods), a quick slide of the scroll
    bar is easy.

    But, with no Scroll bar, you can wear out your finger *and* patience !

    -Mel
     
    Mel Smith, Dec 22, 2011
    #3
  4. Mel Smith

    Evertjan. Guest

    Mel Smith wrote on 22 dec 2011 in comp.lang.javascript:

    >
    > "Evertjan." <> wrote in message
    > news:Xns9FC3CECB6351Eeejj99@194.109.133.133...
    >> Mel Smith wrote on 22 dec 2011 in comp.lang.javascript:
    >>
    >>> (I have a 613-row table that is agonizing to vertically scroll using
    >>> the one-finger swiping method)

    >>
    >> 613??
    >>
    >> Better think of a more friendly alternative for any browser.

    >
    >
    > Well, I have 613 Homes in my Senior's Park, and a line for each
    > home (7 columns), so it works perfectly with a scroll bar



    To view 7 fields on a line is not an easy way to view a record.
    HTML gives much easier viewable ways of formatting a record.

    Why not give the viewer choices of diaplay?

    > and a few search
    > fields and sorting methods based on Denis McMahon's Javascript methods
    > for sorting.


    "it works perfectly"?

    Your Q shows it does not.

    A list of 613 lines can better, IMHO, be devided in smaaler groups, by
    first letter or by adress or by age, according to the wishes of the
    viewer. Serverside SQL search is perfect for the job.

    > So, when a user wishes to got to the bottom (or top) of the table
    > (based on 1 of 4 different sorting columns/methods),
    > a quick slide of the scroll bar is easy.


    Only in certain browsers perhaps, as your Q shows.

    But why should a user want to go to the top or the bottom,
    there are much more informative ways to show a selection.

    > But, with no Scroll bar, you can wear out your finger *and*
    > patience !


    Quite, that is also an argument not to use scrolling lists of such
    length, there are better ways to show a selection.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Dec 22, 2011
    #4
  5. Mel Smith

    Mel Smith Guest

    Evertjan said:

    >
    > To view 7 fields on a line is not an easy way to view a record.
    > HTML gives much easier viewable ways of formatting a record.
    >
    > Why not give the viewer choices of diaplay?
    >
    >> and a few search
    >> fields and sorting methods based on Denis McMahon's Javascript methods
    >> for sorting.

    >
    > "it works perfectly"?
    >
    > Your Q shows it does not.
    >
    > A list of 613 lines can better, IMHO, be devided in smaaler groups, by
    > first letter or by adress or by age, according to the wishes of the
    > viewer. Serverside SQL search is perfect for the job.
    >
    >> So, when a user wishes to got to the bottom (or top) of the table
    >> (based on 1 of 4 different sorting columns/methods),
    >> a quick slide of the scroll bar is easy.

    >
    > Only in certain browsers perhaps, as your Q shows.


    *Certain Browsers * ???

    I've tested my table on Safari (for PC's), Chrome, FireFox, Opera, IE 7
    and 9. All have scroll bars.

    I have an iPad 2, and it is the only one of my tested group that does
    not have scroll bars (altho I would assume that other mobile devices may not
    have the scroll bars either).




    >
    > But why should a user want to go to the top or the bottom,
    > there are much more informative ways to show a selection.
    >
    >> But, with no Scroll bar, you can wear out your finger *and*
    >> patience !

    >
    > Quite, that is also an argument not to use scrolling lists of such
    > length, there are better ways to show a selection.
    >


    *of such length* ?!?

    You may (or may not) be interested in taking a look at the first page of
    my www.frostdelay.com site. THe table on the 1st page has in excess of
    *5000* lines and approx 5 columns. This is what I could call 'lengthy'.

    The current table I'm working on has 613 rows - a pipsqueak by
    comparison. Both of these tables are managed from my CGI server (which is a
    C-based executable with a complete and extensive database backend (see
    www.whosaway.com) )

    Anyway, thanks for the response. My users are very happy with my tables
    (thanks to the help from Denis McMahon).

    -Mel
     
    Mel Smith, Dec 22, 2011
    #5
  6. Mel Smith

    Evertjan. Guest

    Mel Smith wrote on 22 dec 2011 in comp.lang.javascript:

    > Evertjan said:
    >
    >>
    >> To view 7 fields on a line is not an easy way to view a record.
    >> HTML gives much easier viewable ways of formatting a record.
    >>
    >> Why not give the viewer choices of diaplay?
    >>
    >>> and a few search
    >>> fields and sorting methods based on Denis McMahon's Javascript
    >>> methods for sorting.

    >>
    >> "it works perfectly"?
    >>
    >> Your Q shows it does not.
    >>
    >> A list of 613 lines can better, IMHO, be devided in smaaler groups,
    >> by first letter or by adress or by age, according to the wishes of
    >> the viewer. Serverside SQL search is perfect for the job.
    >>
    >>> So, when a user wishes to got to the bottom (or top) of the table
    >>> (based on 1 of 4 different sorting columns/methods),
    >>> a quick slide of the scroll bar is easy.

    >>
    >> Only in certain browsers perhaps, as your Q shows.

    >
    > *Certain Browsers * ???
    >
    > I've tested my table on Safari (for PC's), Chrome, FireFox, Opera,
    > IE 7
    > and 9. All have scroll bars.
    >
    > I have an iPad 2, and it is the only one of my tested group that
    > does
    > not have scroll bars (altho I would assume that other mobile devices
    > may not have the scroll bars either).


    But your Q shows you are not happy with only "Safari (for PC's), Chrome,
    FireFox, Opera, IE 7 and 9"

    So you should listen to yourslef, arguing that some important browsers do
    not apply.


    >> But why should a user want to go to the top or the bottom,
    >> there are much more informative ways to show a selection.
    >>
    >>> But, with no Scroll bar, you can wear out your finger *and*
    >>> patience !

    >>
    >> Quite, that is also an argument not to use scrolling lists of such
    >> length, there are better ways to show a selection.
    >>

    >
    > *of such length* ?!?
    >
    > You may (or may not) be interested in taking a look at the first
    > page of
    > my www.frostdelay.com site. THe table on the 1st page has in excess of
    > *5000* lines and approx 5 columns. This is what I could call
    > 'lengthy'.


    I think that you do not give your users optimal posssibilties.

    > The current table I'm working on has 613 rows - a pipsqueak by
    > comparison. Both of these tables are managed from my CGI server
    > (which is a C-based executable with a complete and extensive database
    > backend (see www.whosaway.com) )


    Any serverside coding can deliver subsets via SQL.

    > Anyway, thanks for the response. My users are very happy with my
    > tables
    > (thanks to the help from Denis McMahon).


    I do not understand why the help of Denis McMahon makes your users happy.

    The fact that your users are happy can also mean that they are easily
    happy, because they do not know html and coding can give much better
    readability and subset query selection than the terrible excel-like
    layout you probably give them.

    It is the task of the programmer [you!?] to make use of the best
    possiblities display and selection technique offers, as imho, that is not
    doubling Excel with lists od 613 rows, even though this is just the exact
    number of commandmants in Jewish law.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Dec 22, 2011
    #6
  7. Mel Smith

    Arno Welzel Guest

    Mel Smith, 2011-12-22 22:55:

    > Evertjan said:
    >

    [...]
    >> Quite, that is also an argument not to use scrolling lists of such
    >> length, there are better ways to show a selection.
    >>

    >
    > *of such length* ?!?


    If you assume 60 lines per page on a printout this would be 10(!) pages
    or information.

    You don't call this a long list?

    > You may (or may not) be interested in taking a look at the first page of
    > my www.frostdelay.com site. THe table on the 1st page has in excess of
    > *5000* lines and approx 5 columns. This is what I could call 'lengthy'.


    So what? Because there are more examples of bad presentation of
    information this makes your over 600 line long list better?

    > The current table I'm working on has 613 rows - a pipsqueak by
    > comparison. Both of these tables are managed from my CGI server (which is a
    > C-based executable with a complete and extensive database backend (see
    > www.whosaway.com) )
    >
    > Anyway, thanks for the response. My users are very happy with my tables
    > (thanks to the help from Denis McMahon).


    If your users are happy with those tables anyway - what's your problem?

    But *if* you want to find a better way to present 613 lines of
    information you *should* consider better ways than just putting 613
    lines into a single block.

    For example: You could use JavaScript to calculate how much lines fit in
    the viewport (without the space for the navigation, header etc.) and
    create a pagewise navigation. The navigation sould be kept visible in
    the viewport and it would be very helpful to have more than just numbers
    - maybe the first letter of the primary sort field.

    This way a user could get to *any* point of the data with *one* click
    (or tap) and without moving a scrollbar around or swiping on the display.

    If you extend this by event handlers to handle the up/down keys to allow
    navigating using the keyboard, it would be even more comfortable.




    --
    Arno Welzel
    http://arnowelzel.de
    http://de-rec-fahrrad.de
     
    Arno Welzel, Dec 23, 2011
    #7
  8. Mel Smith

    Mel Smith Guest

    Evertjan, Andrew, and Arno:

    Thanks for your comments and Merry Christmas to y'all.

    Happy 'Tabling' too !

    --
    Mel Smith
     
    Mel Smith, Dec 23, 2011
    #8
  9. In comp.lang.javascript message <>, Thu,
    22 Dec 2011 11:19:41, Mel Smith <> posted:

    > Is there any way using Javascript to force Safari for mobile
    >devices to display scroll bars beside a table when vertical content
    >overflows ?
    >
    > (I have a 613-row table that is agonizing to vertically scroll using the
    >one-finger swiping method)


    If space permits, you could show buttons to move up/down by, say, +/-100
    & +-10 lines, which may well be less painful.

    If searching through a list of names, you could also shift by +-1 place
    in the first letter (max +-13, if it rolls A-Z Z-A, then +-1 in the
    second letter. It might or might not help to skip absent combinations
    (few names begin Qg, for example).

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05.
    Website <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
    PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
    Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.
     
    Dr J R Stockton, Dec 23, 2011
    #9
  10. Mel Smith

    Evertjan. Guest

    Dr J R Stockton wrote on 23 dec 2011 in comp.lang.javascript:

    > In comp.lang.javascript message <>,
    > Thu, 22 Dec 2011 11:19:41, Mel Smith <>
    > posted:
    >
    >> Is there any way using Javascript to force Safari for mobile
    >>devices to display scroll bars beside a table when vertical content
    >>overflows ?
    >>
    >> (I have a 613-row table that is agonizing to vertically scroll
    >> using the
    >>one-finger swiping method)

    >
    > If space permits, you could show buttons to move up/down by, say,
    > +/-100 & +-10 lines, which may well be less painful.
    >
    > If searching through a list of names, you could also shift by +-1
    > place in the first letter (max +-13, if it rolls A-Z Z-A, then +-1 in
    > the second letter. It might or might not help to skip absent
    > combinations (few names begin Qg, for example).


    This is only true if you think the user just wants to scan visually
    though the "list", like a paper phone-book we once used long ago,
    and which excel-lovers still want to implement.

    Scripting, imho serverside, can and should do better.

    Methinks the user also or primarily wants to view a single entry or a
    subgroup of entries with a common feature, like street-address or
    agegroup or last-name.

    So give the user some selective options on the individual fields or even
    on a combination of fields or perhaps a substring on any field.

    The programmer should not just ask what the user wants, but offer him or
    her solutions never dreamed of and perferably monitor what of those
    solutions are in fact used. The programmer should act upon the monitoring
    by removing the not used ones or making them more logical to the users
    mind.

    If the returned subset is small enough, a list is not even a nice way of
    showing the results. multiline blocks could be much better readable, if
    they fit in one pageview without scrolling.


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Dec 24, 2011
    #10
  11. Mel Smith

    Mel Smith Guest

    Hi all:

    I've taken my 613 line table, shrunk it to about 10 lines, then obscured
    the data so that my sort, and searching don't work on this test.

    But anyway, trhe screen *should* show for you, and you might get a
    picture of what I'm doing.

    My next step is to use CSS (and display:none;) to filter the user's
    choice. Haven't got to that step yet, but will use Denis McMahon's
    suggestions and code from a year ago to do this

    Thanks for your suggestions, but I'm now skiing down to my own personal
    hell !

    I will put on my ski helment though to withstand your comments on my
    javascripting :)))

    -Mel Smith


    ************ A modified/restricted test version of my Lot Manager
    *****************

    <?xml version="1.0" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Lot Management System (LMS) -- Mesa East Park</title>

    <script src="/scripts/handler.js" type="text/javascript"></script>

    <style type="text/css" media="screen">

    body {
    background: greenyellow;
    }

    div#container {
    position: relative;
    top: 0px;
    height: 510px;
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    background: greenyellow;
    padding: 2px;
    border: 1px solid black;
    }


    div#headerrow {
    position: absolute;
    top: 10px;
    height: 45px;
    width: 910px;
    left: 50%;
    margin-left: -460px;
    margin-bottom: 0px;
    padding: 2px;
    overflow: auto;
    }

    div#tableselect {
    position: absolute;
    top: 57px;
    height: 200px;
    width: 910px;
    left: 50%;
    margin-left: -460px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 2px;
    overflow: auto;
    }

    div#editfields {
    position: absolute;
    top: 270px;
    height: 150px;
    width: 910px;
    left: 50%;
    margin-left: -455px;
    padding: 2px;
    /*border: 1px solid black;*/

    }


    table{ border-collapse: collapse; width: 870px; color: black; margin: auto;}
    table, tr, th, td{ border: 1px solid black; }
    th{cursor: pointer; background-color: #5898A3; }
    tr{background-color:#CDE1E4;}

    table#fixedheader {
    width: 870px;
    table-layout: fixed;
    border-collapse: collapse;
    color: black;
    }
    /*
    table#t1 {
    width: 870px;
    table-layout: fixed;
    border-collapse: collapse;
    color: black;
    }
    */

    div#buttons {
    position: absolute;
    bottom: 220px;
    width: 300px;
    height: 50px;
    left: 50%;
    margin: 0 0 0 -155px;
    color: black;
    background: greenyellow;
    }
    input#flotedit {
    top: 0px;
    color: black;
    background: lightgrey;
    }
    input#flotreset {
    top: 0px;
    color: red;
    background: lightgrey;
    }

    div#bottom-left {
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: 35px;
    color: red;
    }
    ..idnoemph {
    color: white;
    background: magenta;
    }
    ..pwdemph {
    color: white;
    background: magenta;
    }

    div#bottom-right-text {
    position: absolute;
    background: greenyellow;
    font-size: 12px;
    font-weight: bold;
    right: 2px;
    width: 200px;
    height: 8px;
    bottom: 6px;
    padding: 1px;
    text-align: right;
    }

    div#bottom {
    position: absolute;
    background: greenyellow;
    padding: 5px;
    width: 850px;
    height: 20px;
    bottom: 20px;
    left: 50%;
    margin: 0 0 0 -430px;
    border: 1px solid black;
    }

    </style>

    <script type="text/javascript">

    //
    // If this is a logged in lot owner, scroll to his editable lot data
    //

    var lSubmit = true ;
    var ncommapos ;
    var savorder = "L" ; // start off in Lot Order

    function chklotid(lot) {
    var lotid=document.getElementById(lot);

    if (lotid) {
    lotid.scrollIntoView();
    lotid:focus();
    }
    }

    function scrollTopBot(tb) {
    // maybe use this function later to accommodate
    // mobile devices without scroll bars
    var ord = savorder ;
    var el;

    switch(ord) {
    case "L": {
    el = (tb == "T") ? document.getElementById("ilot1") :
    document.getElementById("ilot613") ;
    el.scrollIntoView() ;
    break;
    }
    case "N": {
    break;
    }
    case "P": {
    break;
    }
    case "S": {
    break;
    }
    }
    }

    //
    // display manipulation according to search order
    //

    function showwaitmsg() {
    var el = document.getElementById("sorttext")
    el.style.color="white";
    el.style.background="red" ;
    el.value = " Sorting ... " ; // in IE, this doesn't display UNLESS you
    show an alert first
    return ;
    }

    function showorder(order) {
    var el = document.getElementById("sorttext")
    el.style.color = "yellow" ;
    el.style.background = "gray" ;

    var hdrel = document.getElementById("headerstr") ;

    if (order === "N" ) {
    el.value = "Owner's Name" ;
    hdrel.innerHTML = '<span
    style="color:yellow;background:gray;">&nbsp;(Homes in Owner Name
    Order)&nbsp;</span>'
    }
    else if (order === "L" ) {
    el.value = "Lot Number" ;
    hdrel.innerHTML = '<span
    style="color:yellow;background:gray;">&nbsp;(Homes in Lot Number
    Order)&nbsp;</span>'
    }
    else if (order === "A" ) {
    el.value = "Local Street Address" ;
    hdrel.innerHTML = '<span
    style="color:yellow;background:gray;">&nbsp;(Homes in Street Address
    Order)&nbsp;</span>'
    }
    else if (order === "P" ) {
    el.value = "APN (Parcel No.)" ;
    hdrel.innerHTML = '<span
    style="color:yellow;background:gray;">&nbsp;(Homes in Parcel No.
    Order)&nbsp;</span>'
    }
    else el.value = "Faulty Sorting !";

    // Now show the search box correctly
    //hbrel.style.color = "yellow" ;
    //hbrel.style.background = "gray" ;
    savorder = order ;
    return ;
    }
    function setfocus(elem) {
    var el;
    el = document.getElementById(elem);
    el.focus();
    }


    // ==================================================================
    //
    // Table Sort Functions by Denis McMahon
    //
    // coded March 2011
    //
    // ==================================================================

    // extract a name from a name cell's innerHTML
    function getName(cellText) {
    cellText = cellText.replace(/^<b>/,"");
    cellText = cellText.replace(/<\/b>$/,"");
    return cellText.replace(/&amp;/g,"&");
    }

    // extract a lot number from a lot cell innerHTML
    function getLot(cellText) {
    var matches, e;
    try {
    matches = cellText.match(/\d+/);
    if (matches.length === 1) {
    return parseInt(matches[0]);
    } else {
    return 9999999999;
    }
    } catch (e) {
    alert ("unable to extract Lot Number from: '" + cellText + "'");
    return 9999999999;
    }
    }

    // extract a parcel from a parcel cell's innerHTML
    function getPcl(cellText) {
    cellText = cellText.replace(/^<b>/,"");
    return cellText.replace(/<\/b>$/,"");
    }

    // extract a local address from celltext
    // expect number street
    // normalise to street number
    function getAddr(cellText) {
    cellText = cellText.replace(/&nbsp;/,"") ;
    cellText = cellText.replace(/<BR>&nbsp;/i," ") ;
    cellText = cellText.replace(/<BR>/i," ") ;
    cellText = cellText.replace(/[SE]\. /i,"") ;
    var re, bits;
    if (cellText === "&nbsp;") {
    return "zzzzzzzzzz";
    }
    re = /(\d+) ([A-Z0-9].*) ?(\d+)?/;
    bits = cellText.match(re);
    if (bits === null || bits.length < 2 || bits[1] === null || bits[2] ===
    null) {
    alert ("unable to extract Address from: '" + cellText + "'");
    return "zzzzzzzzzz";
    }
    return bits[2] + " " + bits[1];
    }

    // lotData is a data object for a member
    function lotData(lotno,parcel,addr,occcode,lotstatus,ownname,notes) {
    // store the extracted keys that we use for array sorting
    this.name = getName(ownname);
    this.lot = getLot(lotno);
    this.pcl = getPcl(parcel);
    this.add = getAddr(addr);
    // store the cell contents

    this.ownname = ownname;
    // now dig out the surname of this top=level owner
    ncommapos = this.ownname.indexOf(",")
    if (ncommapos > 0 ) {
    this.surname = this.ownname.substring(0,ncommapos) ;
    } else {
    this.surname = this.ownname ;
    }
    this.addr = addr;
    this.lotno = lotno;
    this.parcel = parcel;
    this.occcode = occcode;
    this.lotstatus = lotstatus;
    this.notes = notes;
    }

    // compare two data records by name, ascending order, with null last
    function cmpName(x, y) {
    if (x.ownname === y.ownname) return 0;
    return (x.ownname > y.ownname) ? 1 : -1;
    }


    // compare two data records by lot, ascending, if an entry is 0 or null it
    goes at the end
    function cmpLot(x, y) {
    if (x.lot === y.lot) return 0;
    return (x.lot > y.lot) ? 1 : -1;
    }

    function cmpPcl(x, y) {
    if (x.pcl === y.pcl) return 0;
    return (x.pcl > y.pcl) ? 1 : -1;
    }

    // compare two data records by address, ascending, if an entry is 0 or null
    it goes at the end
    function cmpAdd(x, y) {
    if (x.add === y.add) return 0;
    return (x.add > y.add) ? 1 : -1;
    }

    var allData = new Array();

    // extract the data from the table - called from body onload event

    function extractTableData() {
    var t1, rows, cells, theRow, theCell, theCellData ;
    var i,j
    var clotno, caddr, cocccode, clotstatus, cownname, cnotes ;
    var lotdata;
    t1 = document.getElementById("t1");
    rows = t1.rows;
    // start at '1' below to bypass header of table
    for (i = 0; i < rows.length-1; i = i + 1) {
    theRow = rows;
    cells = theRow.cells;
    clotno = cells[0].innerHTML ;
    cparcel= cells[1].innerHTML ;
    caddr = cells[2].innerHTML ;
    cocccode = cells[3].innerHTML ;
    clotstatus = cells[4].innerHTML ;
    cownname = cells[5].innerHTML ;
    cnotes = cells[6].innerHTML ;
    lotdata = new
    lotData(clotno,cparcel,caddr,cocccode,clotstatus,cownname,cnotes);
    allData.push(lotdata);
    clotno = cparcel= caddr = cocccode = clotstatus = cownname = cnotes =
    null;
    }
    }

    // build the table from the sorted data
    function rebuildTable() {
    var t1, theCells,i;
    t1 = document.getElementById("t1");
    for (i = 0; i < allData.length; i = i + 1) {
    theCells = t1.rows.cells ;
    theCells[0].innerHTML = allData.lotno;
    theCells[1].innerHTML = allData.parcel;
    theCells[2].innerHTML = allData.addr;
    theCells[3].innerHTML = allData.occcode;
    theCells[4].innerHTML = allData.lotstatus;
    theCells[5].innerHTML = allData.ownname;
    theCells[6].innerHTML = allData.notes;
    }
    }

    // handle sort button click events
    function sortName() {
    // sort the table by name ascending
    showwaitmsg();
    setTimeout("sortit(cmpName,'N')",200) ;
    }
    // handle sort button click events
    function sortLot() {
    // sort the table by lot ascending
    showwaitmsg();
    setTimeout("sortit(cmpLot,'L')",200) ;
    }

    function sortPcl() {
    // sort the table by lot ascending
    showwaitmsg();
    setTimeout("sortit(cmpPcl,'P')",200) ;
    }

    // handle sort button click events
    function sortAddr() {
    // sort the table by addr ascending
    showwaitmsg();
    setTimeout("sortit(cmpAdd,'A')",200) ;
    }

    function sortit(sortfunc,sortord) {
    allData.sort(sortfunc) ;
    rebuildTable() ;
    showorder(sortord) ;
    }

    // search for a lot number
    // assumes the user types in a number
    function findLot(textBox) {
    var searchText, i, t1, searchVal;

    t1 = document.getElementById("t1");
    searchText = textBox.value;
    if (searchText === "") {
    t1.rows[0].scrollIntoView(true);
    return false;
    }

    searchVal = parseInt(searchText); // convert text to lot number
    if (isNaN(searchVal)) { // conversion failure - illegal characters in
    textBox?
    alert("Sorry, but '" + textBox.value + "' doesn't seem to be a lot
    number.");
    textBox.value = ""; // empty textBox
    t1.rows[0].scrollIntoView(true); // scroll to top of table
    return false;
    }

    for (i = 0; i < allData.length; i = i + 1) {
    if (allData.lot === searchVal) {
    t1.rows.scrollIntoView(true);
    return false;
    }
    }
    alert("Sorry, but '" + textBox.value + "' doesn't match any Lot Number.");
    textBox.value = "";
    t1.rows[0].scrollIntoView(true);
    return false;
    }

    function findPcl(textBox) {
    var searchText, i, t1, searchVal;
    var p;

    t1 = document.getElementById("t1");
    searchText = textBox.value;
    if (searchText === "") {
    t1.rows[0].scrollIntoView(true);
    return false;
    }

    for (i = 0; i < allData.length; i = i + 1) {
    if (allData.parcel.indexOf(searchText) === 0) { // try and match on
    start of Parcel Number/Text
    t1.rows.scrollIntoView(true);
    return false;
    }
    }
    alert("Sorry, but '" + textBox.value + "' doesn't match any APN Number.");
    textBox.value = "";
    t1.rows[0].scrollIntoView(true);
    return false;
    }

    // search for a name
    function findName(textBox) {
    var searchText, i, t1, csurname;
    t1 = document.getElementById("t1"); // we will want to scroll the table to
    the found row
    searchText = textBox.value.toLowerCase(); // the text to search for
    if (searchText === "") { // search text is empty
    t1.rows[0].scrollIntoView(true); // scroll to top of table
    return;
    }

    for (i = 0; i < allData.length; i = i + 1) { // start at the first record
    if (allData.surname.toLowerCase().indexOf(searchText) === 0) { // try
    and match on start of name text
    t1.rows.scrollIntoView(true); // calculate the row to scroll to,
    scroll to it
    return;
    }
    }

    // if it reaches here, the search term wasn't found
    alert("Sorry, but '" + textBox.value + "' doesn't match any Surname."); //
    give an alert
    textBox.value = ""; // clear the text box
    t1.rows[0].scrollIntoView(true); // scroll to top of table
    }

    // search for an address
    // first tries to match on start of field (house numbers) eg "nnnn s. blah"
    // then tries to match on whole address eg street names "blah"
    function findAddr(textBox) {
    var searchText, i, t1,street;
    t1 = document.getElementById("t1");
    searchText = textBox.value.toLowerCase();
    if (searchText === "") {
    t1.rows[0].scrollIntoView(true);
    return;
    }
    for (i = 0; i < allData.length; i = i + 1) {
    street = allData.add.toLowerCase() ;
    if (allData.addr.toLowerCase().indexOf(searchText) === 0) { // try
    and match on start of field
    t1.rows.scrollIntoView(true);
    return;
    }
    }
    for (i = 0; i < allData.length; i = i + 1) {
    street = allData.add.toLowerCase() ;
    if (allData.addr.toLowerCase().indexOf(searchText) > 0) { // then try
    and match anywhere in field
    t1.rows[i].scrollIntoView(true);
    return;
    }
    }
    alert("Sorry, but '" + textBox.value + "' doesn't match any address.");
    textBox.value = "";
    t1.rows[0].scrollIntoView(true);
    }

    function alltrim(str) {
    return str.replace(/^\s+|\s+$/g,"") ;
    }

    function partof(c,str) {
    if (str.indexOf(c) != -1) return true ;
    else return false ;
    }

    function clearFilter(cfilt) {
    // This function clears non-needed filters
    var checks = document.getElementsByName("homestatus") ;
    var lenchecks = checks.length ;
    var check ;

    if (cfilt == "REST") {
    for (var i=1;i<lenchecks;i++) {
    check = checks[i] ;
    check.checked = false ;
    }
    }

    if (cfilt == "ALL") {
    check = checks[0] ;
    check.checked = false ;
    }
    }

    function setFilter(cfilt) {
    var checks = document.getElementsByName("homestatus") ;
    var lenchecks = checks.length ;
    var check,clearfilt ;
    clearfilt = false ;
    if (cfilt == "0") {
    return true ;
    }
    if (cfilt == "ALL") clearfilt = true;

    for (var i=0;i<lenchecks;i++) {
    check = checks[i] ;
    if (clearfilt) {
    if (i == 0) check.checked = true ;
    else check.checked = false ;
    }
    else {
    }
    }
    }

    function goFilter() {
    window.alert("Start filtering Operations now.") ;
    }

    function setforsrch(cfld,cvalue) {
    var el;
    lSubmit = false ;
    if (cfld === "L") {
    sortLot() ;
    el = document.getElementById("isrchlot") ;
    el.value = cvalue ;
    if (cvalue >= "1" && cvalue <= "613")
    findLot(document.getElementById("isrchlot")) ;
    el.focus() ;
    return;
    } ;
    if (cfld === "P") {
    sortPcl() ;
    el = document.getElementById("isrchpcl") ;
    el.value = cvalue ;
    if (cvalue >= "0" && cvalue <= "622")
    findPcl(document.getElementById("isrchpcl")) ;
    el.focus() ;
    return;
    } ;
    if (cfld === "N") {
    sortName() ;
    el = document.getElementById("isrchname") ;
    el.value = cvalue ;
    if (cvalue.toUpperCase() >= "A" && cvalue.toUpperCase() <= "Z")
    findName(document.getElementById("isrchname")) ;
    el.focus() ;
    return;
    } ;
    if (cfld === "S") {
    sortAddr() ;
    el = document.getElementById("isrchstreet") ;
    el.value = cvalue ;
    if (cvalue >= "72" && cvalue.toUpperCase() <= "BRAMBLE")
    findAddr(document.getElementById("isrchstreet")) ;
    el.focus() ;
    return;
    } ;
    }

    function validate() {
    return true;
    }


    // ==================================================================

    </script>
    </head>
    <body
    onload="chklotid('ilot1');extractTableData();showorder('L');setFilter('0');setfocus('isrchlot');">
    <h3 align="center" style="padding-bottom:2px;margin-bottom:2px;font-family:
    sans-serif;"><u>Lot Management System (LMS) -- Mesa East
    Park</u></style></h3>
    <h4 style="margin-top:0px;margin-bottom:4px;" id="headerstr"
    align="center"><span style="color:yellow;background:gray;">&nbsp;(Homes in
    Lot Number Order)&nbsp;</span></h3>
    <div id="container">
    <form id="ilotmgr" name="lotmgr" action="/cgi-bin/mep/mepinit.exe"
    method="post" onsubmit="return validate();">
    <input type="hidden" id="mformname" name="formname" value="LOTMGR" />

    <div id="headerrow">
    <table id="fixedheader" align="left">
    <thead>
    <tr>
    <th align="center" width="6%" ><u>Edit<br />Lot</u></th>
    <th align="center" width="5%" ><u>APN</u><br /><span
    style="font-size:x-small;color:white;background:black;">&nbsp;218-18-&nbsp;</span></th>
    <th align="center" width="15%"><u>Street No.&nbsp;/<br
    />Name</u></th>
    <th align="center" width="5%"><u>Occ.<br />Code</u></th>
    <th align="center" width="8%" ><u>Home<br />Status</u></th>
    <th align="center" width="20%" ><u>Owner<br />Surname,
    Init</u></th>
    <th align="center" width="40%"><u>Away Addresses, Email, &amp;
    Notes</u></th>
    </tr>
    </thead>
    </table>
    </div>
    <div id="tableselect">
    <table id="t1" align="left">
    <tfoot>
    <tr>
    <th align="center" width="6%" >&nbsp;</th>
    <th align="center" width="5%" >&nbsp;</th>
    <th align="center" width="15%"><u>End of Lots</u></th>
    <th align="center" width="5%">&nbsp;</th>
    <th align="center" width="8%" >&nbsp;</th>
    <th align="center" width="20%" >&nbsp;</th>
    <th align="center" width="40%">&nbsp;</th>
    </tr>
    </tfoot>
    <tbody>
    <tr id="ilot99"><td align="center"><input type="submit" id="x99"
    size="4" name="lotno" value="99" /></td><td align="center">100</td><td
    style="padding-left:5px;">7453 E.<br />Balmoral Ave.</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Pickart, <br />Bryce&nbsp;&amp;&nbsp;Jayne</td><td
    style="padding-left:5px;">10812 Clifton Ave, Burnsville, MA 55337</td></tr>
    <tr id="ilot100"><td align="center"><input type="submit" id="x100"
    size="4" name="lotno" value="100" /></td><td align="center">101</td><td
    style="padding-left:5px;">324 S.<br />75th Way</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Shiw, <br />Dotty</td><td
    style="padding-left:5px;">Park Regency, PR #1014, 2555 N Sold Rd, Chandler,
    AZ 85283</td></tr>
    <tr id="ilot101"><td align="center"><input type="submit" id="x101"
    size="4" name="lotno" value="101" /></td><td align="center">102</td><td
    style="padding-left:5px;">325 S.<br />75th Way</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Smyth, <br
    />Michelle&nbsp;&amp;&nbsp;Suzanne</td><td
    style="padding-left:5px;"></td></tr>
    <tr id="ilot102"><td align="center"><input type="submit" id="x102"
    size="4" name="lotno" value="102" /></td><td align="center">103</td><td
    style="padding-left:5px;">326 S.<br />75th Way</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Mungino, <br />Jackohn
    Sr.,&nbsp;&amp;&nbsp;Theresa</td><td style="padding-left:5px;"></td></tr>
    <tr id="ilot103"><td align="center"><input type="submit" id="x103"
    size="4" name="lotno" value="103" /></td><td align="center">104</td><td
    style="padding-left:5px;">327 S.<br />75th Way</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Mitiska, <br
    />Lennie&nbsp;&amp;&nbsp;Betty</td><td style="padding-left:5px;">PO Box 296,
    Turndall, ND 57066</td></tr>
    <tr id="ilot104"><td align="center"><input type="submit" id="x104"
    size="4" name="lotno" value="104" /></td><td align="center">105</td><td
    style="padding-left:5px;">328 S.<br />75th Way</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Hudsen, <br />Girl&nbsp;&amp;&nbsp;Verlyn</td><td
    style="padding-left:5px;">940 E. 2nd St., Bridgestone, SD 57420</td></tr>
    <tr id="ilot105"><td align="center"><input type="submit" id="x105"
    size="4" name="lotno" value="105" /></td><td align="center">106</td><td
    style="padding-left:5px;">329 S.<br />75th Way</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Willward, <br />Nanny</td><td
    style="padding-left:5px;"></td></tr>
    <tr id="ilot106"><td align="center"><input type="submit" id="x106"
    size="4" name="lotno" value="106" /></td><td align="center">107</td><td
    style="padding-left:5px;">330 S.<br />75th Way</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Summer, <br
    />Raymond&nbsp;&amp;&nbsp;Ethel</td><td style="padding-left:5px;">Box 73,
    Clairmont, ID 67512</td></tr>
    <tr id="ilot107"><td align="center"><input type="submit" id="x107"
    size="4" name="lotno" value="107" /></td><td align="center">108</td><td
    style="padding-left:5px;">331 S.<br />75th Way</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Butther, <br />Charlene</td><td
    style="padding-left:5px;"></td></tr>
    <tr id="ilot613"><td align="center"><input type="submit" id="x613"
    size="4" name="lotno" value="613" /></td><td align="center">619</td><td
    style="padding-left:5px;">7222 E.<br />Aberate Ave.</td><td
    align="center">OO</td><td align="center"></td><td
    style="padding-left:5px;">Dickerson, <br />Donnie</td><td
    style="padding-left:5px;"></td></tr>
    </tbody>
    </table>
    </div>
    </form>

    <div id="editfields">
    <hr style="color:blue;background:white;" />
    Show Lot No.&nbsp;:&nbsp;<input type="text" id="isrchlot" name="srchlot"
    size="3" maxlength="3"
    onclick="setforsrch('L',this.value);" onkeyup="findLot(this);" value="" />
    Show APN No.&nbsp;:&nbsp;<input type="text" id="isrchpcl" name="srchpcl"
    size="5" maxlength="4"
    onclick="setforsrch('P',this.value);" onkeyup="findPcl(this);" value="" />
    &nbsp;&nbsp;Show Surname&nbsp;:&nbsp;<input type="text" id="isrchname"
    name="srchname" size="16" maxlength="14"
    onclick="setforsrch('N',this.value);" onkeyup="findName(this);" value="" />
    &nbsp;&nbsp;Show Street&nbsp;:&nbsp;<input type="text" id="isrchstreet"
    name="srchstreet" size="12" maxlength="9"
    onclick="setforsrch('S',this.value);" onkeyup="findAddr(this);" value="" />
    <br />
    <hr style="color:blue;background:white;" />
    Check/Uncheck Home Status Options below, then 'Filter' for display
    above&nbsp;:&nbsp;<br />
    <input type="checkbox" id="ihomestatus0" onclick="clearFilter('REST');"
    name="homestatus" value="ALL" checked="checked" />All Homes
    &nbsp;&nbsp;<span style="color:red;">OR</span>&nbsp;&nbsp;(&nbsp;&nbsp;
    <span style="color:black;font-size:larger;">
    <input type="checkbox" id="ihomestatus0" onclick="clearFilter('ALL');"
    name="homestatus" value="For Sale" />For Sale
    <input type="checkbox" id="ihomestatus1" onclick="clearFilter('ALL');"
    name="homestatus" value="Pending" />Pending
    <input type="checkbox" id="ihomestatus2" onclick="clearFilter('ALL');"
    name="homestatus" value="Sold" />Sold
    <input type="checkbox" id="ihomestatus3" onclick="clearFilter('ALL');"
    name="homestatus" value="For Rent" />For Rent
    <input type="checkbox" id="ihomestatus4" onclick="clearFilter('ALL');"
    name="homestatus" value="Rented" />Rented
    <input type="checkbox" id="ihomestatus5" onclick="clearFilter('ALL');"
    name="homestatus" value="For Lease" />For Lease
    <input type="checkbox" id="ihomestatus6" onclick="clearFilter('ALL');"
    name="homestatus" value="Leased" />Leased
    <input type="checkbox" id="ihomestatus7" onclick="clearFilter('ALL');"
    name="homestatus" value="Empty" />Empty
    &nbsp;&nbsp;)
    <br />
    <br />
    Click to Start Filtering&nbsp;:&nbsp;<input type="button" value="Filter"
    onclick="goFilter();" />
    </span>
    <hr style="color:blue;background:white;margin-bottom:0px;" />
    </div>

    <div id="bottom">
    Sort by:
    <input type="button" style="width:10em;" value="Lot Number"
    onclick="sortLot();" />
    <input type="button" style="width:10em;" value="APN(Parcel)"
    onclick="sortPcl();" />
    <input type="button" style="width:11em;" value="Owner's Name"
    onclick="sortName();" />
    <input type="button" style="width:11em;" value="Local Street Address"
    onclick="sortAddr();" />

    &nbsp;&nbsp;Sorted:&nbsp;<input type="text" readonly="readonly"
    id="sorttext"
    style="width:12em;font-weight:bold;color:yellow;background:gray;text-align:center;"value="Who Knows ?" /></div><div id='bottom-right-text'> &copy; 2011 Syntel Data Systems Ltd.&nbsp;</div></div></body></html>[/i][/i][/i]
     
    Mel Smith, Dec 24, 2011
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. S. Justin Gengo

    Re: DIVs and overflow scroll bars

    S. Justin Gengo, Jul 18, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    428
    S. Justin Gengo
    Jul 18, 2003
  2. rf
    Replies:
    0
    Views:
    447
  3. Paul F. Johnson
    Replies:
    4
    Views:
    350
  4. Dennis M. Marks

    More Problems - This time scroll bars

    Dennis M. Marks, Dec 1, 2003, in forum: HTML
    Replies:
    3
    Views:
    425
    Dennis M. Marks
    Dec 1, 2003
  5. UJ
    Replies:
    1
    Views:
    602
    John Timney \(MVP\)
    Nov 1, 2006
Loading...

Share This Page