Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #9537 > unrolled thread

iPad2 Scroll Bars ??

Back to article view | Back to comp.lang.javascript

Contents

  iPad2 Scroll Bars ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2011-12-22 11:19 -0700
    Re: iPad2 Scroll Bars ?? "Evertjan." <exjxw.hannivoort@interxnl.net> - 2011-12-22 19:19 +0000
      Re: iPad2 Scroll Bars ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2011-12-22 12:54 -0700
        Re: iPad2 Scroll Bars ?? "Evertjan." <exjxw.hannivoort@interxnl.net> - 2011-12-22 20:23 +0000
          Re: iPad2 Scroll Bars ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2011-12-22 14:55 -0700
            Re: iPad2 Scroll Bars ?? "Evertjan." <exjxw.hannivoort@interxnl.net> - 2011-12-22 22:32 +0000
            Re: iPad2 Scroll Bars ?? Andrew Poulos <ap_prog@hotmail.com> - 2011-12-23 09:43 +1100
            Re: iPad2 Scroll Bars ?? Arno Welzel <usenet@arnowelzel.de> - 2011-12-23 14:56 +0100
              Re: iPad2 Scroll Bars ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2011-12-23 08:54 -0700
    Re: iPad2 Scroll Bars ?? Dr J R Stockton <reply1151@merlyn.demon.co.uk> - 2011-12-23 20:18 +0000
      Re: iPad2 Scroll Bars ?? Andrew Poulos <ap_prog@hotmail.com> - 2011-12-24 11:56 +1100
      Re: iPad2 Scroll Bars ?? "Evertjan." <exjxw.hannivoort@interxnl.net> - 2011-12-24 09:01 +0000
        Re: iPad2 Scroll Bars ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2011-12-24 11:56 -0700

#9537 — iPad2 Scroll Bars ??

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

[toc] | [next] | [standalone]

#9539

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)

[toc] | [prev] | [next] | [standalone]

#9542

"Evertjan." <exjxw.hannivoort@interxnl.net> 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
 

[toc] | [prev] | [next] | [standalone]

#9544

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

> 
> "Evertjan." <exjxw.hannivoort@interxnl.net> 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)

[toc] | [prev] | [next] | [standalone]

#9547

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

[toc] | [prev] | [next] | [standalone]

#9548

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)

[toc] | [prev] | [next] | [standalone]

#9549

On 23/12/2011 8:55 AM, Mel Smith wrote:
> 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).

I am not one of your users but I doubt that anyone could be *happy* 
about having to browse a 600+ row table looking for specific information.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#9558

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

[toc] | [prev] | [next] | [standalone]

#9559

Evertjan, Andrew, and Arno:

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

Happy 'Tabling' too !

--
Mel Smith

[toc] | [prev] | [next] | [standalone]

#9567

In comp.lang.javascript message <9lhalvFvm9U1@mid.individual.net>, Thu,
22 Dec 2011 11:19:41, Mel Smith <med_cutout_syntel@aol.com> 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.

[toc] | [prev] | [next] | [standalone]

#9568

On 24/12/2011 7:18 AM, Dr J R Stockton wrote:
> In comp.lang.javascript message<9lhalvFvm9U1@mid.individual.net>, Thu,
> 22 Dec 2011 11:19:41, Mel Smith<med_cutout_syntel@aol.com>  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).
>
Android sticks the alphabet vertically on the right-hand edge. By 
touching a letter you can go to that part of the list that starts with 
the letter you touched.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#9570

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

> In comp.lang.javascript message <9lhalvFvm9U1@mid.individual.net>,
> Thu, 22 Dec 2011 11:19:41, Mel Smith <med_cutout_syntel@aol.com>
> 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)

[toc] | [prev] | [next] | [standalone]

#9585

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
// denismfmcmahon@gmail.com
// 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[i];
   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[i].cells ;
    theCells[0].innerHTML = allData[i].lotno;
    theCells[1].innerHTML = allData[i].parcel;
    theCells[2].innerHTML = allData[i].addr;
    theCells[3].innerHTML = allData[i].occcode;
    theCells[4].innerHTML = allData[i].lotstatus;
    theCells[5].innerHTML = allData[i].ownname;
    theCells[6].innerHTML = allData[i].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[i].lot === searchVal) {
      t1.rows[i].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[i].parcel.indexOf(searchText) === 0) { // try and match on 
start of Parcel Number/Text
       t1.rows[i].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[i].surname.toLowerCase().indexOf(searchText) === 0) { // try 
and match on start of name text
      t1.rows[i].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[i].add.toLowerCase() ;
    if (allData[i].addr.toLowerCase().indexOf(searchText) === 0) { // try 
and match on start of field
      t1.rows[i].scrollIntoView(true);
      return;
    }
  }
  for (i = 0; i < allData.length; i = i + 1) {
    street = allData[i].add.toLowerCase() ;
    if (allData[i].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>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web