Nicklas Larsson

Posts tagged with "CSS"

First development version of HTML+JS window framework

Tuesday, 21. August 2007, 21:35:28

Since I finished the first milestone for my window framework during the first day of development, I will let you to see the code. I don't speak Javascript fluently, but some of you may learn some things from my code.

I use a simple pattern where I make data in the object private. You can also learn some things on how to use absolute positioning and DOM.

What this code implements right now is a view system. Each view has a size and a position, and a background color. A view can not have content. A view can have any number of child views. At the top there is a root view, that basically acts as a window. You should not place views belonging to the same parent on top of each other (even if I have done that in my example), since the order they are painted is undefined. (actually, the order is currently, first added, first painted)

This code is not rocket science. Of course more things will be added later, like content in the views, but this a good amount of code for people to learn how things work.

...and it works in both Opera and Firefox, KHTML untested (broken package in Ubuntu it seems), and IE also untested, I doubt that it works in IE.

No comments

CSS 3 to the rescue

Tuesday, 21. August 2007, 12:49:42

CSS, JAVASCRIPT, HTML

Today I am trying to build a ui prototype with the help of HTML+JS. The first thing I noticed is that the security model in browsers is a barrier for creativity. Well, think again, ok, I have to only access local pages to be able to do things like getting the title or url from an iframe. I can live with that.

The second thing was that doing advanced stuff in CSS is maybe not that easy to keep compatibility even between Opera and Firefox. Well, only Opera is good enough for my purposes, anyone that need to see the ui prototype can download Opera.

The last thing was that doing a ui prototype without the possibility to shorten labels that do not fit will be very ugly. Fortunately, I found out that Opera since version 9 supports CSS 3 text-overflow: ellipsis in the form of -o-text-overflow.

Ooooh, and I have made some simple icons with Gimp, first time that I actually made something useful with that tool. The hardest thing was to select a color, took me a few minutes before I found the color selector, then even more to understand it.

Making a ui prototype with HTML+JS is not that hard. The problem is that the quick solution is not very easy to modify quickly, and that is not the way it should be when you want to prototype. So my next task is to build a prototyping framework, before I finish my ui prototype.

I have currently so much to do, it feels like I never will have the time to work again.