on learning
Updated my introduction post with emoji, just because. I finished up a page that was giving me grief yesterday so I'm waiting for the attribute list from the Java developer so I can finish up the subsequent page. There was a complication because we only wanted to pull from the database once on page load in order to save on page load time since the designer wanted the entire list of almost 1k displayed yet wanted the item list organized by first letter.
It was an interesting scenario because I needed to request an attribute listed by the first letter of the item so I could group everything via XML that way. Using JavaScript was not an option because you wanted the list to be sorted before the DOM was loaded. Otherwise it's just bad user experience. I ended up using the Muenchian Method. It was a PITA, but my coding ended up being pretty simple in the end.
The XSL code resulted in something like the following, which is actually pretty easy once you understand it since it's just a for-each element within a for-each:
Easy in theory, and that is the simplified, simplified version of what I've done, but was a pain to set up because I have if statements within the sort-select options as well as divs surrounding each for-each statements as well as a parent div that surrounds it all. A lot of organization and planning. All in all, I have it nicely condensed in 38 lines of beautiful, perfect, code. Not to mention that I have the added complication of needing an alphabetical link list at the top of the page that dynamically links to each grouping parent, so I needed to add a data-attribute to the letters. That was fun.
Of course, the designer also wanted each list (remember, that was called as one giant list) to be organized into three columns. I tried out different approaches and ended up just using - for now - the CSS3 column-count property, but as you can see it's only supported IE10+. Internet Explorer, why? I'm not certain that IE9 is a necessity, so I'm keeping it that way for now. Otherwise I'm going to need to write JavaScript for it later on. (Although this appears to be an option).
That being said, since the list is dynamic I had the added layer of needing to keep in mind that if I have a list of four items (or so) that I obviously don't want it divided into three columns. I had originally created a jQuery if/else statement to handle the issue and pull in a CSS class that would use one or three columns respectively, however the count included ALL the list items on the page and not divided by letter since the list itself was generated as one. So...that wasn't helpful. Using each solved the problem though since it forced the list count to loop through each of the unlisted groups and count the children in order to bring back the final result.
So I ended up with a simple jQuery code to solve the problem:
$('ul.mainClass').each(
for (var i = 4; i < $(this).children('li').length; i++) {
$(this).addClass('threeColumns');
}
$(this).addClass('oneColumn');
});
Such a small, clean code to solve an annoying pain in the neck. I can't help it that I'm a perfectionist.
Not to mention the added complications with, well, everything else. It's fun though! All in a days work.
It was an interesting scenario because I needed to request an attribute listed by the first letter of the item so I could group everything via XML that way. Using JavaScript was not an option because you wanted the list to be sorted before the DOM was loaded. Otherwise it's just bad user experience. I ended up using the Muenchian Method. It was a PITA, but my coding ended up being pretty simple in the end.
The XSL code resulted in something like the following, which is actually pretty easy once you understand it since it's just a for-each element within a for-each:
Easy in theory, and that is the simplified, simplified version of what I've done, but was a pain to set up because I have if statements within the sort-select options as well as divs surrounding each for-each statements as well as a parent div that surrounds it all. A lot of organization and planning. All in all, I have it nicely condensed in 38 lines of beautiful, perfect, code. Not to mention that I have the added complication of needing an alphabetical link list at the top of the page that dynamically links to each grouping parent, so I needed to add a data-attribute to the letters. That was fun.
Of course, the designer also wanted each list (remember, that was called as one giant list) to be organized into three columns. I tried out different approaches and ended up just using - for now - the CSS3 column-count property, but as you can see it's only supported IE10+. Internet Explorer, why? I'm not certain that IE9 is a necessity, so I'm keeping it that way for now. Otherwise I'm going to need to write JavaScript for it later on. (Although this appears to be an option).
That being said, since the list is dynamic I had the added layer of needing to keep in mind that if I have a list of four items (or so) that I obviously don't want it divided into three columns. I had originally created a jQuery if/else statement to handle the issue and pull in a CSS class that would use one or three columns respectively, however the count included ALL the list items on the page and not divided by letter since the list itself was generated as one. So...that wasn't helpful. Using each solved the problem though since it forced the list count to loop through each of the unlisted groups and count the children in order to bring back the final result.
So I ended up with a simple jQuery code to solve the problem:
$('ul.mainClass').each(
for (var i = 4; i < $(this).children('li').length; i++) {
$(this).addClass('threeColumns');
}
$(this).addClass('oneColumn');
});
Such a small, clean code to solve an annoying pain in the neck. I can't help it that I'm a perfectionist.
Not to mention the added complications with, well, everything else. It's fun though! All in a days work.