my "online OS"

[PunkSktBrdr01]

I've decided to attempt to create an "online OS", using XHTML, CSS, JavaScript, and PHP. I'm trying to replicate the look of Windows 95/98/ME (though not too close, 'cause I don't wanna get sued). I figured I should just make one thread in the General forum, since I anticipate needing help in all of the aforementioned areas. I already started two threads relating to this:

http://forums.webdeveloper.com/showthread.php?s=&threadid=21310

and

http://forums.webdeveloper.com/showthread.php?s=&threadid=21295

so, if a moderator wants to add them to this thread...

The work I've done so far on "osOnline" can be viewed at:

http://www.radioactiverabbit.com/os_online/

Anyway, I have several new problems:

1) For some reason, the site does not work at all on Mac OSX. I've tested at school in IE5 and Safari, and neither displays anything but the background.

2) I'm trying to display the time, like in Windows, but I can't seem to get my JavaScript function to work correctly. Well, actually, it was working before, but I redid the function so it would be usable in other situations. I'm trying to call it using the "window.onLoad = function() {...}" way, which I saw on another site, but it's not working for me. It will display the correct time when it loads, but it never updates. Here's my code:


function showTime(itemId, showSeconds, intervalNum) {
var itemTime = document.getElementById(itemId);
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = (showSeconds) ? ":" + time.getSeconds() + " " : " ";
var antePost = "am";
var dispTime;
antePost = (hour > 11) ? "pm" : "am";
hour = (hour > 12) ? hour - 12 : (hour == 0) ? 12 : hour;
minute = (minute < 10) ? "0" + minute : minute;
dispTime = hour + ":" + minute + second + antePost;
itemTime.innerHTML = dispTime;
setTimeout("showTime(" + itemId + ", " + showSeconds + ", " + intervalNum + ")", intervalNum);
}


I'm testing in Firebird, and, in the JavaScript Console, I'm getting:

Error: itemBarTime is not defined
Source File: http://www.radioactiverabbit.com/os_online/_functions.js
Line: 33

Line 33 is:


setTimeout("showTime(" + itemId + ", " + showSeconds + ", " + intervalNum + ")", intervalNum);


"itemBarTime" is the id of the div that is supposed to contain the time, and is being passed to the function as an argument.

3) I have absolutely no idea how to do the submenus for the menu. I found one that I like:

http://www.gazingus.org/html/menuDropdown.html

but I can't figure out how to adapt it to do what I want.

Okay, that's all I can think of for now. If anyone has any suggestions, please let me know. Once I can get the main system working, I hope (with everyone's help) to make some actual applications and games, like an mp3 player, text editor, minesweeper, and other things. Who knows, maybe someone can help me develop an API... We could have people sign up, and users could have a small amount of server space for files and whatnot, and be able to edit their system settings (change background, some colors, simple stuff). Please help, and give me ideas and suggestions! :)

[PeOfEo]

6 words: drag and drop desk top icons ;)

[PunkSktBrdr01]

Well, I don't know much JavaScript, but if anyone knows how to do this, let me know, and I'll do my best to add it in. Don't have any desktop icons yet, though. Anyone care to make some? :) I'm trying to keep everything in PNG format (unless photographic, in which case a JPEG is acceptable). Good idea, though, PeOfEo!

[pyro]

For something like this, it will, of course, rely heavily on client side scripting. So, my advise to you would be to learn the DOM, and learn it well. :)

[Sux0rZh@jc0rz]

real kewl idea... but it will be so limited it's not funny. the user won't have much ability to change the things in his "OS" besides the things you predefine like backgroun color, text color, some drag n drop links... thats about it.

[PeOfEo]

unless he used a data base to store the user data and he had a login welcome screen. Background image could be uploaded and stretch or it can be another url or it can be a solid color etc. You would just store it w/ user id.

[PunkSktBrdr01]

Yeah, that's what I was planning, PeOfEo, except I'll use a file instead of a database. Once everything's running correctly, I'll make a login area for registered members (might need a database...) and a test area where anyone can try it without a password. That area will have limited customization, though.

[PunkSktBrdr01]

Uh oh, I just messed up the whole nav thing. I tried to make the nav system for the submenus, but the whole thing won't work now. I was never very good at JavaScript, so if someone could help fix this, it would make my day. Here's the JavaScript file:


function clickMenu(theController, theControllee, appearBelow) {
var controller = document.getElementById(theController);
var controllee = document.getElementById(theControllee);

controller.onClick = function() {
controllee.style.visibility = (controller.style.visibility == "hidden") ? "visible" : "hidden";
if (appearBelow) {
controllee.style.top = controller.offsetTop + controller.offsetHeight + "px";
}
else {
controllee.style.bottom = controller.style.offsetBottom + controller.style.offsetHeight + "px";
}
controllee.style.left = controller.style.offsetLeft + "px";
}
}

