Jump to content

renaming divs according to their order displayed on the screen.


dzhax
 Share

Recommended Posts

This might be confusing but I will try to explain as much as possible. I am making a page that allows you to view multiple twitch.tv streams on the same page. I have included the option to remove a stream from the page. When this happens I would like to rename (change the id property) of all the divs on the page that hold the various streams so they are sequential. Example <div id="stream1"><div><div id="stream2"><div><div id="stream3"><div><div id="stream4"><div> Scenario: Stream2 has ended for the night and the user opts to close it. so now it look something like this <div id="stream1"><div><div id="stream3"><div><div id="stream4"><div> I would like to run a JS function to fix them so its like this again <div id="stream1"><div><div id="stream2"><div><div id="stream3"><div> stream 2 being the old stream3 and stream3 being the old stream4 Any idea how I would accomplish this?

Link to comment
Share on other sites

It's pretty late and I was writing an explanation on one way to do it on what I think you're trying to do but noticed the explanation was getting too much so I figured heck with that and just demonstrate via code what I was trying to explain. Anyhow, here it is. I added some background colors for visual reasons. To see how it works, go into firebug or whatever web dev tool you use and go to the HTML tab/section to see the changes taking place when closing each section; meaning the divs being re-ordered when they are removed/closed.. In the example below, to close a div(section), just click on it. Hopefully something you're looking for. (Below is just an example; I dont recommend inline styling and setting inline event handlers)

<!doctype html> <html><head><meta charset="UTF-8"><title>Remove/Reset Divs</title> <script type="text/javascript"> 	 function removeStream(id)	 { 		  var streamCont = document.getElementById('streamContainer');		  for(var i = 0; i < streamCont.childNodes.length; i++)		  {			   if(streamCont.childNodes[i].id == id)			   {					streamCont.removeChild(streamCont.childNodes[i]); 				} 		   } 		   // reset divs		  var count = 1;		 for(var x = 0; x < streamCont.childNodes.length; x++)		 {			  if(streamCont.childNodes[x].nodeName == 'DIV')			  { 				  streamCont.childNodes[x].id = "stream"+count;				  count++; 			   } 		 } } </script></head> <body><div id="streamContainer">	   <div id="stream1" onclick="removeStream(this.id)" style="background-color: red;">Stream here</div>	   <div id="stream2" onclick="removeStream(this.id)" style="background-color: blue;">Stream here</div>	   <div id="stream3" onclick="removeStream(this.id)" style="background-color: yellow;">Stream here</div>	   <div id="stream4" onclick="removeStream(this.id)" style="background-color: orange;">Stream here</div></div>  </body></html>

Edited by Don E
Link to comment
Share on other sites

thanks for pointing me in the correct direction I basically works except i have one problem. There is a div in the container that does not get renamed.

var streamCount = document.getElementById('streams');	var count = 1;				for(var x = 0; x < streamCount.childNodes.length; x++)				{				 if(streamCount.childNodes[x].nodeName == 'DIV')					{					 streamCount.childNodes[x].id = "stream"+count;						count++;					}				 }

that's the modified code to match my actual structure. what i left out above was the "newStream" div that is after all the other "stream#" divs. i tried adding "-1" to the streamCount.childNodes.length to keep it from updating the last div. Example:

<div id="streams">	 <div id="stream1"></div>	 <div id="stream2"></div>	 <div id="stream3"></div>	 <div id="stream4"></div>	 <div id="newStream"></div></div>

Sorry that i was not more clear before.

Edited by dzhax
Link to comment
Share on other sites

To the if condition, add: && streamCont.childNodes[x].id != "newStream" to it, to not have it be updated.

if(streamCont.childNodes[x].nodeName == 'DIV' && streamCont.childNodes[x].id != "newStream" )

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...