Designing with a concept

5 of May2008

I recently completed my typography course here at school as I am working on B.S. in Information Systems. The most valuable thing I can remember from my course is the idea of having a concept. Having a concept before you start sketching, before you think the layout, or the colors, or the fonts.

Why a concept?

A concept gives a designer a vision to work with. A theme to follow. A goal to aim towards. It is the subconscious end that will(should) guide all of your decisions. If your concept is “A rainy day”, you will font that expresses that. You might choose blue as your main color. You might choose a layout or certain effects that make you think of sadness and rain. Suddenly you find yourself having ideas based on this concept, and you have a definite direction to go towards. If you have new ideas, you can always compare them to the concept, and see if it fits.

Your concept will guide and inspire the sketching process. You won’t choose blue because you like blue, or a 1 column layout because you like it, but because it fits with your concept. Suddenly, you have a completed piece, with it’s fitting parts that make up that piece. Not just different parts that are trying to fit like puzzle pieces that don’t belong together. The difference is immediately apparent and powerful.

How do you get a concept?

If happen to be designing a page about an artist, you need need to research that artist. Write down words that come to mind. Words like powerful, dressing, provocative, words that are descriptive. I have found time and again, that I will write these words down, until the words cause images to flash in my head. Images of possible designs. I then sketch these images on paper, and explore those options if I like them. If I don’t I keep going on with my concept.

Once I have my concept, I should try to stick with it as much as I can. The finished piece will be better if I do, because each part will have a sense of belonging. It will feel like it is adding to the piece by being there. Not just there as decoration, or as a crutch, but because it helps express the overall theme or emotion of the piece.

document.getElementById().innerHTML + IE7 can cause problems

26 of April2008

It seems that Firefox and IE7 can use and replace the innerHTML of a DIV just fine. However when you try it with a table or a tbody tag (among others, I’m sure), it just breaks apart miserably in IE7 (Firefox works just fine). You’ll most likely get a JavaScript error that states “Unknown runtime error” and then point to the line that uses the innerHTML of the element that isn’t a DIV.

The solution? There are 2 possible workarounds. 1) Use a DIV, or 2) use appendChild(). I will show how to use appendChild here. I’ve tested this in IE7, FF, and Safari (Mac) and it should work. Thanks to Jeremy Keith I was able to figure it out after hours of struggling.

The following code should probably be within a function you call.

<script type="text/javascript">

var output = "dynamic output from earlier should go in this variable";

//first, create the table row and the table cell
var newtr = document.createElement("tr");
var newtd = document.createElement("td");

//place the output variable within the table cell, innerHTML here works because it's not on the page yet
//then, append the cell to the row, basically places the "<td>output here</td>" tags within the <tr></tr> tags
newtd.innerHTML = output;
newtr.appendChild(newtd);

//last, append the whole thing to the element, here it'll find the element with the "tbody_one" id, go inside, and make it the last child
document.getElementById("tbody_one").appendChild(newtr);

</script>

How to apply javascript to one specific browser (browser sniffer)

11 of April2008

What if you have JavaScript that only works in one browser? What if you’re using IE and Firefox. Well, you need to write one statement that will execute in IE, then another statement to run in the Firefox. This is also called a browser sniffer.
Here’s how you can do it.
First we’ll show you how to write a catch so it’ll run 1 statement if it is IE, and another if it’s any other browser.

<script type="text/javascript">
var browser = navigator.appName; //find the browser name

alert(browser); //popup with the browser name

if(browser == "Microsoft Internet Explorer"){
    alert("You are using IE");
}else{
    alert("you are using a different browser than IE");
}
</script>

Usually the code above suffices, because most JavaScript will either work in IE or the other browsers.

How to getElementsByClassName in JavaScript and manipulating those

26 of November2007

What if you wanted all of your elements on the page that have the same class=”" to behave the exact same way. Well, with a little JavaScript, this is possible, thanks to Netlobo.com:

Note: You must add the following onload event to your body tag: < body onload=”loadClassNames()”>

<script language="javascript" type="text/javascript">

//function that allows us to get the elements by a class name,

document.getElementsByClassName = function(clsName){

	var retVal = new Array();
	var elements = document.getElementsByTagName("*");

	for(var i = 0;i < elements.length;i++){
		if(elements[i].className.indexOf(" ") >= 0){
			var classes = elements[i].className.split(" ");

			for(var j = 0;j < classes.length;j++){
				if(classes[j] == clsName){
					retVal.push(elements[i]);
				}
			}

		}else if(elements[i].className == clsName){
			retVal.push(elements[i]);
		}
	}
	return retVal;
}

function loadClassNames(){
	//this method only works for event handlers

	var classNames= document.getElementsByClassName('test2');

	for (var i = 0; i < classNames.length; i++){
		classNames[i].onmouseover = function(){
			alert(this.id);
		}

	}
}

</script>

The first function simply adds the capability of getting an element by class name, which is not inherently possible with JavaScript. Now, what the 2nd function does, is the following. If you add loadClassNames() as an “onload” function to the body tag, when the page loads, the function will get all of the elements with a class name of ‘test2′, and assign a new “mouseover” event. In this case, it will create a popup that displays the id of the element.

Find x and y position of an element using JavaScript

1 of November2007

Ever needed to find the x or y coordinates of an element on a page? Well, thanks to this script from quirksmode it’s possible.

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

var elemToFind = document.getElementById('div1');

var elemCoords = findPos(elemToFind);

So now, elemCoords holds both the x and the y. Since findPos() returns an array, to access the x or y by itself do the following:

// elemCoords[0] or elemCoords[1] for the x and y values, respectively
alert(elemCoords[0]);