AJAX website

I’ve just finished developing a fully-AJAX website. It’s somewhat static in the sense there is little interaction, but I’ve used XMLHttpRequest instead of links for the pages. You can see it at http://jaquiehagan.com. Basically, the home page is the only one that needs to be loaded. If you click on any of the dropdown menus (done with CSS, rather than JS, to make it more compatible; this includes using csshover.htc for IE, since they aren’t simple A tags), it loads the side menu from the server. Choosing an item from this side menu loads the final menu, and the image(s) that need to be displayed. This final menu swaps out the different images in the main image pane. Why do this using JS? It might make a difference to the bandwidth used, although I probably overcompensate for this in that I preload images rather than wait on the user to click on them. More importantly, and if you turn off JavaScript and load the page, you will see the effect I had to remove. This site uses hidden-frame forwarding to allow a nice URL to remain in the address bar, even though it is hosted on a different server. By doing this, on a refresh the frame turns grey before loading, which causes a flash of grey, which is unnerving. I guess more than this it was a proof of concept that I could build a site that uses JavaScript for navigation, making it more like a multimedia site than a plain website. It does break one usability guide, which I am still working on. If you click on the back button in your browser, it will take you out of the site. Finally, it degrades nicely if a user doesn’t have JavaScript turned on. The required pages are all there (and generated from the list of images and menus), and are used by older browsers.

The Awakening [Mellow Mix]YorkThe Chillout Session

Undocumented Komodo Command

I was trying to do something earlier, where instead of creating a Command, I just used a macro that executed a command, but I wasn’t really able to. Then, I happened to record a macro where, instead of having made the command earlier, I ran it while recording. The following JavaScript is the macro:

// Macro recorded on Sat Apr 14 2007 00:30:57 GMT+0930 (CST)
if (komodo.view) { komodo.view.setFocus() };
Run_RunEncodedCommand(window, ’python -u {'operateOnSelection': True}’);

Now, I just need to see if I can use python macros to get the same effect.

Tonight May Have To Last Me All My LifeThe AvalanchesSince I Left You ★½

John Howard Malware/Virus

Howard heart-attack email carries virus :: Hack In The Box :: Keeping Knowledge Free What a shame it isn’t true… Anyway, I did some digging, and this is what happens: The site listed pushes you to a couple of other pages, via framesets. Then, there is a clever JavaScript which decrypts another script, this time written in VBScript. This script downloads, and executes, a Windows executable. Which apparently is a nasty piece of work. The clever parts are these: The method of encrypting the JavaScript. It uses a simple replacement method to take a string, which appears meaningless, and return it to a plaintext. Nothing too hard here, except it’s a somewhat complex algorithm to get that far. If you are interested:

 1     function makemelaugh(x) { 
 2         var l = x.length, b = 1024, i, j, r, p = 0, s = 0, w = 0, 
 3             t = Array(63, 16, 44, 51, 25, 37, 46, 62, 8, 18, 0, 0, 0, 0, 0, 0, 45, 28, 13, 4, 
 4                       30, 31, 48, 12, 21, 60, 47, 29, 2, 17, 23, 15, 40, 11, 1, 9, 34, 0, 26, 49, 
 5                       43, 58, 53, 0, 0, 0, 0, 56, 0, 10, 3, 42, 5, 59, 41, 22, 19, 27, 61, 33, 7, 
 6                       54, 55, 20, 50, 6, 57, 39, 36, 14, 52, 32, 24, 38, 35); 
 7         for (j = Math.ceil(l / b); j > 0; j--) { 
 8             r = ""; 
 9             for (i = Math.min(l, b); i > 0; i--, l--) { 
10                 w |= t[x.charCodeAt(p++) - 48] << s; 
11                 if (s) { 
12                     r += String.fromCharCode(170 ^ w & 255); 
13                     w <<= 8; 
14                     s -= 2; 
15                 } else { 
16                     s = 6; 
17                 } 
18             } 
19         temp = temp + r; 
20         } 
21     }

I’ve made it less dangerous by replacing the document.write(r) with temp = temp + r. This way, I could just get the text, rather than have my browser execute it. This function, makemelaugh(), is run on a block of text, resulting in a script that, as mentioned, downloads, and then executes a file. I think the first half of the script is based on the second half, as the second script block points to a file that doesn’t exist. And the first part is a little cleverer, in that the filename it chooses for the executable is random. Meaning that a virus checker can’t rely on a particular filename when scanning. The file appears to be exactly 2006 bytes in length, but I don’t have the tools on the machine it’s stored on to look further at it. And I don’t want to bring it to the PC I’m at now in case I accidentally execute it! Apparently the virus isn’t anything to do with John Howard, that’s just the delivery vector. Basically, you are safe from this virus if you are using a Mac. You are safe from this virus if you don’t have JavaScript, or VBScript turned on. And, I think you are safe from this virus if you are using Firefox. But I’m not so sure about this. However, if you are using IE, on a Windows machine, don’t go to the address… Nah, I’m not going to link to it…

Info Tech Studies Projects

