It’s also handy if you have multiple domains parked on one pile of code. You can utilize HTTP_HOST to brand each of them seperately.

1. $server=$_SERVER[’HTTP_HOST’];
2. switch($server) {
3. case ‘localhost’:
4. define(”CONSTANT_NAME”, “schrodinger”);
5. break;
6. case ‘www.doyouknowwhere.com’:
7. case ‘doyouknowwhere.com’:
8. define(”CONSTANT_NAME”, “schumpeter”);
9. break;
10. }

It’s envoked as follows where ‘list-ID’ is the ID attribute of the list, ‘Effect-Hide’ is the scriptaculous disappear effect (such as Fade), ‘Effect-Show’ is the appear effect (such as Appear), and Time-Interval is the length of time to show the <li> item before moving on to the next one.

1. walkList(list-ID, Effect-Hide, Effect-Show, Time-Interval);

So, here is the walkList Function. It adds an onload event, using addEvent which I borrowed from Scott Andrew, to first hide all the list items using hideAll(list-ID) then initiates the list iteration with startWalking

1. function walkList(listID,eff1,eff2,intval) {
2. addEvent(window, ‘load’, function() {
3. hideAll(listID);
4. startWalking(listID, eff1, eff2, intval);
5. }, false);
6. }

hideAll gets the list items, loops through, setting each to ‘ dispay=”none” ‘ to hide them all

1. function hideAll(listID) {
2. var ul =$(listID).getElementsByTagName(”LI”);
3. for(var i=0;i
   
4. ul[i].style.display=’none’;
5. }
6. }

startWalking applies the specified hide effect to one item and a show effect to the next one. Then uses setTimeout to schedule the next transition.

1. var showNum = 0;
2. var hideNum = 0;
3. function startWalking(listID, eff1, eff2, intval) {
4. var ul =$(listID).getElementsByTagName(”LI”);
5. eval(’Effect.’+eff1+’(ul[hideNum].id,{duration:.3});’);
6. eval(”window.setTimeout(\’Effect.”+eff2+”(\”"+ul[showNum].id+”\”)\’,1000);”);
7. hideNum = showNum;
8. if(showNum == (ul.length-1)) {
9. showNum=0;
10. }
11. else showNum++;
12. setTimeout(’startWalking(\'’+listID+’\',\'’+eff1+’\',\'’+eff2+’\',’+intval+’)',intval);
13. }

Here is the demo

1. function loadUpdate(id) {
2. new Ajax.Updater('’,'item.php?action=get&id=’+id, {asynchronous:true, onSuccess:populateForm});
3. }

Used a PHP script in the item.php file to return the requested data in XML formatted as follows. Where id, fieldname, & anotherfieldname all correlate to the forms element id’s and 1, field value, & another field value are the data we’ll populate them with.

1. <xmlresponse><results>
2. <row>
3. <id>1</id>
4. <fieldname>field value</fieldname>
5. <anotherfieldname>another field value</anotherfieldname>
6. </row>
7. </results></xmlresponse>

Then used the populateForm function, referenced in the onSuccess parameter of the above mentioned loadUpdate(id) function, to parse the XML and assign each node to the correct form element

1. var FORMNAME = “formname”;
2. var populateForm = function LoadEditLink_Callback(str) {
3. var xmlResponse = str.responseXML;
4. var results = xmlResponse.getElementsByTagName(’row’)[0];
5. for(var i=0;i<results.childNodes.length;i++) {
6. var el = $(results.childNodes[i].nodeName);
7. switch(el.type) {
8. case ‘text’:
9. el.value = results.childNodes[i].firstChild.data;
10. break;
11. case ’select-one’:
12. for(var j=0; j<el.length;j++) {
13. if (el.options[j].value == results.childNodes[i].firstChild.data) {
14. el.selectedIndex = j;
15. }
16. }
17. break;
18. case ’select-multiple’:
19. var values = results.childNodes[i].firstChild.data.split(”,”);
20. for(var j=0; j<el.length;j++) {
21. el.options[j].selected = false;
22. for(var k=0;k<values.length;k++){
23. if (el.options[j].value == values[k]) {
24. el.options[j].selected = true;
25. }
26. }
27. }
28. break;
29. case ‘checkbox’:
30. var values = results.childNodes[i].firstChild.data.split(”,”);
31. var checkbox = Form.getInputs(FORMNAME, ‘checkbox’, results.childNodes[i].nodeName);
32. for(var j=0;j<checkbox.length;j++) {
33. checkbox[j].checked = false;
34. for(var k=0;k<values.length;k++){
35. if(checkbox[j].value == values[k]) {
36. checkbox[j].checked = true;
37. }
38. }
39. }
40. break;
41. case ‘radio’:
42. var radio = Form.getInputs(FORMNAME, ‘radio’, results.childNodes[i].nodeName);
43. for(var j=0;j<radio.length;j++) {
44. if(radio[j].value == results.childNodes[i].firstChild.data) {
45. radio[j].checked = true;
46. }
47. }
48. break;
49. case ‘textarea’:
50. el.value = results.childNodes[i].firstChild.data;
51. break;
52. case ‘hidden’:
53. el.value = results.childNodes[i].firstChild.data;
54. break;
55. }
56. }
57. }

So, here is a demo. I’ve tested it in ie7 and Firefox 1.5.0.7, not sure how it works in other browsers.

You can download the full source here

1. <a href=”more.php” id=”btn-more” ><b>learn more</b></a>
2.  
   
3. #btn-more {
4. background: url(”../_images/btn-more.gif”) no-repeat;
5. width:75px; /* the width of your button image */
6. height:21px; /* half the height of your image */
7. display:block;
8. text-decoration:none;
9. }
10. a:hover#btn-more {
11. background-position: 0 -21px;
12. }
13. #btn-more b {
14. display:none;
15. }

For the image I made a GIF with both the normal and over button states


and here is the final link: learn more