Help with HTML Code, Drop down and select

I need help with some html coding.
I'm trying to do something like this
http://360icons.com/live/
and put it on my website.

All I want is the scroll down thing and when you click a name it shows a stream and chat below it. The one on the site above is smart and shows only the stream that is online as an option to select. I don't need that. I would rather have all the stream show, offline or online.

So far I have this, but I know I am doing it wrong, can someone do it for me

When I click Stream 1, I want the stream and chat to load underneath the scroll down box like the one on the site. For example, the html code for stream 1 and chat is:

<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=mlgcod" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=mlgcod&auto_play=true&start_volume=25" /></object><a href="http://www.twitch.tv/mlgcod" class="trk" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px; text-decoration:underline; text-align:center;"></a>
<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=mlgcod&amp;popout_chat=true" height="400" width="620"></iframe>

Code (markup):

If someone can please do the code for me, it would be greatly appreciated!

 

Here are the example how to show your stream after select the item from drop down.

This is java script code:

$(document).ready(function(){ $('.box').hide(); $('#dropdown').change(function(){ $('.box').hide(); $('#div'+ $(this).val()).show();});});

Code (markup):

Put below code into HTML file.

<form><selectid="dropdown"name="dropdown"><optionvalue="0">Choose</option><optionvalue="area1">DIV Area 1</option><optionvalue="area2">DIV Area 2</option><optionvalue="area3">DIV Area 3</option></select></form><divid="divarea1"class="box">DIV Area 1</div><divid="divarea2"class="box">DIV Area 2</div><divid="divarea3"class="box">DIV Area 3</div>

Code (markup):

You can get idea as above code and may this help you to done the things you are looking.

 

Is there a way to do this as html only?

I barely know anything about coding and such

 

That is HTML code already. You can do in html. Just put java script and my code that's it.

 

I use webs.com to make site and use the html module thing.
I put it in:
http://gyazo.com/ece8e36624dd516383426a8dbff81e38
and get this:
http://gyazo.com/c691695df24d01096105936fd858044f

 

Normally I rant and rave about the 'evils' of transitional markup, but this is REALLY a case where I'd forget any sort of scripting asshattery (or WORSE the jQuery crap creativewebmaster is suggesting and then seems to think is HTML -- NOT that said user's gibberish posts are of help to ANYONE) and use... an iframe. I hate the idea, but in this case the expedience and ability to make it work WITHOUT any javascript assist is worth it.

Though that means NOT using a SELECT. That is good though -- what makes that a form? Nothing... is it right to use a SELECT outside a form? No it is not, that's invalid markup even in a tranny document! (I really don't get why people keep using form elements outside forms). That should be a list of anchors, you want a dropdown-like behavior, do it with CSS!

<div class="streamList">
	<h2>Select a Stream</h2>
	<ul>
		<li><a href="stream1.html" target="streamHolder">Stream 1</a></li>
		<li><a href="stream2.html" target="streamHolder">Stream 2</a></li>
	</ul>
<!-- .streamList --></div>

<iframe name="streamHolder" src="streamNone.html"></iframe>

Code (markup):

With this CSS to make div.streamList behave as a hover state menu with a scrollbar if there's a lot of elements.

.streamList {
	position:relative;
	height:1.5em;
	overflow:hidden;
	font:normal 100%/150% arial,helvetica,sans-serif;
}

.streamList:hover {
	overflow:visible;
}

.streamList h2 {
	font:bold 100%/150% arial,helvetica,sans-serif;
}

.streamList ul {
	position:absolute;
	top:1.5em;
	left:-1px;
	overflow:auto;
	max-height:9em; /* 6 * 1.5 = 9, six lines */
}

.streamList,
.streamList ul {
	width:12em;
	background:#FFF;
	border:1px solid #000;
}

Code (markup):

No scripting, works as advertised... though you may want to fix the width and height of the iframe.

Again, it's invalid markup in 'proper' HTML, but so is everything facebook does with their scripting. We COULD try replacing IFRAME with OBJECT, but then TARGET is still invalid. I really dislike the idea of going this route, but compared to the mess of javascript it would take to do the same thing, it's the lesser evil.

 

I want to this as html only, is this possible?

 

Yes, if you don't make it a dropdown or select.

You want to use SELECT, you'll need javascript -- and a lot of it!. If one makes it a dropdown -- which from a semantic markup point of view is the correct approach -- that's going to need CSS to function as such, and javascript if one wants to have valid markup and not use an iframe. (since then you're looking at AJAX)

It might look like something simple to do if you don't know a lot about how websites and HTML works, but really it's one of the more complex things you can do which is why you do NOT see a lot of 'real' websites pulling that type of stunt... and the ones that do are knee deep in invalid/outdated markup, or neck-deep in javascript.