function mouseMenu(theController, theControllee) {
var controller = document.getElementById(theController);
var controllee = document.getElementById(theControllee);
var isOn;

function showMenu(itemId) {
var itemVis = itemId.style.visibility;
var itemTimeout = setTimeout(itemVis = "visible", 500);

controllee.style.visibility = (controller.style.visibility == "hidden") ? "visible" : "hidden";
controllee.style.bottom = controller.style.offsetBottom + "px";
controllee.style.left = controller.style.offsetLeft + controller.style.offsetWidth + "px";
if (!isOn) {
clearTimeout(itemTimeout);
}
}
function hideMenu(itemId) {
var itemVis = itemId.style.visibility;
var itemTimeout = setTimeout(itemVis = "hidden", 500);

if (isOn) {
clearTimeout(itemTimeout);
}
}
controller.onMouseOver = function() {
showMenu(controllee);
isOn = false;
}
controller.onMouseOut = function() {
hideMenu(controllee);
isOn = false;
}
controllee.onMouseOver = function() {
showMenu(controllee);
isOn = true;
}
controllee.onMouseOut = function() {
hideMenu(controllee);
isOn = false;
}
}


function switchBorder(itemId, depItemId, newBorder, oldBorder) {
var controllee = document.getElementById(itemId);
var controller = document.getElementById(depItemId);

controllee.style.borderStyle = (controller.style.visibility == "hidden") ? oldBorder : newBorder;
}

function showTime(itemId, showSeconds, intervalNum) {
var itemTime = document.getElementById(itemId);
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = (showSeconds) ? ":" + time.getSeconds() + " " : " ";
var antePost = "am";
var dispTime;

antePost = (hour > 11) ? "pm" : "am";
hour = (hour > 12) ? hour - 12 : (hour == 0) ? 12 : hour;
minute = (minute < 10) ? "0" + minute : minute;
dispTime = hour + ":" + minute + second + antePost;
itemTime.innerHTML = dispTime;
setTimeout("showTime(" + itemId + ", " + showSeconds + ", " + intervalNum + ")", intervalNum);
}


Take a look at the source for

http://www.radioactiverabbit.com/os_online/

Hopefully, someone can fix this mess! Thanks! :)

[PunkSktBrdr01]

I have now given up trying to do the JavaScript. If anyone out there wants to work with me on this, let me know. I did manage to get the config files working. Config files are named ".osconfig" and are very simple. My .osconfig file looks like this:


screen_width=800
screen_height=600
screen_bg_color=#FFFFFF
screen_bg_image=none


To see the default settings, go to:

http://www.radioactiverabbit.com/os_online/

Now, to see it with my settings, go to:

http://www.radioactiverabbit.com/os_online/?user=brandon

I'm gonna start working on a login system soon. I really need someone(s) to help with the client-side stuff though. Hopefully, if/when this thing is completed, it'll be awesome! :)

[PunkSktBrdr01]

Hello? Anyone? Well, I guess I'll have to do it myself then. Anyone know of some good standards-compliant JavaScript/DOM tutorials? I've tried to find some, but no luck.

[pyro]

Not a big fan of tutorials, so I don't really know of any good ones, but I would highly recommend "JavaScript, The Definitive Guide" by David Flanagan.

[Pittimann]

Hi PunkSktBrdr01!

I still wonder about the use of your "online-os".
Anyway, based on your code I did some changes which might be useful for you. Please note, that the files in the"zip" have to be extracted to the same directory. I didn't include paths like "/images" etc.

That will solve your "clock problem" as well as the basics of your menu. You will have to work on it - I didn't want to spend more time...

Cheers - Pit

[PunkSktBrdr01]

Well, it works great in IE, but doesn't do anything in Firebird. I'll see what I can do to modify it, but, as I have stated before, I'm not very good with JavaScript. I might get lucky this time, though! :)

[luke0]

i tryed it but it did not work look

http://www.angelfire.com/hero/aok0/junk.html


plz help

[Paul Jr]

Originally posted by luke0
i tryed it but it did not work look

http://www.angelfire.com/hero/aok0/junk.html


plz help

For one thing, you don't have the required start and end script tags, like so:


<script type="text/javascript">
<!--
All y'all's script goes in heaw!
-->
</script>

[Sux0rZh@jc0rz]

uhm. it probably doesnt work, because u dont have the stuff on the webpage that is used... and why would u care if it works or not on YOUR webpage? it's not your script. dont steal it.

[luke0]

this is wot web devekeoper is about to help peeps how need help with there web site and if PunkSktBrdr01 did NOT want peeps to use it he would send a message to one of the mod to help him :eek: so i did not teal it im using it:rolleyes:

