Deze pagina is een vervolg op het "open" horizontale bar script. Ik verwijs voor de opbouw en uitleg naar deze pagina. Op déze pagina wordt alleen de gewijzigde code getoond die het omgekeerde effect geeft (het sluiten van de bars), en de button die het proces in werking zet. Plaats de button (met een link daarin) op de plaats die je wilt, en plaats het javascript zo laag als mogelijk in de body-sectie van jouw pagina. Er zijn slechts een paar kleine wijzingen ten opzichte van de "open-procedure". De linker en rechter "clip" hebben andere start en eind positie-parameters en de snelheid (variabele "barsnelheid") is verhoogd naar 40. Natuurlijk kan je ook de beide procedures "in elkaar schuiven" tot één procedure die zowel bij het openen als het sluiten de gewenste "bar-actie" uitvoert.
<input type="button" value="test de horizontale bar procedure" onclick="start_bar_transition();">
<script>
/*global window: false */
var clip_links,
clip_rechts,
i,
bar_interval,
bar_voor_strict_browser = document.getElementById && !document.all ? 1: 0,
bar_snelheid = 40,
tijdelijk_bar = [],
tijdelijk_bar2 = [];
clip_rechts = 0;
clip_links = bar_voor_strict_browser ? window.innerWidth: document.body.clientWidth;
function horizontale_bar() {
clip_rechts = clip_rechts + bar_snelheid;
for (i = 1; i <= 8; i = i + 2) {
tijdelijk_bar[i].clip = "rect(0px, " + clip_rechts + "px, auto, 0px)";
}
clip_links = clip_links - bar_snelheid;
for (i = 2; i <= 8; i = i + 2) {
tijdelijk_bar[i].clip = "rect(0px, auto, auto, " + clip_links + "px)";
if (clip_rechts <= 0) {
if (bar_voor_strict_browser) {
for (i = 1; i <= 8; i++) {
tijdelijk_bar[i].display = "none";
}
}
}
}
if (clip_links < 1) {
clearInterval(bar_interval);
location.href = "http://kompoos.nl/javascripts/transitions/horizontal-bars.html";
}
}
function start_bar_transition() {
var css_horizontale_bar = "#bar_horizontaal_1,#bar_horizontaal_2,#bar_horizontaal_3," + "#bar_horizontaal_4,#bar_horizontaal_5,#bar_horizontaal_6,#bar_horizontaal_7," + "#bar_horizontaal_8{position:absolute;background:#aaa;color:inherit}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = css_horizontale_bar;
} else {
stijl_element.appendChild(document.createTextNode(css_horizontale_bar));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
for (i = 1; i <= 8; i++) {
tijdelijk_bar[i] = document.getElementById("bar_horizontaal_" + i).style;
tijdelijk_bar[i].width = bar_voor_strict_browser ? window.innerWidth - 15 + "px": document.body.clientWidth + "px";
tijdelijk_bar[i].height = bar_voor_strict_browser ? window.innerHeight / 8 + "px": (document.documentElement.clientHeight / 8) + "px";
tijdelijk_bar[i].top = ((i - 1) * parseInt(tijdelijk_bar[i].height, 10)) + "px";
}
bar_interval = setInterval(function() {
horizontale_bar();
},
1);
}
</script>