Website Help

FelixDeSouze · March 2008

I've been given the task to create a website with one of my colleagues. We both have knowledge of design (more him than me!) and they want what they described as AJAX shutters in it.

I've tried looking around the place for a tutorial on this but could not find one.

If you're unsure as to what I am after see the attached video clip, this is what I want to achieve.. If anyone has any good links to some tutorials and what software etc I need (I have Dreamweaver).

Your help is appreciated!

Linc · March 2008

You're going to use the setTimeout method a lot!

Use it to stagger resizing of the elements.

This is the code I use to do something similar. There is a list of 10 "finishing" type (fold, bind, cut, collate, etc) for our print shop, and checking one of them expands the options for it using the effect you describe (plus making it glow bright yellow and then fade). Unchecking it hides it again. The areas being expanded collapsed are all named with the formula: finishtype_field, and the checkboxes are all simply named finishtype. I think the "optionbox" is an inner container I use to hide the options until the box is expanded. That lets be use a generic function for all of them.

Each checkbox has an action attached like this: onclick='fireCheck("cut");'

setTimeout only accepts function names as input, so everything you do with it needs to be its own function. Here's the relevant code:

function fireCheck(finish) { // Selected an Finish type checkbox
    var optionBoxName = finish+"_options";
    var fieldsetName = finish+"_field";
    if(document.getElementById(finish).checked) {
        setBorderColor(fieldsetName, "#AAA");
        setTimeout('setHeight("'+fieldsetName+'", 30);',10);
        setTimeout('setHeight("'+fieldsetName+'", 50);',40);
        setTimeout('setHeight("'+fieldsetName+'", 70);',70);
        setTimeout('setHeight("'+fieldsetName+'", 90);',100);
        setTimeout('setHeight("'+fieldsetName+'", 110);',130);
        setTimeout('setHeight("'+fieldsetName+'", 130);',160);
        setTimeout('blockSwap("'+optionBoxName+'", "'+finish+'");',190);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFF15F");',190);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFF36F")',200);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFF47F")',250);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFF58F")',300);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFF79F")',350);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFF8AF")',400);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFFABF")',450);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFFBCF")',500);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFFCDF")',550);
        setTimeout('setBgColor("'+fieldsetName+'", "#FFFEEF")',600);
        setTimeout('setBgColor("'+fieldsetName+'", "transparent")',650);
    }
    else {
        document.getElementById(optionBoxName).style.display = "none";
        setHeight(fieldsetName, 150);
        setTimeout('setHeight("'+fieldsetName+'", 130);',10);
        setTimeout('setHeight("'+fieldsetName+'", 110);',40);
        setTimeout('setHeight("'+fieldsetName+'", 90);',70);
        setTimeout('setHeight("'+fieldsetName+'", 70);',100);
        setTimeout('setHeight("'+fieldsetName+'", 50);',130);
        setTimeout('setHeight("'+fieldsetName+'", 30);',160);
        setTimeout('setHeight("'+fieldsetName+'", 0);',190);
        setTimeout('setBorderColor("'+fieldsetName+'", "transparent")',190);
    }
}


// Animations
function setHeight(id, px) { 
    document.getElementById(id).style.height = px+"px";
}
function blockSwap(block, finish) { 
    document.getElementById(block).style.display = "block";
    var size = "auto";
    switch(finish) {
        case 'fold':    size = "150px";    break;
        case 'bind':    size = "185px";    break;
        case 'laminate':size = "185px";    break;
        case 'drill':     size = "150px";    break;
        case 'cut':     size = "115px";    break;
        case 'shrink':     size = "150px";    break;
        case 'grommet': size = "150px";    break;
        case 'collate': size = "115px";    break;
        case 'pad':     size = "150px";    break;
        case 'pack':     size = "150px";    break;
        
    }
    document.getElementById(finish+"_field").style.height = size;

}
function setBgColor(id, hex) { 
    document.getElementById(id).style.backgroundColor = hex;
}
function setBorderColor(id, hex) { 
    document.getElementById(id).style.borderColor = hex;
}
function setFocus(id) {
    document.getElementById(id).focus();
}

The "blockswap" function is a workaround to some of the boxes not expanding fully when I simply set the height to "auto", so I specified the height of each. Really, this shouldn't be necessary, but this was a quicker fix than playing with standards compliance quirks for a day. I think it had something to do with how I was floating the elements in the field.

FelixDeSouze · March 2008

What format is that? ASP, PHP etc?

Linc · March 2008

FelixDeSouze wrote:

What format is that? ASP, PHP etc?

This is all purely Javascript. This requires no Ajax or server responses. You're simply showing/hiding information that is already on the page.

FelixDeSouze · March 2008

Keebler wrote:

This is all purely Javascript. This requires no Ajax or server responses. You're simply showing/hiding information that is already on the page.

Sorry to be really dense (plus i'm not really with it today, not on the same planet as everyone else), I've not dealt with Java much before..

Do I just add this to an existing HTML site?

Linc · March 2008

FelixDeSouze wrote:

Sorry to be really dense (plus i'm not really with it today, not on the same planet as everyone else), I've not dealt with Java much before..

Do I just add this to an existing HTML site?

This is not Java, it is Javascript. Java is a full-fledged programming language that can be compared to C++. Javascript is far more basic and is simply a scripting language for use on webpages. Ajax is simply a way of using Javascript to talk to a server without reloading the page. Java and Javascript are completely unrelated, just confusingly named.

If you've never used Javascript, I highly recommend ppk on Javascript. It's very readable and is a good intro and resource.

You can embed Javascript in a webpage using < script > tags, but I prefer to store it in a separate .js file which is then included in the webpage very similarly to how you embed a style sheet:

 [html]< script src="/folder/filename.js" type="text/javascript"></ script >[/html]

Website Help

Comments