JavaScript Oh HTMLCollection, You so silly!Created by maxtingle on Thu 19th Jun 2014 in category Javascript. 1232 Views | Tags: Javascript, htmlcollection, html, webdevIn one of my newer websites I've been adding fancy CSS3 effects, I've used them before but not as much as this. In my time doing this I had an issue, a menu would scroll down on load, because of the transition slowing the movement down. The transition was there for when you change sections, so you select one and the others smoothly scroll into another position but with the height being set on load (Due to me wanting backwards compatibility and thus not using calc) it scrolled down on load too. How annoying!
My solution to this was to add a class which has transition disabled and then remove that class 500ms (The transition time) after load, thus stopping it slowly scrolling. Now we get into the issue, at first I just used a for loop on a HtmlCollect of all the loading classes. Like so:
var loadingSections = document.getElementById('Sidebar').getElementsByClassName('Loading');
for(var i = 0; i < loadingSections.length; i++)
{
loadingSections[i].className = loadingSections[i].className.replace('Loading','').trim();
}
But it didn't work! What the hell! I checked the size, all the elements I wanted to be there, were there. So why the hell wasn't it working? The answer is because HtmlCollections are TOO smart. As soon as you alter the class name of an element the loadingSections variable gets altered, removing any elements which are no longer relevant, reducing the size and meaning loadingSections[2] (the final one to remove the class name on) is never altered.
The solution is bizarre, something that at first glance doesn't look like it would work, but works perfectly! Here it is:
var loadingSections = document.getElementById('Sidebar').getElementsByClassName('Loading');
loadingSections[0].className = loadingSections[0].className.replace('Loading','').trim();
loadingSections[0].className = loadingSections[0].className.replace('Loading','').trim();
loadingSections[0].className = loadingSections[0].className.replace('Loading','').trim();
Running the same thing three times (Once for each element in the collection) will do it! Each time the length is reduced and an element is removed thus pushing every other element down one. Oh HtmlCollection, you so silly!
Sign up to comment!