Anthology of Ideas

I wanted to see how small you could make a fully functional AJAX script that worked cross-browser and degraded gracefully, so I went through an old custom AJAX script and made it as small as I possibly could. In the resulting AJAX scripts, the post version is 410 characters and the GET version is only 359 characters long. The scripts are fully functional and accept the following parameters: URL, DATA (in string form), and ELEMENT (to update).

The scripts could be a little smaller, but it would really kill readability.

“Get” AJAX Script

1. function a(l,d,u){
2. try{r = new XMLHttpRequest();}catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');}catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}
3. if(r){
4. r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML = r.responseText;}}
5. r.open('GET', l+'?'+d, true);r.send(d);
6. }
7. }

“Post” AJAX Script

1. function b(l,d,u){
2. try{r = new XMLHttpRequest();} catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');} catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}
3. if(r){
4. r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML=r.responseText;}}
5. r.open('POST', l, true);r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');r.send(d);
6. }
7. }

Combined AJAX Script

This combined script also accepts a fourth parameter ‘p’ that should evaluate true if the data is to be sent by post.

1. function a(l,d,u,p){
2. try{r = new XMLHttpRequest();}catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');}catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}
3. if(r){
4. r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML = r.responseText;}}
5. if(p){r.open('POST', l, true);r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');}else{r.open('GET', l+'?'+d, true);}
6. }
7. }

Demo: (Sorry but you will have to go to the full page so the JavaScript is loaded.)

One of my readers recently asked how I created my horizontal menu bar: the short answer is by mixing CSS and Javascript.

The first step is to get WordPress to display the menu as a hierarchical list without a title. <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

We then wrap this WordPress code in the following so we can style it.

1. <div style="text-align:center;">
2. <ul id="menu" style="padding:0; margin:0;">
3. <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
4. </ul>
5. </div>

I added this to my header.php, but you can add it anywhere you want it to appear.

The CSS is fairly simple and you just need to add it to your theme’s style.css file.

1. ul#menu {
2. margin: 0;
3. padding: 0;
4. list-style: none;
5. width: 100%;
6. font-size:1.2em;
7. }
9. ul#menu li {
10. float: left;
11. padding: 0;
12. margin: 0;
13. border-right:solid 1px #fff;
14. }
16. ul#menu ul li {
17. float: none;
18. position: relative;
19. border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
20. border-left: 1px solid #FFF;
21. z-index:1000;
22. }
24. ul#menu li ul {
25. margin: 0;
26. padding: 0;
27. display:none;
28. list-style: none;
29. position: absolute;
30. background: #9CC;
31. }
32. ul#menu ul ul{
33. margin-left: .2em;
34. position: absolute;
35. top: 0; /* if using borders, -1px to align top borders */
36. left: 100%;
37. }
39. ul#menu * a:hover, ul#menu li a:active{
40. background:#7EAED7 !important;
41. color: #FFFFFF;
42. }
44. ul#menu li a:link,
45. ul#menu li a:visited,
46. ul#menu li a:hover,
47. ul#menu li a:active{
48. display: block;
49. padding: .2em .3em;
50. text-decoration: none;
51. background: #5587B3;
52. color: #FFFFFF;
53. }
56. ul#menu ul li a:link,
57. ul#menu ul li a:visited,
58. ul#menu ul li a:hover,
59. ul#menu ul li a:active {
60. width: 8em;
61. }
62. Use the following to copy and paste the code.
    ul#menu { margin: 0; padding: 0; list-style: none; width: 100%; font-size:1.2em; } ul#menu li { float: left; padding: 0; margin: 0; border-right:solid 1px #fff; } ul#menu ul li { float: none; position: relative; border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */ border-left: 1px solid #FFF; z-index:1000; } ul#menu li ul { margin: 0; padding: 0; display:none; list-style: none; position: absolute; background: #9CC; } ul#menu ul ul{ margin-left: .2em; position: absolute; top: 0; /* if using borders, -1px to align top borders */ left: 100%; } ul#menu * a:hover, ul#menu li a:active{ background:#7EAED7 !important; color: #FFFFFF; } ul#menu li a:link, ul#menu li a:visited, ul#menu li a:hover, ul#menu li a:active{ display: block; padding: .2em .3em; text-decoration: none; background: #5587B3; color: #FFFFFF; } ul#menu ul li a:link, ul#menu ul li a:visited, ul#menu ul li a:hover, ul#menu ul li a:active { width: 8em; }

Of course you will need to change the colors and text sizes to ensure it blends with the rest of the theme.

AJAXed WordPress version 1.23 has been released. This version introduces French and Spanish support as well as compatibility with WordPress 2.6.

Changes in aWP Version 1.23

Lots of little stuff.