Problem: CSS for a window of a web application

Question

Hello,

I’ve been stuck in the process of constructing a framework for a window to hold my web apps. With the help of JavaScript, the window will change its color, size, and position on the page. It is so much like GUI apps in Windows OS.

Borders must be custom, that is, they will change their color for that of the window, but will be shadowed a bit with opacity of about 50%.

The head must have the same color as the window do, but will have an image with some alpha channel value as a background. (That will polish up the head of the window.)

My problem consists in that my CSS for this challenge is sort of hard to manage via JS (dynamic part of the app). So, I am here to ask some help from CSS experts. If you know how to make CSS a snap, your help will be very much appreciated. As for now, I am frustrated to find no way to write a clean and simple code.

P.S. I am willing to support Internet Explorer 6, too.

Edited: Please, have a look at the visual representation of the problem: http://savepic.org/261861.jpg How would you manage to code CSS for that window so that it's easy enough to change the size and color of the window with the help of JavaScript?

Answer 1

How would you manage to code CSS for that window so that it's easy enough to change the size and color of the window with the help of JavaScript?

That "transparent borders" thing you mention is not entirely trivial, but definitely solvable. Now I'm still not entirely sure in what direction you are looking for help - how to structure CSS vs. JavaScript, or how to solve the specific problems you mention?

Either way, have you already looked at JQuery Dialog? It's a bit much for that single problem (having a window and resizing it) but it brings a full-blown API and templating system that has solved many cross-browser problems already.

If you don't want to utilize a framework, I would say don't worry too much about JavaScript accessibility. In essence, when you build clean CSS, you can access it well from JavaScript. A few thoughts on good CSS are in this question.

Answer 2

@iLWheels - it seems like u want someone to do all the coding for u? If not, my apologies. lets see what code u have so far. maybe we can fix or improve it to ur wish.