adding another object to a page

[dzhax]

I am working on a website for a video game streamer I watch and sometimes he plays with other streamers and viewers want to watch them both or in some cases more than 2, all play at the same time. So there are sites that do "dual streams" that will allow you to show both videos on the same page. My idea was to make something similar but scale-able to however many streams are needed. So far I have js functions with all the HTML needed add the video player but not sure how i would add a new video to the page without having to refresh. I am using the document.getElementByID('streams').innerHTML = mainStream()+newStream(); right now to manually show the primary stream and a image to click on to add another stream.

function mainStream()	 {	  result = "\t<div id=\"stream1\" class=\"td stream\">\n"+		  "\t\t<object type=\"application/x-shockwave-flash\" class=\"stream-object\" data=\"http://www.twitch.tv/widgets/live_embed_player.swf\" width=\"100%\" height=\"100%\" style=\"visibility: visible; \">\n"+		  "\t\t<param name=\"allowFullScreen\" value=\"true\">\n"+		  "\t\t<param name=\"allowScriptAccess\" value=\"always\">\n"+		  "\t\t<param name=\"allowNetworking\" value=\"all\">\n"+		  "\t\t<param name=\"wmode\" value=\"transparent\">\n"+		  "\t\t<param name=\"flashvars\" value=\"hostname=www.twitch.tv&channel=the_black_russian&auto_play=true&start_volume=100\"></object>\n"+	   "\t</div>\n";	   return(result);	 }	 function newStream(streamNum)	 {	  result = "\t<div id=\"stream"+streamNum+"\" class=\"td newStream\" onclick=\"getStream()\">\n"+	  "\t\t<img src=\"lib/new_stream.fw.png\" style=\"width:100%; height:100%\" alt=\"new stream\" title=\"Click to open a new stream...\" />\n"+	   "\t</div>\n";	   return(result);	 }

In hard code it would look like this when printed:

<div id="streams">	 <div id="stream1" class="td stream" style="width: 301px; height: 169.3125px;">		  <object type="application/x-shockwave-flash" class="stream-object" data="http://www.twitch.tv/widgets/live_embed_player.swf" width="100%" height="100%" style="visibility: visible; ">		 <param name="allowFullScreen" value="true">		 <param name="allowScriptAccess" value="always">		 <param name="allowNetworking" value="all">		 <param name="wmode" value="transparent">		 <param name="flashvars" value="hostname=www.twitch.tv&channel=the_black_russian&auto_play=true&start_volume=100"></object>	 </div>	 <div id="stream2" class="td newStream" onclick="getStream()" style="width: 301px; height: 169.3125px;">		 <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream...">	 </div></div>

What I am looking to do is when someone triggers getStream() for it to add another stream and list the newStream() code last. This would make the new stream #2 and push the open a new stream part to stream #3. I also would like to add in functionality to close a specific stream. Any help is much appreciated! If I did not explain enough please let me know I will try my best to fill in any details I may have missed.

Edited March 27, 2013 by dzhax

[justsomeguy]

It would be easier to do that using DOM methods rather than innerHTML. The new stream option shouldn't change, the ID of it should be something like "newstream" or something else. When you click on it then you can get the newstream element that they clicked on (or pass it directly to the handler), create your new stream node and add the attributes and children to it, and insert it before the newstream node, so that newstream automatically moves down. That's what this is for: https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore If you want to add a link to close a particular stream, then you could have it pass the ID of the container of that stream and use removeChild to remove it. https://developer.mozilla.org/en-US/docs/DOM/Node.removeChild

[dzhax]

thanks for the response ill check that out now

[dzhax]

ok need a little help with the DOM part. I never really worked with DOM. I have made the following function:

function addNewStream()   {    // create a new div element	  // and give it some content	  var newDiv = document.createElement("span");	  newDiv.innerHTML = newStream(streamcount);	  // add the newly created element and it's content into the DOM	  my_div = document.getElementById("streams");	  document.body.insertBefore(newDiv, my_div.nextSibling);   }

It adds the code just fine, the only problem is instead of adding the content inside of <div id="streams"></div> it adds it after.

<div id="streams"></div><span> <div id="stream1" class="td newStream" onclick="getStream()">  <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream..."></div></span>

Ideally i would like to to be:

<div id="streams"><span> <div id="stream1" class="td newStream" onclick="getStream()">  <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream..."></div></span></div>

[justsomeguy]

Yeah, that's what you're telling it to do here: document.body.insertBefore(newDiv, my_div.nextSibling); You're telling it to insert the element as a child of document.body, before a sibling of my_div. The parent should not be document.body, it should be your container div. Also, like I said, I highly suggest that you have your "new stream" div hard-coded into HTML instead of inserted via Javascript. That element does not need a dynamic ID and should always be visible. Insert new elements before it to have it keep being the last item in the list.

[justsomeguy]

e.g.:

<script type="text/javascript">function insertEl(){  var el = document.getElementById('new_item');  var new_el = document.createElement('div');  new_el.innerHTML = 'this is a new element';  el.parentNode.insertBefore(new_el, el);}</script><div id="new_item" onclick="insertEl()">Insert new item</div>

There's no reason to give that "click to create a new element" div a dynamic ID or create it through Javascript, it's just a link. It doesn't even need to be a div.

[dzhax]

ok totally overlooked that document.body... works now. thanks a lot.

Edited March 28, 2013 by dzhax