-
Notifications
You must be signed in to change notification settings - Fork 0
/
alphabetized-list.html
120 lines (93 loc) · 2.84 KB
/
alphabetized-list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Alphabetized Bookshelf</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.bookshelf {
margin: 0 auto; height:500px; width:400px; text-align:left;
top:50px; left:20%;
list-style-type: none;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
position:absolute; }
#list {
margin:0; padding:0;
}
#list li {
display:block;
text-transform:capitalize;
margin:0;padding:20px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var lastClickedLi;
$("ul li").live("click", function() {
lastClickedLi = $(this);
$("input").val(lastClickedLi.text());
});
$("#change").click(function() {
if (lastClickedLi)
lastClickedLi.text($("input").val());
});
});//]]>
$(document).ready(function() {
$('#list li').each(function () {
var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
$(this).css("background-color", hue);
});
});
</script>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="bookshelf">
<ul id="list">
<li>The Elegant Universe</li>
<li>The Little Prince</li>
<li>This Is How</li>
<li>Confederacy of Dunces</li>
<li>Lord of the Rings</li>
<li>The Dark Tower</li>
<li>PHP Solutions</li>
<li>War and Peace</li>
<li>Goldie Locks and the Three Bears</li>
</ul>
</div>
<div style="clear:both;">
<br />Click on a title below to change it. Click the Alphabetize button to sort.
<br /><input type="text" />
<button id="change">change</button>
<button id="test">Alphabetize List (click again to reverse)"</button>
</div>
<script type="text/javascript">
function sortUnorderedList(ul, sortDescending) {
if(typeof ul == "string")
ul = document.getElementById(ul);
var lis = ul.getElementsByTagName("LI");
var vals = [];
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
vals.sort();
if(sortDescending)
vals.reverse();
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
window.onload = function() {
var desc = false;
document.getElementById("test").onclick = function() {
sortUnorderedList("list", desc);
desc = !desc;
return false;
}
}
sortUnorderedList("books");
</script>
</body>
</html>