I've got a foreach loop, going through each section of an XML document (an example of said XML document can be found in this SO question) and only display them in divs with corresponding classes.
<xsl:for-each select="sections/section">
<xsl:sort select="sc_index" />
<h2>
<xsl:value-of select='name' />
</h2>
<div class="rel10r3">
<ul>
<xsl:for-each select="instructions/instruction[releases//release='10r3']">
<xsl:sort select="index" />
<li>
<xsl:value-of select="content" />
</li>
</xsl:for-each>
</ul>
</div>
<div class="rel11r2" style="display:none">
<ul>
<xsl:for-each select="instructions/instruction[releases//release='11r2']">
<xsl:sort select="index" />
<li>
<xsl:value-of select="content" />
</li>
</xsl:for-each>
</ul>
</div>
<div class="rel12r1" style="display:none">
<ul>
<xsl:for-each select="instructions/instruction[releases//release='12r1']">
<xsl:sort select="index" />
<li>
<xsl:value-of select="content" />
</li>
</xsl:for-each>
</ul>
</div>
<div class="rel12r2" style="display:none">
<ul>
<xsl:for-each select="instructions/instruction[releases//release='12r2']">
<xsl:sort select="index" />
<li>
<xsl:value-of select="content" />
</li>
</xsl:for-each>
</ul>
</div>
<div class="rel13r1" style="display:none">
<ul>
<xsl:for-each select="instructions/instruction[releases//release='13r3']">
<xsl:sort select="index" />
<li>
<xsl:value-of select="content" />
</li>
</xsl:for-each>
</ul>
</div>
</xsl:for-each>
What I do after that is using a drop-down menu, and with the help of javascript switch the style.display property of the divs accordingly.
Form:
<form>
<select name="release" onchange="return showHide(this);">
<option value="10r3" selected="selected">10r3</option>
<option value="11r2">11r2</option>
<option value="12r1">12r1</option>
<option value="12r2">12r2</option>
<option value="13r1">13r1</option>
</select>
</form>
Javascript:
function showHide(selection) {
var f = selection.form;
// Retrieve the value of the option selected.
var opt = selection.options[selection.selectedIndex].value;
/* Retrieve all the div elements of the document and then parse them to
* see if they have a classname corresponding with the selected release.
* If it is the case, remove all display style, otherwise set the
* display style to none.
*/
var divArray = document.getElementsByTagName("div");
for(var i=0; i<divArray.length; i++){
var relArray = ["10r3","11r2","12r1","12r2","13r1"];
for(var j=0; j<relArray.length; j++){
var relName = relArray[j];
if(divArray[i].className == "rel"+relName){
if(opt===relName){
divArray[i].style.display = "";
}else{
divArray[i].style.display = "none";
}
}
}
}
return false;
}
I've already refactored my javascript code, but there is still plenty of repetitive code out there, and it can only grow the more releases there will be.
EDIT: One more thing, those instruction are shown in a CSS pop-up using a technique I found (reference):
HTML:
<div>
<a id="helplink" href="#" onclick="popup('popUpDiv')">Click Here to Open the Help</a>
</div>
Javascript:
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=50;
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=50;
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
CSS:
#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:700px;
height:700px;
z-index: 9002;
}
I mention this information, because the refactoring proposed seems to mess with my pop-up.
EDIT2: One of the shortcoming of the actual code I noticed is that I wouldn't be able to use release element of value All, which would make that the parent instruction keep its place relative to other elements of a specific release, whichever release is selected.
