dzhax Posted April 1, 2013 Report Share Posted April 1, 2013 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 More sharing options...
Don E Posted April 1, 2013 Report Share Posted April 1, 2013 (edited) 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 April 1, 2013 by Don E Link to comment Share on other sites More sharing options...
dzhax Posted April 1, 2013 Author Report Share Posted April 1, 2013 (edited) 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 April 1, 2013 by dzhax Link to comment Share on other sites More sharing options...
Don E Posted April 1, 2013 Report Share Posted April 1, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now