I know there are a lot of javascript/ajax libraries out there such as prototype, but what if you just need the bare minimum? I don’t like lugging around features I don’t use, so I wrote this really handy little object. As I said, this thing does the bare minimum.

//handler has the signature: methodName(responseTxt)
function AJAX(handler){
    
    function _handleTheAx(req, handle) {
        if (req.readyState == 4) {
            handle(req.responseText);
        }
    }
    
    function call(url){
        var req = this.reqobj;
        if ((req.readyState == 4 || req.readyState == 0)) {
            req.open("GET", url, true);
            req.onreadystatechange = function() {_handleTheAx(req, handler);};
            req.send(null);
        }
    }
    
    function getXmlHttpRequestObject() {
        if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
        } else if(window.ActiveXObject) {
                return new ActiveXObject("Microsoft.XMLHTTP");
        } else {
                alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
                return null;
        }
    }
    
    this.call = call;
    this.handler = handler;
    this.reqobj = getXmlHttpRequestObject();
}

So how do you use it? Easy:

function theResponse(respTxt){
    alert(respTxt);
}
function doSomethingCool(){
    teHajax.call('url/to/my/script.php');
}
var teHajax = new AJAX(theResponse);

You would just have to call doSomethingCool() and the response would show up in theResponse(). Yay! That was easy wasn’t it!

We added ‘widgets’ to Yosle today so that you can display your items on your own website or anywhere else that allows embeddable javascript. For basic information and the Widget Builder see the widget page.

The widgets are customizable via CSS on your site. There are a few classes you can style:

.yosleFeed{} /*container holding the feed widget*/
.yosleItem{} /*container holding the item widget*/

.yoslePrice{} /*any prices*/
.yosleLink{}  /*any links*/
.yosleSubtitle{} /*the subtitle directly below the title*/
.yosleDescription{} /*the description (item widget only)*/
.yosleUsername{} /*the 'posted by x' text*/

Examples

Here is the CSS. For illustration purposes and general eye strain, each piece will get a different color.

.yosleFeed{border: 1px dashed #00F;} /*blue border*/
.yosleItem{border: 1px dashed #F00;} /*red border*/

.yoslePrice{font-weight: bold; color: #000;} /*black, bold*/
.yosleLink{color: #0a0;}  /*Green*/
.yosleSubtitle{color: #F0F;} /*purple*/
.yosleDescription{color: #0FF;} /*cyan*/
.yosleUsername{color: #FF0;} /*yellow*/

Feed Example

Item Example

Round corners. Something that should be easy, right? Not so much. It seems they were left out of the CSS specification. No matter, there are a couple of ways to hack them out and make them look good. Basically there are two techniques: layering a few empty tags, and using images. There are some ways to do it with javascript as well, but I wont cover them because javascript is unnecessary. The layering technique is the most concise and clean, IMO, so thats what this post will focus on.

Continue Reading »