In Progress

Javascript Desktop Window Interface

I need a few javascript classes to accomplish the following:

4 objects:

- desktop object (a div object)

- window interfaces ( more windows in a desktop object)

- a menu object (usuable in both windows and desktop)

- a toolbar object

I need to create a windows-line interface within a browser.

The interface needs to be in javascript, and styles in css.

The classes need to generate the static html code.

Discription of the functionality:

Desktop object:

Has a width / height in the css. this contains the window objects and the toolbar object.

Window object:

Needs positioning within the desktop object. Each window has an unique identifier. If the same identifier is opened, do a focus on the window using Z-indexes. The windows need to be styles with css (YOU need to make a basic style.)

The following functionalities should be taken in account:

- window resizing. (Hide inner content while resizing?)

- window moving. (Hide inner content while resizing?)

- window minimizing. (Hide from desktop, display at toolbar.

- window dragging.

- window focussing.

- remember last width / height / top / left position after maximizing.

- parameters should be able to be given to the new window class object to add a menu object, toolbar title, window id.

Menu toolbar:

An array with menu items generated with javascript. The menu toolbar is a horizontal List item with sub menu structure. (like the one on: [url removed, login to view] ) ofcourse it needs to be style-able with css.

The menu items needs to contain:

parent-menu-identifier: (0 for main menu)

menu name:

menu link: (simple a href="")

menu icon identifier. (so I can add icons in css. )

The menu's need to be created dynamically, so I would need to be able to look trough an array, or give an array to the class object to fill the menu object.

The menu needs to have a "loading" state, blurring the entire menu and displaying perhaps a loading text / image. while running the javascript to build the menu. So the menu needs to be dynamically changable. So you need to be able to change the menu to "loading / disabled" state, and on the background rebuild it.

Toolbar object:

The desktop object would need a toolbar object.

( You can combine this within the desktop object) But I splitted it here to be more precize. Windows minimizing need to be displayed in the toolbar, so i am able to maximize it again. (Just a display bar for all the windows) Like windows :-)

Keep in account to make a cross reference with id's to the windows. (perhaps a window_#id# and toolbar_#id#.

I think the concept is very clear to you if you just have a look at your own windows interface. Just that, but then within a browser.

I really really really would like a window with a drop shadow effect (semi transparant) So if you can CSS / png-24 this very easy for the demo, this would be greatly appriciated.

As extra information:
The code needs to be simple and clean. If possible the classes should be in seperated files. The less lines the better.

To get your money I need to see a workable demo in both IE and Firefox.

Skills: Javascript

See more: javascript desktop, javascript window interface, javascript windows interface, javascript desktop interface, javascript desktop window, javascript desktop object, desktop javascript, windows interface javascript, javascript window desktop, javascript desktop windows, javascript windowed interface, javascript window resize inner content, javascript desktop menu, unique background, static interface, precize, or desktop, menu icons png, make own icon, list icon, line icons, icon from png, icon desktop, html icons list, html code for javascript

About the Employer:
( 3 reviews ) Waddinxveen, Netherlands

Project ID: #243131

Awarded to:


I have created some similar interfaces for my own purposes, they can be quickly adapted to be right for your requirements.

$150 USD in 1 day
(2 Reviews)

2 freelancers are bidding on average $200 for this job


Please see your pm

$250 USD in 0 days
(14 Reviews)