Skip to main content

FREE web page list code !

 this is free, except for using up some of your most valuable asset, time. It is recommended that you have a working knowledge of regular expressions and JavaScript.

Here are some working examples:

(The buttons on the right take about five seconds.)

billionaires

 more billionaires

Start with a CSV file of your list data. Using the information below, turn your CSV data into a list.
 

copy CSV text to a new file in quick edit, or an editor that supports regex.
save this, but change the encoding to UTF-16BE, this is important for the next regex which will mess up some non-Latin characters in the default encoding.
regex search:
   (?m)^([^,]+),([^,]+),([^,]+),([^,]+),([^,]+),([^,]+)$
replace:
<a c="$6" href="http://www.google.com/search?q=$2 billionaire" n="$2" r="$1"><span class="big">$3</span> $2</a> $6 $4 $5

this turns the file into HTML links.

now you need the supporting html, css, and JavaScript.

 <script>
var sortby = 'n';
var prevOrder = 'r';

 function reverseList(){
var itemsArr = getPRElist();
itemsArr.reverse();
applyChanges(itemsArr);
}

 function sortOf(w){
sortby=w;
var itemsArr = getPRElist();

 itemsArr.sort(function(a, b) {
var aa;
var bb;
if (sortby == 'l'){
  aa = a.getAttribute('n').replace(/\s+$/, '').replace(' & Family', '');
  bb = b.getAttribute('n').replace(/\s+$/, '').replace(' & Family', '');
  lastIndexa = aa.lastIndexOf(' ');
  lastIndexb = bb.lastIndexOf(' ');
 if (lastIndexa < 0) lastIndexa =0;
 if (lastIndexb < 0) lastIndexb =0;

 aa = aa.substr(lastIndexa);
  bb = bb.substr(lastIndexb);

 }else{
  aa = a.getAttribute(sortby);
  bb = b.getAttribute(sortby);
}

if (sortby == 'c'){  

    if (aa == bb  && prevOrder == 'r'){
      var aprev = parseInt (a.getAttribute(prevOrder), 10);
      var bprev = parseInt (b.getAttribute(prevOrder), 10);
      if (aprev < bprev){
         aa += 'a';
         bb += 'b';
      } else {
         aa += 'b';
         bb += 'a';
      }
   } else {
     aa += a.getAttribute(prevOrder);
     bb += b.getAttribute(prevOrder);
   }
}  

 if (sortby == 'r'){
  return aa - bb;
}  

 return aa == bb
? 0
: (aa > bb ? 1 : -1);
});

 if(sortby=='r' || sortby=='n'){
  prevOrder = sortby;
}

 applyChanges(itemsArr);
}

 function addSpace(){
var bugger ='';
var list = document.getElementsByTagName('pre')[0].getElementsByTagName('small');
var items = list[0].childNodes;
alert ( items.length);

 for (i = 0; i < list[0].childNodes.length; ++i) {

 //bugger += i + 'name ' + items[i].nodeName + ' text: ' + items[i].text  + items[i].wholeText  + '\n';

 if (list[0].childNodes[i].nodeName.toLowerCase() === "#text")
{
list[0].childNodes[i].nodeValue +="\n";
}
}
// alert ( 'addSpace\n' + bugger);
}

 function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;

 // While there remain elements to shuffle...
while (0 !== currentIndex) {

 // Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

 // And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}

 return array;
}

 function getPRElist(){
var bugger ='';
var list = document.getElementsByTagName('pre')[0].getElementsByTagName('small');
var items = list[0].childNodes;

 var itemsArr = [];
for (i = 0; i < list[0].childNodes.length; ++i) {

 //bugger += i + 'name ' + items[i].nodeName + ' text: ' + items[i].text  + items[i].wholeText  + '\n';

 if (items[i].nodeName.toLowerCase() === 'a') {
if (items[i+1].nodeName.toLowerCase() === "#text")
{
items[i].appendChild(items[i+1]); 
}
itemsArr.push(items[i]);
}
}
// alert ( 'getPREList\n' + bugger);
return itemsArr;
}

 function shuffleList(){

 var itemsArr = shuffle(getPRElist());
applyChanges(itemsArr);
}

 function applyChanges(itemsArr){
var bugger ='';
var list = document.getElementsByTagName('pre')[0].getElementsByTagName('small');
// alert ('you are here');
list[0].length=0;
for (i = 0; i < itemsArr.length; ++i) {

 //bugger += i + ' name ' + 
//itemsArr[i].nodeName + ' text: ' + //itemsArr[i].text  + 
//itemsArr[i].wholeText  + 
//'\n';

 var txt = itemsArr[i].removeChild(
itemsArr[i].lastChild);
list[0].appendChild(itemsArr[i]);
list[0].appendChild(txt);
}
// alert ( 'applyChanges\n' + bugger);
}

 </script>

 <style>