[luke0]

i tryed it but still it dose not work. the words and number have gone but now its a blank page



<script type="text/javascript">
<function clickMenu(theController, theControllee, appearBelow) {
var controller = document.getElementById(theController);
var controllee = document.getElementById(theControllee);

controller.onClick = function() {
controllee.style.visibility = (controller.style.visibility == "hidden") ? "visible" : "hidden";
if (appearBelow) {
controllee.style.top = controller.offsetTop + controller.offsetHeight + "px";
}
else {
controllee.style.bottom = controller.style.offsetBottom + controller.style.offsetHeight + "px";
}
controllee.style.left = controller.style.offsetLeft + "px";
}
}

function mouseMenu(theController, theControllee) {
var controller = document.getElementById(theController);
var controllee = document.getElementById(theControllee);
var isOn;

function showMenu(itemId) {
var itemVis = itemId.style.visibility;
var itemTimeout = setTimeout(itemVis = "visible", 500);

controllee.style.visibility = (controller.style.visibility == "hidden") ? "visible" : "hidden";
controllee.style.bottom = controller.style.offsetBottom + "px";
controllee.style.left = controller.style.offsetLeft + controller.style.offsetWidth + "px";
if (!isOn) {
clearTimeout(itemTimeout);
}
}
function hideMenu(itemId) {
var itemVis = itemId.style.visibility;
var itemTimeout = setTimeout(itemVis = "hidden", 500);

if (isOn) {
clearTimeout(itemTimeout);
}
}
controller.onMouseOver = function() {
showMenu(controllee);
isOn = false;
}
controller.onMouseOut = function() {
hideMenu(controllee);
isOn = false;
}
controllee.onMouseOver = function() {
showMenu(controllee);
isOn = true;
}
controllee.onMouseOut = function() {
hideMenu(controllee);
isOn = false;
}
}


function switchBorder(itemId, depItemId, newBorder, oldBorder) {
var controllee = document.getElementById(itemId);
var controller = document.getElementById(depItemId);

controllee.style.borderStyle = (controller.style.visibility == "hidden") ? oldBorder : newBorder;
}

function showTime(itemId, showSeconds, intervalNum) {
var itemTime = document.getElementById(itemId);
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = (showSeconds) ? ":" + time.getSeconds() + " " : " ";
var antePost = "am";
var dispTime;

antePost = (hour > 11) ? "pm" : "am";
hour = (hour > 12) ? hour - 12 : (hour == 0) ? 12 : hour;
minute = (minute < 10) ? "0" + minute : minute;
dispTime = hour + ":" + minute + second + antePost;
itemTime.innerHTML = dispTime;
setTimeout("showTime(" + itemId + ", " + showSeconds + ", " + intervalNum + ")", intervalNum);
}>
</script>

[Sux0rZh@jc0rz]

Originally posted by luke0
[b]this is [what] [web developing] is about[,] to help peeps [who] need help with [their] web site yes. thats what forums are about. if you were downloading it so that you could help him, it would be different. but if you cant even get a premade one to work, i doubt you could make anything to help him past this level.and if PunkSktBrdr01 did NOT want peeps to use it he would send a message to one of the mod to help himyes well, mayby he prefurred to get help from more people than just one because the more the merrier so i did not steal it im using it:rolleyes: Ahh, my mistake. Wait.. no.. that's still stealing his script. just cause u steal it from the download that pittiman posted in order to give the code to punkskatr instead of from punkskatr's sourcode doesn't mean it isnt stealing. it is made for punkskatr. not for you. you have NO way in the making of it, you had NO way in the design of it, you had NO way in the thinking of it in the first place. it's his. even if u get it to work, the only os is still only starting. your version will die because u wont be able to keep editing it like punksktr will be. so just don't take it and stop asking how to fix what isnt broken and isnt yours.

[luke0]

plz stop i dont want the good tread to get banned i can help



and if u dont like something i put DONT send a post

[Sux0rZh@jc0rz]

uhg. whatever. dance around the fact that you were trying to steal it and get it to work on your website. make up some excuse. point remains, if you cant get it to work period, how are you going to get it to work BETTER for him?

[Paul Jr]

Dude, you're being a little harsh on Luke0 here, I don't really see at as him stealing, just seeing something cool, and trying to make it work for himself.


Luke0--

Sad truth is, you're probably never going to get it to work. It's not a stand-alone script, you're going to need other things, such as certain elements and such, for it to work. I dunno...*shrug*

[luke0]

yeah u bad boy:p

[Sux0rZh@jc0rz]

ok - yeah i posted that yesterday after having a fight with.... anyways.. sorry for being mean but paul is right.