dzhax Posted April 1, 2013 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 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 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 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