I’m teaching Stage 2 Information Technology Studies this year (it’s turning out to be a fair bit of work, but I’m quite enjoying it), and I have to come up with some project topics. The students have to do two projects, one on each of the Option Topics we will be studying. At this stage, I’m planning on Application Programming (using python, and some form of GUI), and Website Programming (HTML+JavaScript). What I do need to do is think of some suitable project topics. Something that is challenging enough for Year 12, but not too difficult. I’ve got some ideas for Websites, as there is a bit more scope to do something cool. It’s a bit easier to implement cool stuff with a more limited level of skill in HTML than it is in an application program. I also have to write some skills tasks, that assess each of these topics. I’ve got some good ideas here for the application programming one (give them the GUI code, and get them to make the backend, and for the other, give them some working application code, but as a series of functions, and get them to combine the functions into a full application). I’d love to be in a situation where I could teach ObjC, since I do have a Mac computer room at school, but since I don’t know it that well myself, that might be a future task. I seriously wish anygui had taken off. But, even late in the game then, I wasn’t really keen on how the backend interface was turning out. I came across Dabo yesterday, and that looks cool, though.

Bill Kerr: amazing javascript

Bill Kerr: amazing javascript This is a fairly cool script. It makes all of the images on a page fly around. What’s neat is how smooth everything is. It wasn’t too long ago that machines didn’t have the power to do this. [try on this page][2]

[2]: javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(‘img’); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=’absolute’; DIS.left=(Math.sin(Rx1+ix2+x3)x4+x5)+’px’; DIS.top=(Math.cos(Ry1+iy2+y3)y4+y5)+’px’}R++}setInterval(‘A()’,5); void(0);

IE and Javascript

I’ve got a lovely inline/AJAX search tool, but it doesn’t quite work properly with Internet Explorer. I use onsubmit="Search(); return false" so that it works well with JavaScript, and still continues to load the search page if JavaScript is disabled, but this fails in IE. That is, it still loads the search page, even though it attempts to load the results inline first. I wonder if I need to make the Search() function return false too?

document.documentURI vs. location

Apparently, document.documentURI and document.location are not identical. Basically, document.location is not a string, so to treat it like one, you need to do: (document.location+"").split("/") Instead of: document.documentURI.split("/") Stupid IE.

Cross-browser AJAX

I need a simple wrapper for a Mozilla/Safari and IE compatible XMLHttpRequest(). Perhaps something like (courtesy of Apple):

 1     function loadXMLDoc(url,method,readyFunc) {
 2         req = false;
 3         if (method) method = "GET";
 4         // branch for native XMLHttpRequest object
 5         if(window.XMLHttpRequest) {
 6             try {
 7                 req = new XMLHttpRequest();
 8             } catch(e) {
 9                 req = false;
10             }
11         // branch for IE/Windows ActiveX version
12         } else if(window.ActiveXObject) {
13             try {
14                 req = new ActiveXObject("Msxml2.XMLHTTP");
15             } catch(e) {
16                 try {
17                     req = new ActiveXObject("Microsoft.XMLHTTP");
18                 } catch(e) {
19                     req = false;
20                 }
21             }
22         }
23         if(req) {
24             req.onreadystatechange = readyFunc;
25             req.open(method, url, true);
26             req.send("");
27         }
28         return req;
29     }

Inline Search

I’ve implemented a new feature on my blog, which I think is pretty cool. Over the the right is a new box labelled: Beta: Inline Search. Try typing something into it, and pressing return, or clicking the button. Wait a few seconds (depending on connection speed) and search results for this blog should appear underneath. It’s still fairly rudimentary - I plan to make a “working” indicator, plus the ability to search for more results. But I guess you want to see the code…

 1     function SearchBlog(){
 2         window.searchreq = new XMLHttpRequest();
 3         var s=document.getElementById("s").value.replace(/ /g,"+");
 4         searchreq.open("POST","/category/&s="+s);
 5         searchreq.onload = UpdateSearchResults
 6         searchreq.send("")
 7     }
 9     function UpdateSearchResults(){
10         if (searchreq){
11             if (searchreq.status==200) {
12                 data = searchreq.responseText.split("<body>")[1].split("</body>")[0];
13                 temp = document.createElement("div");
14                 temp.innerHTML = data;
15                 if (temp.getByClass) {
16                     results = temp.getByClass("post-title");
17                 }
18                 var resList = "Results:<ul>";
19                 for (var i=0;i < results.length; i++){
20                     resList = resList + "<li>"+results[i].innerHTML+"</li>";
21                 }
22                 resList = resList + "</ul>";
23                 document.getElementById("searchresults").innerHTML = resList;
24                 data = "";
25                 temp = "";
26                 resList = "";
27             }
28         }
29     }

You will need to have a getByClass() function installed - if you don’t, it’s:

 1     /* 
 2         Thanks to Dustin Diaz for this one:
 3         http://www.dustindiaz.com/getelementsbyclass/
 4         */
 5     document.getByClass = function(searchClass,tag){
 6             var classElements = new Array();
 7             if (tag==undefined){tag="*";}
 8             var els = this.getElementsByTagName(tag); // use "*" for all elements
 9             var elsLen = els.length;
10             var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)");
11             for (i = 0,j = 0; i < elsLen; i++) {
12                 if ( pattern.test(els[i].className) ) {
13                     classElements[j] = els[i];
14                     j++;
15                 }
16             }
17             return classElements;
18         }

BarbarellaFerrante & TeicherUltra-Lounge, Vol. 16: Mondo Hollywood ★½

Ajax Search

This is very cool. Better than Live Search. I might be able to implement this, and even include the abililty to get multiple pages worth of results. And, it should be possible to do it so the search results appear in the sidebar, too. I’ll definitely look into this one. (Thanks Kreaper!)