Monday, February 13, 2017

This list sort worked for me


<script>
var sortby = 'n';
var prevOrder = 'r';
function sortOf(orderOn)
{

   sortby = orderOn;

// Grab a reference to the UL
var container = document.getElementById("urls");

// Gather all the LI's from the container
var contents = container.querySelectorAll("li");

// The querySelector doesn't return a traditional array
// that we can sort, so we'll need to convert the contents
// to a normal array.
var list = [];
for(var i=0; i<contents.length; i++){
    list.push(contents[i]);
}

// Sort (sorts "in place")
list.sort(function(a, b){
var aa = a.firstElementChild;
var bb = b.firstElementChild;

if (sortby == 'l'){
  aa = aa.innerHTML.length;
  bb = bb.innerHTML.length;
}else if (sortby == 'u'){
  aa = aa.getAttribute('href');
  bb = bb.getAttribute('href');
}
if (sortby == 'n'){
  aa = aa.innerHTML.toLowerCase();
  bb = bb.innerHTML.toLowerCase();
}

//alert (aa + "\n" + bb);

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

// We'll reverse the array because our sort runs backwards
list.reverse();

// output the order based on the order of our list array.
for(var i=0; i<list.length; i++){
    console.log(list[i].innerHTML);
    container.insertBefore(list[i], container.firstChild);
}
 
}
 

</script>
<style>
#btn {
margin : 10px;
border-radius : 10%;
}

</style>
<br />
<div style="float: right; margin: 0 20% 0 0;">
<div style="position: fixed;">
<div>
<button id="btn" onclick="sortOf('n')" type="button">Name</button>
</div>
<div>
<button id="btn" onclick="sortOf('u')" type="button">URL</button>
</div>
<div>
<button id="btn" onclick="sortOf('l')" type="button">Length</button>
</div>
</div>
</div>

<ul id="urls"><li ><a href="http://hunker-down-lighten-up.blogspot.com/" >Hunker -down- lighten -up</a></li> <li ><a href="http://outlike-alight.blogspot.com/" >outlike-alight</a></li> <li ><a href="http://out-likea-light.blogspot.com/" >out-likea-light</a></li>
<li ><a href="http://sink-your-teeth-into-it.blogspot.com/" >Sink -your- teeth -into-it</a></li> <li ><a href="http://out-likealight.blogspot.com/" >out-likealight</a></li> <li ><a href="http://like-a--ton-of-bricks.blogspot.com/" >like- a- -ton-of-bricks</a></li> <li ><a href="http://mount-evans.blogspot.com/" >Mount-evans</a></li> <li ><a href="http://never-knew-what-hit-him.blogspot.com/" >Never- knew -what- hit-him</a></li> <li ><a href="http://after-all-that-time.blogspot.com/" >After-all -that -time</a></li> <li ><a href="http://tighter-than-ricks-hatband.blogspot.com/" >Tighter -than Ricks- hatband</a></li> <li ><a href="http://boogered-up.blogspot.com/" >boogered-up</a></li> <li ><a href="http://didnt-your-mother-ever-tell-you.blogspot.com/" >Didnt -your -mother -ever -tell-you</a></li> <li ><a href="http://it-hit-me-like-a-ten-ton-sledge.blogspot.com/" >It-hit -me-like -a-ten-ton -sledge</a></li> <li ><a href="http://you-must--be-joking.blogspot.com/" >You -must- be- joking</a></li> <li ><a href="http://chess-cheese-chess.blogspot.com/" >Chess cheese chess</a></li> <li ><a href="http://small---world.blogspot.com/" >small-world</a></li> <li ><a href="http://thats-gratitude-for-you.blogspot.com/" >Thats -gratitude -for-you</a></li> <li ><a href="http://longs-peak.blogspot.com/" >Longs-peak</a></li> <li ><a href="http://outlikea-light.blogspot.com/" >outlikea-light</a></li> <li ><a href="http://its-hard-to-say-but.blogspot.com/" >its-hard -to-say -but</a></li> <li ><a href="http://that--was-yesterday.blogspot.com/" >That -was -yesterday</a></li> <li ><a href="http://a-ton-of-bricks.blogspot.com/" >a-ton- of -bricks</a></li> <li ><a href="http://well-you-would-think.blogspot.com/" >Well- you- would- think</a></li> <li ><a href="http://roses--are-red.blogspot.com/" >roses-are -red</a></li> <li ><a href="http://out-like-alight.blogspot.com/" >out-like-alight</a></li> <li ><a href="http://all-for-naught-for-all.blogspot.com/" >all-for- naught- for-all</a></li> <li ><a href="http://thanks-i-needed-that.blogspot.com/" >Thanks -I- needed- that</a></li> <li ><a href="http://colorful-colorado.blogspot.com/" >colorful- Colorado</a></li> <li ><a href="http://stranger--in-a-strange-land.blogspot.com/" >stranger in-a- strange -land</a></li> <li ><a href="http://gave-up-the-ghost.blogspot.com/" >gave-up -the-ghost</a></li> <li ><a href="http://no-news-is-goodnews.blogspot.com/" >no-news -is -goodnews</a></li> <li ><a href="http://hands-in--the-air.blogspot.com/" >Hands-in- the-air</a></li> <li ><a href="http://it-wasnt-pretty.blogspot.com/" >It-wasnt -pretty</a></li> <li ><a href="http://stink-weed.blogspot.com/" >Stink-weed</a></li> <li ><a href="http://out-like-a-light.blogspot.com/" >out-like- a-light</a></li> <li ><a href="http://if-its-the-last-thing-i-do.blogspot.com/" >If-its the- last-thing I-do</a></li> <li ><a href="http://good----luck.blogspot.com/" >good-luck</a></li> <li ><a href="http://outlike-a-light.blogspot.com/" >outlike-a-light</a></li> <li ><a href="http://not--really.blogspot.com/" >Not-really</a></li> <li ><a href="http://impossible--dream.blogspot.com/" >impossible -dream</a></li> <li ><a href="http://pikes--peak.blogspot.com/" >Pikes--peak</a></li> <li ><a href="http://traffic-was-snarled-for-miles.blogspot.com/" >Traffic-was -snarled- for- miles</a></li> <li ><a href="http://well-you-just-never-know.blogspot.com/" >Well- you -just -never -know</a></li> <li ><a href="http://theres-something-fishy-going-on-here.blogspot.com/" >Theres Something Fishy going on here</a></li> <li ><a href="http://got-the-drop-on-em.blogspot.com/" >Got-the -drop-on- em</a></li> <li ><a href="http://looking-down-the-road.blogspot.com/" >Looking -down -the-road</a></li> <li ><a href="http://who---knew.blogspot.com/" >Who-knew</a></li> <li ><a href="http://wow-that-didnt-take-long.blogspot.com/" >wow -that- didnt- take -long</a></li></ul>