Cleaning up template
Saturday, January 29th, 2005My biggest concern over the template of my website is the vast number of links that was growing on each side. I’ve noticed that one of the blogs that I frequent (The Cave) uses a drop-down list to visit her blogs. It is a real space saver.
I wanted to do the same thing, but then I would no longer appear to link to those websites according to search engines and agents from variouse sites. I’m required to have the links on my site within an “A” element tag.
After some hard work and much testing, I finally came up with the answer using javascript, cascading stylesheets, and a little bit of brain power. I setup the javascript to index each list of links that has a list of “compact” and create a drop-down list. I then insert that drop-down list in the same container as my list. With cascading style sheets, I hide any list that has a class of “compact”.
Hopefully no one has any problems. I’ve tested it with Firefox and Explorer. If anyone is interested, here is the code that I used:
2 <div class=”panel”>
3 <b>Test</b>
4 <ul class=”compact”>
5 <li><a href=”http://www.lewismoten.com”>Lewis Moten</a></li>
6 <li><a href=”http://www.klooze.com”>Klooze</a></li>
7 </ul>
8 </div>
9 <style>
10 .compact{display:none;}
11 </style>
12 <script language=”javascript” type=”text/javascript”>
13 <!–//
14 compactLists();
15 function compactLists()
16 {
17 UL = document.getElementsByTagName(“UL”);
18 for(var i = 0; i < UL.length; i++)
19 if(UL[i].className == “compact”) compactList(UL[i]);
20 }
21 function compactList_onchange(e)
22 {
23 var obj = e ? e.target : event.srcElement;
24 window.location.href = obj[obj.selectedIndex].value;
25 }
26 function compactList(UL)
27 {
28 var select = document.createElement(“select”);
29 select.onchange = compactList_onchange;
30 var option = document.createElement(“option”);
31 option.value = “”;
32 option.innerText = “– choose one –”;
33 option.text = “– choose one –”;
34 select.appendChild(option);
35
36 for(var i = 0; i < UL.childNodes.length; i++)
37 {
38 var li = UL.childNodes[i];
39 if(li.tagName != null)
40 {
41 var a = li.childNodes[0];
42 option = document.createElement(“option”);
43 option.value = a.href;
44 option.innerText = a.innerText;
45 option.text = a.innerHTML;
46 select.appendChild(option);
47 }
48 }
49 UL.style.display = “none”;
50 UL.parentNode.appendChild(document.createElement(“br”));
51 UL.parentNode.appendChild(select);
52 select.selectedIndex = 0;
53 }
54 //–>
55 </script>
56 </body>