a:visited {
color : red;
font-weight : lighter;
}
#btn {
margin : 10px;
border-radius : 20%;
opacity : 1.0;

background-color : white; 
}
span.big {
font-size: 150%;
}
a {
display: inline-block; 
min-width:175px;
}

 </style>
<br />
<small>
</small>
<br />
<div style="float: right; margin: -27% 27% 0 0;">
<div style="position: fixed;">
<div>
<small><button id="btn" onclick="reverseList()" type="button">reverse</button>
</small></div>
<div>
<small><button id="btn" onclick="sortOf('n')" type="button">Name</button>
</small></div>
<div>
<small><button id="btn" onclick="sortOf('r')" type="button">Rank</button>

 </small></div>
<div>
<small><button id="btn" onclick="sortOf('c')" type="button">Country</button>
</small></div>
<div>
<small><button id="btn" onclick="addSpace()" type="button">add space</button>
</small></div>
<div>
<small><button id="btn" onclick="sortOf('l')" type="button">last name</button>
</small></div>
<div>
<small><button id="btn" onclick="shuffleList()" type="button">shuffle</button>
</small></div>
</div>
</div>
<br />
<pre style="white-space: pre-wrap;"><small>
 (PUT HTML LINKS HERE) </small>
</pre>


Ok, now put it all together.
I used blogger as a web page builder.
Copy and paste the code stuff above into a blogger post.
Then copy and paste the HTML links between the
<small>
 (PUT HTML LINKS HERE)</small>

 tags near the bottom.
Click Publish button.

If you get a publish error that says there was a problem, but no details it probably worked. Click Close, it will complain, be brave, close anyway. 
You May need to refresh the posts page in blogger to see your new post. 
Click view.

Comments

Post a Comment

Popular posts from this blog

God

  Throughout my life God has been working to bring things about and make things available when needed. A while back my wife and I divorced after 33 years of marriage. Shortly after that she died. Throughout the entire process there were many many things that occurred that just came together. For instance an apartment just happened to be available the same week that it was needed. Then other apartments became available as they were needed. Without looking much. Also my company fired me shortly after her death. But they also insisted that they would pay unemployment benefits. This just happened to coincide with covid-19. So my unemployment benefits were more than normal because of covid. Also medical benefits were made available, which was unexpected. Then my car died and another car was made available at a rock bottom price. It was a great car and did well for over 70,000 miles. There were many other small things that came into play. It's really incredible to see how God does things...
Post a Comment
Read more

iniquity of the Amorites

  Genesis Previous Chapter Gen.15 [ 1 ] After these things the word of the LORD came unto Abram in a vision, saying, Fear not, Abram: I am thy shield, and thy exceeding great reward. ... [ 13 ] And he said unto Abram, Know of a surety that thy seed shall be a stranger in a land that is not theirs, and shall serve them; and they shall afflict them four hundred years; [ 14 ] And also that nation, whom they shall serve, will I judge: and afterward shall they come out with great substance. [ 15 ] And thou shalt go to thy fathers in peace; thou shalt be buried in a good old age. [ 16 ] But in the fourth generation they shall come hither again: for the iniquity of the Amorites is not yet full.   This implies that the iniquity of the Amorites has begun, and will continue 400 years before the elite army of God's priests return from Egypt to slaughter every living thing. Since the old testament is for our examples, we can make a guess at when Christ will return. The recent round ...
Post a Comment
Read more

pixel 2 XL camera focus

  For almost a year the camera focus has been irritating at times. Especially when taking close up pictures. The camera would focus on stuff that was further away because it took up more of the field of view. Then finally this morning the thought occurred, why not click on what you want in focus and see what happens. And here are the results.   Notice June 13 is out of focus.   By clicking on 13 the focus automatically changes and then take the picture.   I'm hopeful that Jesus will figure out some way to get those Google guys into heaven.    Here is an example of a fantastic picture ruined by focus problems.    Armed with the new knowledge of resetting the focus more fantastic pictures can be produced.                                            
Post a Comment
Read more