Archive for the ‘Tutorials’ Category

Recently, I designed a website and I decided to do a unique style on the search field. I added a background image to the input field and then a background image to the submit button. Everything looked great until I viewed it in Internet Destroyer (Internet Explorer). That’s when the sky fell on my head…as usual.

The Issue:

I was not able to hide the text from the button, letting the underlying image to show it’s text. Normally my preferred image replacement technique is to have text in the background image and then use a negative text-indent at a high number like this:

background-image: url('my-picture-with-text.jpg');
text-indent: -9999px;

This works fine with submit buttons on most browsers, except IE.

The fix:

Add 2 extra lines to your css file:

color: transparent;
text-transform: capitalize;

For some reason the text indent dosn’t work by itself in IE, so after adding these 2 lines it works. It is a hack within a hack though, the color:transparent property should work by itself, but it doesn’t. For some odd reason setting the text-transform to anything (in this case I chose capitalize because I don’t use it very often) makes it magicly work. Anyhow if anyone finds this useful please leave a comment below.

I found a neat JavaScript tutorial about how to use type-casting and arrays instead of conditional statements.

In a nutshell it takes a basic conditional statement and does it in another way.

Same old boring conditional statement:

function doSomethingGreat(myVar) {
    switch(myVar) {
        case 'AmberTaylor':
            alert('Amber is smart as heck!');
            break;
        case 'Sharpdot':
            alert('Amber works for the best company in the world!');
            break;
    }
}

The new way:

function doSomethingGreat(myVar) {     //This Creates the function and passes in the condition to test against
    theEgoFunction = new Array();      //This turns the function into an Array
    theEgoFunction['AmberTaylor'] = theAmberTaylor;     // Selects a function for one choice to run
    theEgoFunction['Sharpdot'] = theSharpdot;      // Selects a function for the other choice to run
    theEgoFunction[myVar]();    //Now finally the fuction to execute
}

function theAmberTaylor() {     //The functions to run
    alert('Amber is smart as heck!');
}

function theSharpdot() {    //The other function to run
    alert('Amber works for the best company in the world!');
}

This code looks almost identical to Actionscript (except for the built-in JavaScript functions, and some nuances). I have been working more with Actionscript recently, but as a result you can’t help to learn JavaScript along the way.

Anyhow I didn’t write this tidbit originally,  however I found it neat enough to share.  It originally comes from the Webmonkey blog, check it out:

View it here: http://www.webmonkey.com/tutorial/Free_Yourself_from_Conditions_in_JavaScript?oldid=31505