Vervang de body start-tag door de code die hieronder staat (de body-tag en de daarop volgende div's). Vergeet niet om, als allerlaatste vóór de body sluit-tag, de </div> te plaatsen (de procedure werkt niet zonder deze afsluiting). Alle code van jouw pagina moet hiertussen geplaatst worden. Het javascript plaats je zo laag als mogelijk in de body-sectie van de pagina. De div's met de class gradient bevatten de parameters van de kleur en de breedte van de linear gradiënt. Vervang de kleur-waarden door jouw eigen keuze, en pas de breedte van de gradiënt aan met de width. Maak je overigens geen zorgen dat op deze pagina (bij het naar rechts scrollen) de gradient "stopt"; dat komt door de broncode van het script die tussen "pre-tags" staat. Bij jou zal de inhoud zich voegen naar de breedte van de pagina. Het javascript is foutloos volgens JSLint, en ook de overige validators geven de pagina "groen".
<body onresize="window.location=window.location;">
<div class="gradient ffbbbb ffffdd horizontal" style='margin:0px auto; position: absolute; top: 0%; left: 0%; width: 40%; height: 600%;'></div>
<div class="gradient ffffdd bbffbb horizontal" style='margin:0px auto;position: absolute; top: 0%; left: 55%; width: 44.5%; height: 600%; background:#bbffbb;'></div>
<div style='position:absolute;z-index:2;width:98.9%;height:100%;'>
HIER ALLE BODY-CODE VOOR JOUW PAGINA
</div>
<script>
/*global window: false */
/*global navigator: false */
/*global document: false */
var check_voor_ie9_browser = {
browser_versie: function () {
'use strict';
var de_versie = 999;
if (navigator.appVersion.indexOf("MSIE") !== -1) {
de_versie = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return de_versie;
}
};
var de_css_code = "body,html{background:#ffffdd;bottom:0;margin:0;padding-left:4px}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var gradient_object_array = [],
objecten = [],
gradient_parameters,
gradient_horizontaal_verticaal,
gradient_pad = [],
gradient_array,
gradient_procent,
dom_tijdelijk,
disp,
gradient_span,
a,
i,
c,
x,
y,
w,
h,
p,
g,
de_html;
function haal_gradient_object() {
'use strict';
a = document.getElementsByTagName("*");
for (i = 0; i < a.length; i = i + 1) {
c = a[i].className;
if (c !== "") {
if (c.indexOf("gradient") === 0) {
objecten[objecten.length] = a[i];
}
}
}
return objecten;
}
function set_gradient_hue(originele_kleur, procent_opacity, rgb_mask) {
'use strict';
var de_gradient_kleur = [];
for (w = 0; w < originele_kleur.length; w = w + 1) {
de_gradient_kleur[w] = Math.round(originele_kleur[w] * procent_opacity) + Math.round(rgb_mask[w] * (1.0 - procent_opacity));
}
return de_gradient_kleur;
}
function maak_decimaal(hex) {
'use strict';
return parseInt(hex, 16);
}
function long_hex_maak_decimaal(longhex) {
'use strict';
var ddd = [maak_decimaal(longhex.substring(0, 2)), maak_decimaal(longhex.substring(2, 4)), maak_decimaal(longhex.substring(4, 6))];
return ddd;
}
function maak_gradient_pad(gradient_een, gradient_twee) {
'use strict';
var gradient_pad = [];
gradient_procent = 1.0;
do {
gradient_pad[gradient_pad.length] = set_gradient_hue(long_hex_maak_decimaal(gradient_een), gradient_procent, long_hex_maak_decimaal(gradient_twee));
gradient_procent -= 0.01;
} while (gradient_procent > 0);
return gradient_pad;
}
function gradient_opacity(obj) {
'use strict';
disp = document.defaultView.getComputedStyle(obj, '').display;
if (disp === "block") {
gradient_span = document.createElement("div");
} else {
gradient_span = document.createElement("span");
}
de_html = obj.innerHTML;
obj.innerHTML = "";
gradient_span.innerHTML = de_html;
gradient_span.setAttribute("style", "position:relative;z-index:10;");
obj.appendChild(gradient_span);
}
function linear_gradient() {
'use strict';
if (!document.getElementById) {
return;
}
gradient_object_array = haal_gradient_object();
if (!gradient_object_array.length) {
return;
}
for (i = 0; i < gradient_object_array.length; i = i + 1) {
gradient_parameters = gradient_object_array[i].className.split(" ");
if (document.all && !window.opera && (check_voor_ie9_browser.browser_versie() < 9)) {
gradient_object_array[i].style.width = gradient_object_array[i].offsetWidth + "px";
if (gradient_parameters[3] === "horizontal") {
gradient_horizontaal_verticaal = 1;
} else {
gradient_horizontaal_verticaal = 0;
}
gradient_object_array[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType=" + gradient_horizontaal_verticaal + ",StartColorStr=\"#" + gradient_parameters[1] + "\",EndColorStr=\"#" + gradient_parameters[2] + "\")";
} else {
gradient_array = maak_gradient_pad(gradient_parameters[1], gradient_parameters[2]);
x = 0;
y = 0;
if (gradient_parameters[3] === "horizontal") {
w = Math.round(gradient_object_array[i].offsetWidth / gradient_array.length);
if (!w) {
w = 1;
}
h = gradient_object_array[i].offsetHeight;
} else {
h = Math.round(gradient_object_array[i].offsetHeight / gradient_array.length);
if (!h) {
h = 1;
}
w = gradient_object_array[i].offsetWidth;
}
gradient_opacity(gradient_object_array[i]);
dom_tijdelijk = document.createDocumentFragment();
for (p = 0; p < gradient_array.length; p = p + 1) {
g = document.createElement("div");
g.setAttribute("style", "position:absolute;z-index:0;top:" + y + "px;left:" + x + "px;height:" + h + "px;width:" + w + "px;background-color:rgb(" + gradient_array[p][0] + "," + gradient_array[p][1] + "," + gradient_array[p][2] + ");");
if (gradient_parameters[3] === "horizontal") {
x += w;
} else {
y += h;
}
dom_tijdelijk.appendChild(g);
if (y >= gradient_object_array[i].offsetHeight || x >= gradient_object_array[i].offsetWidth) {
break;
}
}
gradient_object_array[i].appendChild(dom_tijdelijk);
dom_tijdelijk = null;
}
}
}
if (window.addEventListener) {
window.addEventListener("load", linear_gradient, false);
} else {
window.attachEvent("onload", linear_gradient);
}
</script>