Web Based Desktop - Side Project

[gamble]

Hello MWG!

I am currently working on a desktop styles theme on my spare time just for the fun of it, but i have run into some issues and decided i would ask you guys!

http://codepen.io/gambleDev/pen/DvKCy

Take a look at that. Notice the side bar expands on hover, and that only the skype is rigged up to launch an "application" at the moment. This is were im having the troubles.

My questions:

How can i make it so when you resize a div it will not move the others?

How can i make it so when you open a application it always appears at the top?

Ive been trying as you can see in the code.

Thanks MWG and have a great day!

[SRB]

A) Position: fixed;

B) jquery to insert the div above <\body> - last fixed element will be on top.

[gamble]

You're a champion thanks! I thought fixing the position of the windows would not allow me to drag and drop

[Script47]

Sweet design, looks seriously good. How will you interact with the actual PC so to launch an application? Is the styling done by you?

[gamble]

All the styling was done by me. I plan to convert this over to either java or c. Not sure. May just do a Web Based os much like Chrome OS if you ever had the chance to view it before it was discountinued.

Unless...you know a way to do it all from web?

Edited August 16, 2014 by gamble

[gamble]

<!--UPDATE-->

I have updated the desktop on my personal computer, so it is not on code pen. The windows now match the main menu, title bar is like the darker portion of the main menu, and the window itself is the off white like the menu. You can now close windows by simply dragging the window to the top right corner of the screen where you will be asked if you want to close the window. You can now maximise the window by double clicking the title bar and then undo the maximising with the same gesture. If you want an updated file let me know.

[gamble]

Need advice/ideas:

How can i make a javascript file execute into the div for the window?

For example i have a file with the following:

document.write('hello world');

How can i make that output into the div? I am wondering this so i can create small programs to run on the desktop im making.

Thanks MWG!

Sorry about the scattered thoughts here...but i am trying to use the eval function to make this happen

[KyleMassacre]

Need advice/ideas:

How can i make a javascript file execute into the div for the window?

For example i have a file with the following:

document.write('hello world');

How can i make that output into the div? I am wondering this so i can create small programs to run on the desktop im making.

Thanks MWG!

Sorry about the scattered thoughts here...but i am trying to use the eval function to make this happen

Now I'm no js whiz at all but I'll take a stab at it. Chances are your calling the js file correct? So why not make your doc.write() function into a function and eval it in the div.

Maybe it's not entirely necessary that way but could be worth a shot

[Script47]

Need advice/ideas:

How can i make a javascript file execute into the div for the window?

For example i have a file with the following:

document.write('hello world');

How can i make that output into the div? I am wondering this so i can create small programs to run on the desktop im making.

Thanks MWG!

Sorry about the scattered thoughts here...but i am trying to use the eval function to make this happen

I'm not sure what you mean, but these are the two ideas I have from what I think you mean.

Option #1:

I thought you mean't can you manipulate a value of a DIV to show data using JavaScript if so yes.

Look in to JS getElementByID then change the value by adding a .innerHTML or .innerText should look something like this.

 

// Inner text allows you to use text only no HTML formatting.
document.getElementById("myDivIDName").innerText = "New Value";

// Inner HTML allows the use of HTML formatting.
document.getElementById("myDivIDName").innerHTML = "<strong><u>New Value</u></strong>";

 

Example

Option #2:

Here I thought you mean't can you run a JS file on Windows as an application. So I gave this idea;

You can pack up web based application i.e HTML5, CSS and JavaScript in to an EXE file format using Node.JS. Look in to a program called WebToEXEWin.

Edited August 20, 2014 by Script47

[gamble]

Sorry for confusion this is what i mean:

I was to run a js file in my code. But rather than running it on the whole page, i would like to just run it within the div, much like a standalone application on a normal desktop. So here is the chain of events i am trying to accomplish:

User opens "program" on the web based desktop->The command is sent to open it->the div/window on the desktop opens->the file that the program is associated with runs in the div/window

So basically a js file is run in a div, im trying to accomplish this without having to remake every js function haha. So i want a div to act as a new document in a way.

[Script47]

Sorry for confusion this is what i mean:

I was to run a js file in my code. But rather than running it on the whole page, i would like to just run it within the div, much like a standalone application on a normal desktop. So here is the chain of events i am trying to accomplish:

User opens "program" on the web based desktop->The command is sent to open it->the div/window on the desktop opens->the file that the program is associated with runs in the div/window

So basically a js file is run in a div, im trying to accomplish this without having to remake every js function haha. So i want a div to act as a new document in a way.

Maybe an IFrame is the way to go?

IFrame

[gamble]

Is there a way to just use eval() in an iframe?

//UPDATE

Ive been testing and i can not get just and eval to load into an iframe. Any other ideas?

So basically im trying to load a snippet/file of JS into a div. I dont want it to reach further than that and what i mean by that is i dont want document.write to replace the entire page, just whats in the div...

Edited August 21, 2014 by gamble

[gamble]

Got it working, so if you want to create a little javascript app in an HTML id love to put it on there and test it out!