JS Xbox360 Challenge

blighter

blighter

blighter

Soldato
Joined
31 Mar 2006
Posts
3,272
Location
Gravesend, Kent
Hey everyone, happy new year!

My new years resolution is to create a website for certain purposes and i have decided to do it in the same, or similar way, as the Xbox 360's main screen.
My rough idea for the site is in the image below, the problem is, is that i don't have a clue how to turn it into a working website. The main two suggestions i have had is JavaScript and Flash. I have basic experience in Flash and no experience in JS so was wondering if any JS/flash gurus could help me make this site a reality?

idea1.JPG


Thanks
 
It would be done in flash but I would imagine that the design is protected by copyright so you need to watch out there and possibly even by patent, however what you need to do is create the design in flash with stop() after the animation and then use action script gotoandplay() to move to the next pane, however it would be possible to do this in js but neither way would lead to a accessable site in terms of screen readers and browser compatability, etc...
 
Hasn't someone on this forum already done something similar with an xbox360 site? I'm gonna go look.
 
thanks for the reply, i was thinking about the screen readers etc but if someone needs a screen reader for my site then there will be no way that the content will be useful to them anyway (without revealing any details ;) ) is there any way i can do the side menus in flash and the middle bit in php/html without using frames?

thanks,

matt
 
I started learning javascript yesterday so this might not work:

Title buttons:
Code: 
<script type='text/javascript'>
function topic_visibility(id) {
var topic = document.getElementById(id);
if(topic.style.display == 'none')
topic.style.display = 'block';
else
topic.style.display = 'none';
}
</script>

Code: 
<a href="#" onclick="topic_visibility('topic1');">Topic
<div id="topic1">----stuff----</div>

<a href="#" onclick="topic_visibility('topic2');">Topic
<div id="topic2" style="display:none;">----stuff----</div>

<a href="#" onclick="topic_visibility('topic3');">Topic
 <div id="topic3" style="display:none;">----stuff----</div>
 
ok, have now come up with another idea...
do the whole page in a CSS/Table type view and a slight change in layout.

idea2.bmp
idea2tableview.bmp


(pink lines dictate how the tables may be laid out)

also, is there any way where the above script from yhack will do the same, but on open one submenu at a time?

thanks all
 
Code: 
<script type='text/javascript'>
function topic_visibility(id) {
var topic = document.getElementById(id);
if(topic.style.display == 'none')
topic.style.display = 'block';
else
topic.style.display = 'none';
}
</script>
Use this again.

Code: 
<a href="#" onclick="topic_visibility('submenu1');">Submenu</a>
<a href="#" onclick="topic_visibility('submenu2');">Submenu</a>
<a href="#" onclick="topic_visibility('submenu3');">Submenu</a>

<div id="information">Information

<div id="submenu1">text in submenu1</div>
<div id="submenu2" style="display:none;">text in submenu2</div>
<div id="submenu3" style="display:none;">text in submenu2</div>

</div>
Use this again.

You just need to do the layout

editted.
 
This could be done with CSS and HTML, no need for tables, just a concise use of CSS with semantic mark-up, It'd be quite a decent project to do I reckon, I might have a play about to see how feasable it ends up like. :)
 
RandomTom said:
This could be done with CSS and HTML, no need for tables, just a concise use of CSS with semantic mark-up, It'd be quite a decent project to do I reckon, I might have a play about to see how feasable it ends up like. :)
Click to expand...
that would be cool if you could as i have never really used CSS before, thanks for everyones help so far!
 
unknowndomain said:
It would be done in flash but I would imagine that the design is protected by copyright so you need to watch out there and possibly even by patent, however what you need to do is create the design in flash with stop() after the animation and then use action script gotoandplay() to move to the next pane, however it would be possible to do this in js but neither way would lead to a accessable site in terms of screen readers and browser compatability, etc...
Click to expand...

1. You cant patent a website design.
2. Copyright would only cover the implementation (i.e: the code), so copying it wouldn't be violating copyright providing you dont (i) use any of their trademarks and (ii) dont rip off their exact code.
 
joeyjojo said:
This would be horrible in CSS. The transitions would look crap.

But good luck Tom :)
icon14.gif
Click to expand...
I read nothing about transitions lol, I'm all for some peachy javascript in there, but I'll have a go with it tomorrow while I'm twiddling my thumbs. :)
 
idea.JPG

thats my other idea if the first one fails (the © is a lil joke btw)
thanks tom, would be lovely if you could try :)
 
blighter said:
Hey everyone, happy new year!

My new years resolution is to create a website for certain purposes and i have decided to do it in the same, or similar way, as the Xbox 360's main screen.
My rough idea for the site is in the image below, the problem is, is that i don't have a clue how to turn it into a working website. The main two suggestions i have had is JavaScript and Flash. I have basic experience in Flash and no experience in JS so was wondering if any JS/flash gurus could help me make this site a reality?

idea1.JPG


Thanks
Click to expand...

Already been done mate :(
 
RandomTom said:
Haha, I've just spent the last 10 minutes on messing with this, It's rather shocking and I've done it the opposite colour scheme but meh, a forum such as Vanilla could be 'not too difficultly' added within the content, If I figured that out. Behold the 'lol' factor:

http://www.upleft.co.uk/test/x360/
Click to expand...

10 minutes :eek: That'd take me a ******* week and it wouldn't even be that good lol. That looks really nice.
 
RandomTom said:
Haha, I've just spent the last 10 minutes on messing with this, It's rather shocking and I've done it the opposite colour scheme but meh, a forum such as Vanilla could be 'not too difficultly' added within the content, If I figured that out. Behold the 'lol' factor:

http://www.upleft.co.uk/test/x360/
Click to expand...
Pr0t0c0L said:
use an ajax/effects framework its the best way to implement all this magic .

i use mootools/ scriptaculous, have a look at this

http://www.nyokiglitter.com/tutorials/horizontal.html

if you want to implement this, tell me and il create a template for you nps :P
Click to expand...

both of these are extremely extremely helpful, thank you both so much!
tom, have added you to my MSN but can't find any contact details for Pr0t0c0L :( maybe wwe could work out someway of implementing them both together? :D
 
You must log in or register to reply here.
Back
Top Bottom