topical media & game development
graphic-javascript-effect-fader-maker-effect.htm / htm
<!-- THREE STEPS TO INSTALL FADER MAKER:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Vjekoslav Begovic -->
<!-- Web Site: http://www.bosiljak.hr/ -->
<script type="text/javascript" language="JavaScript" src="graphic-javascript-effect-fader-provjera.js"></script>
<script type="text/javascript" language = "JavaScript">
var palettevis = false;
var ref;
var fader_maker_timer = null;
var fader_maker_bgtimer = null;
var fg = false;
var bg = false;
var bdy = false;
var sb = false;
var fgswitch = false;
var bgswitch = false;
var bodyswitch = false;
var scrollswitch = false;
var font_family = new Array("serif","sans-serif","cursive","fantasy","monospace","Arial, Helvetica, sans-serif","Verdana, Geneva, sans-serif","'Times New Roman', Times, serif","'MS Serif', 'New York', serif","'Courier New', Courier, monospace");
var font_size = new Array('4','6','8','10','12','14','16','18','20','22','24','26','28','30','32','34','36','38','40','larger','smaller','xx-small','x-small','small','medium','large','x-large','xx-large');
var letter_spacing = new Array();
for (var i=0; i<30; i++)
letter_spacing[i] = i+1;
letter_spacing[30] = 'normal';
function pokazi(text,evt){
with (document.getElementById('opis').style){
if (document.all){
left = evt.x + 20;
top = evt.y + document.body.scrollTop;
}
else{
left = evt.pageX + 20;
top = evt.pageY;
}
visibility = 'visible';
}
document.getElementById('opis').innerHTML = text;
}
function sakrij(){
with(document.getElementById('opis').style){
visibility = 'hidden';
top = 0;
left = 0;
}
}
function idizamnom(evt){
with (document.getElementById('opis').style){
if (document.all){
left = evt.x + 20;
top = evt.y + document.body.scrollTop;
}
else{
left = evt.pageX + 20;
top = evt.pageY;
}
}
}
function toHex(n){
var hexChars = "0123456789ABCDEF";
if (n == 0) return "00";
var j, k;
var temp = "";
while (n != 0){
j = n % 16;
n = (n - j)/16;
temp = hexChars.charAt(j) + temp;
}
if (temp.length < 2){
temp = "0" + temp;
}
return temp;
}
function showpalette(evt){
with (document.getElementById('palette').style){
visibility = 'visible';
if (document.all){
left = evt.x;
top = evt.y + document.body.scrollTop;
}
else{
left = evt.pageX;
top = evt.pageY;
}
}
palettevis = true;
}
function validate(form){
if (isEmpty(form.msg.value)){
alert("Message field could not be empty!");
return false;
}
if ((!form.fadeTxtColor.checked) && (!form.fadeTxtBgColor.checked) && (!form.fadeBodyBgColor.checked) && (!form.fadeScrollColor.checked)){
alert("Please, check at least one Fade.");
return false;
}
if (form.fadeTxtColor.checked){
if (isEmpty(form.txtStrColor.value) || isEmpty(form.txtEndColor.value)){
alert("Please, fill color fields where Fade is checked.");
return false;
}
else{
if ((!isValidColor(form.txtStrColor.value)) || (!isValidColor(form.txtEndColor.value))){
alert("Not a valid color. You can use color palette by clicking an arrow.");
return false;
}
}
}
if (form.fadeTxtBgColor.checked){
if (isEmpty(form.txtStrBgColor.value) || isEmpty(form.txtEndBgColor.value)){
alert("Please, fill color fields where Fade is checked.");
return false;
}
else{
if ((!isValidColor(form.txtStrBgColor.value)) || (!isValidColor(form.txtEndBgColor.value))){
alert("Not a valid color. You can use color palette by clicking an arrow.");
return false;
}
}
}
if (form.fadeBodyBgColor.checked){
if (isEmpty(form.bodyStrColor.value) || isEmpty(form.bodyEndColor.value)){
alert("Please, fill color fields where Fade is checked.");
return false;
}
else{
if ((!isValidColor(form.bodyStrColor.value)) || (!isValidColor(form.bodyEndColor.value))){
alert("Not a valid color. You can use color palette by clicking an arrow.");
return false;
}
}
}
if (form.fadeScrollColor.checked){
if (isEmpty(form.scrollStrColor.value) || isEmpty(form.scrollEndColor.value)){
alert("Please, fill color fields where Fade is checked.");
return false;
}
else{
if ((!isValidColor(form.scrollStrColor.value)) || (!isValidColor(form.scrollEndColor.value))){
alert("Not a valid color. You can use color palette by clicking an arrow.");
return false;
}
}
}
if (!isPosInteger(form.speed.value)){
alert("Speed must be a positive integer.");
return false;
}
return true;
}
function fade(){
if (fg){
color = "#" + toHex(str_red_txt) + toHex(str_green_txt) + toHex(str_blue_txt);
document.getElementById('tekst').style.color = color;
}
if (bg){
backcolor = "#" + toHex(str_red_bgtxt) + toHex(str_green_bgtxt) + toHex(str_blue_bgtxt);
document.getElementById('tekst').style.backgroundColor = backcolor;
}
if (bdy){
bdycolor = "#" + toHex(str_red_bdy) + toHex(str_green_bdy) + toHex(str_blue_bdy);
document.bgColor = bdycolor;
}
if (sb){
scrollcolor = "#" + toHex(str_red_scroll) + toHex(str_green_scroll) + toHex(str_blue_scroll);
document.body.style.scrollbarFaceColor = scrollcolor;
}
if (fg){
if (end_red_txt != str_red_txt){
if (end_red_txt > str_red_txt){
str_red_txt++;
}
else{
str_red_txt--;
}
}
if (end_green_txt != str_green_txt){
if (end_green_txt > str_green_txt){
str_green_txt++;
}
else{
str_green_txt--;
}
}
if (end_blue_txt != str_blue_txt){
if (end_blue_txt > str_blue_txt){
str_blue_txt++;
}
else{
str_blue_txt--;
}
}
}
if (bg){
if (end_red_bgtxt != str_red_bgtxt){
if (end_red_bgtxt > str_red_bgtxt){
str_red_bgtxt++;
}
else{
str_red_bgtxt--;
}
}
if (end_green_bgtxt != str_green_bgtxt){
if (end_green_bgtxt > str_green_bgtxt){
str_green_bgtxt++;
}
else{
str_green_bgtxt--;
}
}
if (end_blue_bgtxt != str_blue_bgtxt){
if (end_blue_bgtxt > str_blue_bgtxt){
str_blue_bgtxt++;
}
else{
str_blue_bgtxt--;
}
}
}
if (bdy){
if (end_red_bdy != str_red_bdy){
if (end_red_bdy > str_red_bdy){
str_red_bdy++;
}
else{
str_red_bdy--;
}
}
if (end_green_bdy != str_green_bdy){
if (end_green_bdy > str_green_bdy){
str_green_bdy++;
}
else{
str_green_bdy--;
}
}
if (end_blue_bdy != str_blue_bdy){
if (end_blue_bdy > str_blue_bdy){
str_blue_bdy++;
}
else{
str_blue_bdy--;
}
}
}
if (sb){
if (end_red_scroll != str_red_scroll){
if (end_red_scroll > str_red_scroll){
str_red_scroll++;
}
else{
str_red_scroll--;
}
}
if (end_green_scroll != str_green_scroll){
if (end_green_scroll > str_green_scroll){
str_green_scroll++;
}
else{
str_green_scroll--;
}
}
if (end_blue_scroll != str_blue_scroll){
if (end_blue_scroll > str_blue_scroll){
str_blue_scroll++;
}
else{
str_blue_scroll--;
}
}
}
if ((str_red_txt == end_red_txt) && (str_green_txt == end_green_txt) && (str_blue_txt == end_blue_txt) && (str_red_bgtxt == end_red_bgtxt) && (str_green_bgtxt == end_green_bgtxt) && (str_blue_bgtxt == end_blue_bgtxt) && (str_red_bdy == end_red_bdy) && (str_green_bdy == end_green_bdy) && (str_blue_bdy == end_blue_bdy) && (str_red_scroll == end_red_scroll) && (str_green_scroll == end_green_scroll) && (str_blue_scroll == end_blue_scroll)){
window.clearTimeout(fader_maker_timer);
if (document.fader.loop.checked){
preview();
}
}
else{
fader_maker_timer = window.setTimeout("fade()", parseInt(document.fader.speed.value));
}
}
function preview(){
if (validate(document.fader)){
document.getElementById('tekst').innerHTML = document.fader.msg.value;
document.getElementById('tekst').style.fontFamily = document.fader.family.options[document.fader.family.selectedIndex].value;
document.getElementById('tekst').style.fontSize = document.fader.size.options[document.fader.size.selectedIndex].value;
document.getElementById('tekst').style.letterSpacing = document.fader.spacing.options[document.fader.spacing.selectedIndex].value;
if (document.fader.bold.checked){
document.getElementById('tekst').style.fontWeight = "bold";
}
else{
document.getElementById('tekst').style.fontWeight = "normal";
}
if (document.fader.italic.checked){
document.getElementById('tekst').style.fontStyle = "italic";
}
else{
document.getElementById('tekst').style.fontStyle = "normal";
}
if (document.fader.fadeTxtColor.checked){
fader_maker_txtstart = document.fader.txtStrColor.value;
fader_maker_txtstop = document.fader.txtEndColor.value;
if (!fgswitch){
priv = fader_maker_txtstart;
fader_maker_txtstart = fader_maker_txtstop;
fader_maker_txtstop = priv;
}
fgswitch = !fgswitch;
}
else{
fader_maker_txtstart = "#000000";
fader_maker_txtstop = "#000000";
fg = false;
}
str_red_txt = eval("0x"+fader_maker_txtstart.substring(1,3));
str_green_txt = eval("0x"+fader_maker_txtstart.substring(3,5));
str_blue_txt = eval("0x"+fader_maker_txtstart.substring(5,7));
end_red_txt = eval("0x"+fader_maker_txtstop.substring(1,3));
end_green_txt = eval("0x"+fader_maker_txtstop.substring(3,5));
end_blue_txt = eval("0x"+fader_maker_txtstop.substring(5,7));
if (fader_maker_txtstart == fader_maker_txtstop){
document.getElementById('tekst').style.color = fader_maker_txtstart;
}
else{
if(document.fader.fadeTxtColor.checked){
fg = true;
}
}
if (document.fader.fadeTxtBgColor.checked){
fader_maker_bgtxtstart = document.fader.txtStrBgColor.value;
fader_maker_bgtxtstop = document.fader.txtEndBgColor.value;
if (!bgswitch){
priv = fader_maker_bgtxtstart;
fader_maker_bgtxtstart = fader_maker_bgtxtstop;
fader_maker_bgtxtstop = priv;
}
bgswitch = !bgswitch;
}
else{
fader_maker_bgtxtstart = "#FFFFFF";
fader_maker_bgtxtstop = "#FFFFFF";
bg = false;
}
str_red_bgtxt = eval("0x"+fader_maker_bgtxtstart.substring(1,3));
str_green_bgtxt = eval("0x"+fader_maker_bgtxtstart.substring(3,5));
str_blue_bgtxt = eval("0x"+fader_maker_bgtxtstart.substring(5,7));
end_red_bgtxt = eval("0x"+fader_maker_bgtxtstop.substring(1,3));
end_green_bgtxt = eval("0x"+fader_maker_bgtxtstop.substring(3,5));
end_blue_bgtxt = eval("0x"+fader_maker_bgtxtstop.substring(5,7));
if (fader_maker_bgtxtstart == fader_maker_bgtxtstop){
document.getElementById('tekst').style.backgroundColor = fader_maker_bgtxtstart;
}
else{
if (document.fader.fadeTxtBgColor.checked){
bg = true;
}
}
if (document.fader.fadeBodyBgColor.checked){
fader_maker_bodystart = document.fader.bodyStrColor.value;
fader_maker_bodystop = document.fader.bodyEndColor.value;
if (!bodyswitch){
priv = fader_maker_bodystart;
fader_maker_bodystart = fader_maker_bodystop;
fader_maker_bodystop = priv;
}
bodyswitch = !bodyswitch;
}
else{
fader_maker_bodystart = "#FFFFFF";
fader_maker_bodystop = "#FFFFFF";
bdy = false;
}
str_red_bdy = eval("0x"+fader_maker_bodystart.substring(1,3));
str_green_bdy = eval("0x"+fader_maker_bodystart.substring(3,5));
str_blue_bdy = eval("0x"+fader_maker_bodystart.substring(5,7));
end_red_bdy = eval("0x"+fader_maker_bodystop.substring(1,3));
end_green_bdy = eval("0x"+fader_maker_bodystop.substring(3,5));
end_blue_bdy = eval("0x"+fader_maker_bodystop.substring(5,7));
if (fader_maker_bodystart == fader_maker_bodystop){
document.bgColor = fader_maker_bodystart;
bdy = false;
}
else{
if(document.fader.fadeBodyBgColor.checked){
bdy = true;
}
}
if (document.fader.fadeScrollColor.checked){
fader_maker_scrollstart = document.fader.scrollStrColor.value;
fader_maker_scrollstop = document.fader.scrollEndColor.value;
if (!scrollswitch){
priv = fader_maker_scrollstart;
fader_maker_scrollstart = fader_maker_scrollstop;
fader_maker_scrollstop = priv;
}
scrollswitch = !scrollswitch;
}
else{
fader_maker_scrollstart = "#cccccc";
fader_maker_scrollstop = "#cccccc";
sb = false;
}
str_red_scroll = eval("0x"+fader_maker_scrollstart.substring(1,3));
str_green_scroll = eval("0x"+fader_maker_scrollstart.substring(3,5));
str_blue_scroll = eval("0x"+fader_maker_scrollstart.substring(5,7));
end_red_scroll = eval("0x"+fader_maker_scrollstop.substring(1,3));
end_green_scroll = eval("0x"+fader_maker_scrollstop.substring(3,5));
end_blue_scroll = eval("0x"+fader_maker_scrollstop.substring(5,7));
if (fader_maker_scrollstart == fader_maker_scrollstop){
document.body.style.scrollbarFaceColor = fader_maker_scrollstart;
sb = false;
}
else{
if(document.fader.fadeScrollColor.checked){
sb = true;
}
}
fade();
}
}
function setDefaultValues(){
with(document.fader){
msg.value = document.getElementById('tekst').innerText = "Fader Maker";
fadeTxtColor.checked = true;
speed.value="50";
txtStrColor.value = document.getElementById('txtStrColor').style.backgroundColor = "#FF0000";
txtEndColor.value = document.getElementById('txtEndColor').style.backgroundColor = "#0000FF";
family.options[6].selected = true;
size.options[27].selected = true;
family.style.backgroundColor = "#cccccc";
size.style.backgroundColor = "#cccccc";
spacing.style.backgroundColor = "#cccccc";
bold.checked = true;
fmevent.options[0].checked = true;
spacing.options[30].selected = true;
loop.checked = true;
}
document.getElementById('generatedCode').value = "";
preview();
}
function resetform(){
document.fader.reset();
document.fader.txtStrColor.style.backgroundColor = 'white';
document.fader.txtEndColor.style.backgroundColor = 'white';
document.fader.txtStrBgColor.style.backgroundColor = 'white';
document.fader.txtEndBgColor.style.backgroundColor = 'white';
document.fader.bodyStrColor.style.backgroundColor = 'white';
document.fader.bodyEndColor.style.backgroundColor = 'white';
document.fader.scrollStrColor.style.backgroundColor = 'white';
document.fader.scrollEndColor.style.backgroundColor = 'white';
document.fader.generatedCode.value = "";
}
function generatecode(){
if (validate(document.fader)){
if (document.fader.fmevent.options[1].selected){
var fmButtonText = prompt("Specify text on your button", "Fade!");
if (fmButtonText == "") fmButtonText = "Fade!";
code = "4";
}
else { code="3"; }
code +=" steps to implement your script:\n\n"
code += "1. Place this into the HEAD section of your page.\n\n";
code += "<script language = \"JavaScript\">\n";
code +="<!--Created by Fader Maker (http://www.bosiljak.hr/fadermaker/)\n";
code += "var fmTimer = null;\n";
if (document.fader.loop.checked){
if (document.fader.fadeTxtColor.checked)
code+="var fmfg = false;\n";
if (document.fader.fadeTxtBgColor.checked)
code+="var fmbg = false;\n";
if (document.fader.fadeBodyBgColor.checked)
code+="var fmbody = false;\n";
if (document.fader.fadeScrollColor.checked)
code+="var fmscroll = false;\n";
}
code += "function fminit(){\n";
code += "if (!document.getElementById) return;\n";
if (document.fader.fadeTxtColor.checked){
var fader_maker_txtstart = document.fader.txtStrColor.value;
var fader_maker_txtstop = document.fader.txtEndColor.value;
var fma1 = eval("0x"+fader_maker_txtstart.substring(1,3));
var fma2 = eval("0x"+fader_maker_txtstart.substring(3,5));
var fma3 = eval("0x"+fader_maker_txtstart.substring(5,7));
var fma4 = eval("0x"+fader_maker_txtstop.substring(1,3));
var fma5 = eval("0x"+fader_maker_txtstop.substring(3,5));
var fma6 = eval("0x"+fader_maker_txtstop.substring(5,7));
code += "fma1="+fma1+"; fma2="+fma2+"; fma3="+fma3+";\n";
code += "fma4="+fma4+"; fma5="+fma5+"; fma6="+fma6+";\n";
if (document.fader.loop.checked){
code += "if (!fmfg){\n";
code += "fmtemp=fma1; fma1=fma4; fma4=fmtemp; fmtemp=fma2; fma2=fma5; fma5=fmtemp; fmtemp=fma3; fma3=fma6; fma6=fmtemp;\n";
code += "}\n";
code += "fmfg = !fmfg;\n";
}
}
if (document.fader.fadeTxtBgColor.checked){
fader_maker_bgtxtstart = document.fader.txtStrBgColor.value;
fader_maker_bgtxtstop = document.fader.txtEndBgColor.value;
var fmb1 = eval("0x"+fader_maker_bgtxtstart.substring(1,3));
var fmb2 = eval("0x"+fader_maker_bgtxtstart.substring(3,5));
var fmb3 = eval("0x"+fader_maker_bgtxtstart.substring(5,7));
var fmb4 = eval("0x"+fader_maker_bgtxtstop.substring(1,3));
var fmb5 = eval("0x"+fader_maker_bgtxtstop.substring(3,5));
var fmb6 = eval("0x"+fader_maker_bgtxtstop.substring(5,7));
code += "fmb1="+fmb1+"; fmb2="+fmb2+"; fmb3="+fmb3+";\n";
code += "fmb4="+fmb4+"; fmb5="+fmb5+"; fmb6="+fmb6+";\n";
if (document.fader.loop.checked){
code += "if (!fmbg){\n";
code += "fmtemp=fmb1; fmb1=fmb4; fmb4=fmtemp; fmtemp=fmb2; fmb2=fmb5; fmb5=fmtemp; fmtemp=fmb3; fmb3=fmb6; fmb6=fmtemp;\n";
code += "}\n";
code += "fmbg = !fmbg;\n";
}
}
if (document.fader.fadeBodyBgColor.checked){
fader_maker_bodystart = document.fader.bodyStrColor.value;
fader_maker_bodystop = document.fader.bodyEndColor.value;
var fmc1 = eval("0x"+fader_maker_bodystart.substring(1,3));
var fmc2 = eval("0x"+fader_maker_bodystart.substring(3,5));
var fmc3 = eval("0x"+fader_maker_bodystart.substring(5,7));
var fmc4 = eval("0x"+fader_maker_bodystop.substring(1,3));
var fmc5 = eval("0x"+fader_maker_bodystop.substring(3,5));
var fmc6 = eval("0x"+fader_maker_bodystop.substring(5,7));
code += "fmc1="+fmc1+"; fmc2="+fmc2+"; fmc3="+fmc3+";\n";
code += "fmc4="+fmc4+"; fmc5="+fmc5+"; fmc6="+fmc6+";\n";
if (document.fader.loop.checked){
code += "if (!fmbody){\n";
code += "fmtemp=fmc1; fmc1=fmc4; fmc4=fmtemp; fmtemp=fmc2; fmc2=fmc5; fmc5=fmtemp; fmtemp=fmc3; fmc3=fmc6; fmc6=fmtemp;\n";
code += "}\n";
code += "fmbody = !fmbody;\n";
}
}
if (document.fader.fadeScrollColor.checked){
fader_maker_scrollstart = document.fader.scrollStrColor.value;
fader_maker_scrollstop = document.fader.scrollEndColor.value;
var fmd1 = eval("0x"+fader_maker_scrollstart.substring(1,3));
var fmd2 = eval("0x"+fader_maker_scrollstart.substring(3,5));
var fmd3 = eval("0x"+fader_maker_scrollstart.substring(5,7));
var fmd4 = eval("0x"+fader_maker_scrollstop.substring(1,3));
var fmd5 = eval("0x"+fader_maker_scrollstop.substring(3,5));
var fmd6 = eval("0x"+fader_maker_scrollstop.substring(5,7));
code += "fmd1="+fmd1+"; fmd2="+fmd2+"; fmd3="+fmd3+";\n";
code += "fmd4="+fmd4+"; fmd5="+fmd5+"; fmd6="+fmd6+";\n";
if (document.fader.loop.checked){
code += "if (!fmscroll){\n";
code += "fmtemp=fmd1; fmd1=fmd4; fmd4=fmtemp; fmtemp=fmd2; fmd2=fmd5; fmd5=fmtemp; fmtemp=fmd3; fmd3=fmd6; fmd6=fmtemp;\n";
code += "}\n";
code += "fmscroll = !fmscroll;\n";
}
}
code += "fmFade();\n";
code += "}\n";
code += "function fmToHex(n){\n";
code += "var hexChars = \"0123456789ABCDEF\";\n";
code += "if (n == 0) return \"00\";\n";
code += "var j, n;\n";
code += "var temp = \"\";\n";
code += "while (n != 0){\n";
code += "j = n % 16;\n";
code += "n = (n - j)/16;\n";
code += "temp = hexChars.charAt(j) + temp;\n";
code += "}\n";
code += "if (temp.length < 2){\n";
code += "temp = \"0\" + temp;\n";
code += "}\n";
code += "return temp;\n";
code += "}\n\n";
code += "function fmFade(){\n";
code += "obj = document.getElementById('tekst').style;\n";
if (document.fader.fadeTxtColor.checked){
code += "fmcolor = \"#\" + fmToHex(fma1) + fmToHex(fma2) + fmToHex(fma3);\n";
code += "obj.color = fmcolor;\n";
code += "if (fma1 != fma4){\n";
code += "if (fma4 > fma1){fma1++;}\n";
code += "else{fma1--;}}\n";
code += "if (fma2 != fma5){\n";
code += "if (fma5 > fma2){fma2++;}\n";
code += "else{fma2--;}}\n";
code += "if (fma3 != fma6){\n";
code += "if (fma6 > fma3){fma3++;}\n";
code += "else{fma3--;}}\n";
}
if (document.fader.fadeTxtBgColor.checked){
code += "fmbackcolor = \"#\" + fmToHex(fmb1) + fmToHex(fmb2) + fmToHex(fmb3);\n";
code += "obj.backgroundColor = fmbackcolor;\n";
code += "if (fmb1 != fmb4){\n";
code += "if (fmb4 > fmb1){fmb1++;}\n";
code += "else{fmb1--;}}\n";
code += "if (fmb2 != fmb5){\n";
code += "if (fmb5 > fmb2){fmb2++;}\n";
code += "else{fmb2--;}}\n";
code += "if (fmb3 != fmb6){\n";
code += "if (fmb6 > fmb3){fmb3++;}\n";
code += "else{fmb3--;}}\n";
}
if (document.fader.fadeBodyBgColor.checked){
code += "fmbodycolor = \"#\" + fmToHex(fmc1) + fmToHex(fmc2) + fmToHex(fmc3);\n";
code += "document.bgColor = fmbodycolor;\n";
code += "if (fmc1 != fmc4){\n";
code += "if (fmc4 > fmc1){fmc1++;}\n";
code += "else{fmc1--;}}\n";
code += "if (fmc2 != fmc5){\n";
code += "if (fmc5 > fmc2){fmc2++;}\n";
code += "else{fmc2--;}}\n";
code += "if (fmc3 != fmc6){\n";
code += "if (fmc6 > fmc3){fmc3++;}\n";
code += "else{fmc3--;}}\n";
}
if (document.fader.fadeScrollColor.checked){
code += "if (document.all){\n";
code += "fmscrollcolor = \"#\" + fmToHex(fmd1) + fmToHex(fmd2) + fmToHex(fmd3);\n";
code += "document.body.style.scrollbarFaceColor = fmscrollcolor;\n";
code += "if (fmd1 != fmd4){\n";
code += "if (fmd4 > fmd1){fmd1++;}\n";
code += "else{fmd1--;}}\n";
code += "if (fmd2 != fmd5){\n";
code += "if (fmd5 > fmd2){fmd2++;}\n";
code += "else{fmd2--;}}\n";
code += "if (fmd3 != fmd6){\n";
code += "if (fmd6 > fmd3){fmd3++;}\n";
code += "else{fmd3--;}}\n";
code+="}\n";
code+="else{fmd1=fmd2=fmd3=fmd4=fmd5=fmd6=0}\n";
}
code += "if (";
if (document.fader.fadeTxtColor.checked){
code += "(fma1 == fma4) && (fma2 == fma5) && (fma3 == fma6)";
if (document.fader.fadeTxtBgColor.checked){
code += " && (fmb1 == fmb4) && (fmb2 == fmb5) && (fmb3 == fmb6)";
}
if (document.fader.fadeBodyBgColor.checked){
code += " && (fmc1 == fmc4) && (fmc2 == fmc5) && (fmc3 == fmc6)\n";
}
if (document.fader.fadeScrollColor.checked){
code += " && (fmd1 == fmd4) && (fmd2 == fmd5) && (fmd3 == fmd6)\n";
}
}
else{
if (document.fader.fadeTxtBgColor.checked){
code += "(fmb1 == fmb4) && (fmb2 == fmb5) && (fmb3 == fmb6)";
if (document.fader.fadeBodyBgColor.checked){
code += " && (fmc1 == fmc4) && (fmc2 == fmc5) && (fmc3 == fmc6)\n";
}
if (document.fader.fadeScrollColor.checked){
code += " && (fmd1 == fmd4) && (fmd2 == fmd5) && (fmd3 == fmd6)\n";
}
}
else{
if (document.fader.fadeBodyBgColor.checked){
code += "(fmc1 == fmc4) && (fmc2 == fmc5) && (fmc3 == fmc6)\n";
if (document.fader.fadeScrollColor.checked){
code += " && (fmd1 == fmd4) && (fmd2 == fmd5) && (fmd3 == fmd6)\n";
}
}
else{
code += "(fmd1 == fmd4) && (fmd2 == fmd5) && (fmd3 == fmd6)\n";
}
}
}
code += "){\n";
code += "window.clearTimeout(fmTimer);\n";
if (document.fader.loop.checked){
code += "fminit()";
}
code += "}\n";
code += "else{\n";
code += "fmTimer = window.setTimeout(\"fmFade()\"," + parseInt(document.fader.speed.value)+");\n";
code += "}\n";
code += "}\n";
if (document.fader.fmevent.options[0].selected)
code += "onload = fminit\n";
code += "-->\n";
code += "</script"+">\n\n";
code += "2. Put this on the place where you want your message to be.\n\n";
code += "<span id=\"tekst\" style=\"font-size:"+document.fader.size.options[document.fader.size.selectedIndex].value+"; font-family: "+document.fader.family.options[document.fader.family.selectedIndex].value+"; letter-spacing:"+document.fader.spacing.options[document.fader.spacing.selectedIndex].value+"; font-weight:"
if (document.fader.bold.checked){
code += "bold";
}
else{
code += "normal";
}
code += "; font-style:";
if (document.fader.italic.checked){
code += "italic";
}
else{
code += "normal";
}
code += "; padding-left:20; padding-right:20;\"";
if (document.fader.fmevent.options[2].selected)
code+=" onmouseover=\"fminit()\"";
code+=">"+document.fader.msg.value+"</span>\n\n";
if (!document.fader.fmevent.options[1].selected)
code += "3. Enjoy!";
if (document.fader.fmevent.options[1].selected){
code += "3. Put this where you want your button to be.\n\n";
code += "<input type=\"button\" value=\""+fmButtonText+"\" onclick=\"fminit()\">\n\n";
code += "4. Enjoy!";
}
document.getElementById('generatedCode').value = code;
}
}
function processblur(field){
if (isValidColor(field.value))
field.style.backgroundColor = field.value;
else
field.style.backgroundColor = 'white';
}
function hidepalette(){
palettevis = !palettevis;
if (palettevis){
paletevis=false;
document.getElementById('palette').style.visibility='hidden';
}
}
</script>
<style>
div#palette{
border:outset;
background-color:white;
position:absolute;
visibility:hidden;
Z-index: 10;
}
div#opis {
font-family : sans-serif;
font-size : small;
font-style : normal;
border : yellow;
background : #ffffcc;
visibility : hidden;
top : 0px;
left : 0px;
z-index : 100;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding : 3 px, 10px;
}
span#tekst {
text-align:center;
font-size:xx-large;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
padding-left:20;
padding-right:20;
}
a.highlight{
text-decoration:none;
color:blue;
}
</style>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onload="setDefaultValues()" onclick="hidepalette()>
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Vjekoslav Begovic -->
<!-- Web Site: http://www.bosiljak.hr/ -->
<div id="palette" >
<table cellspacing="0" cellpadding="0" border="1">
<script>
for (k=0; k<256; k+=51){
document.write("<tr>");
for (i=0; i<256; i+=51){
if (i==153) document.write("<tr>");
for (j=0; j<256; j+=51){
document.write("<td style=\"width:10; height:15; cursor:hand;\" bgcolor=\""+toHex(i)+toHex(k)+toHex(j)+"\" onClick=\"ref.value = ref.style.backgroundColor = this.bgColor.toString().toUpperCase(); document.getElementById('palette').style.visibility = 'hidden';\" onMouseOver=\"pokazi(this.bgColor.toString().toUpperCase(), event)\" onMouseMove=\"idizamnom(event)\" onMouseOut = \"sakrij()\"></td>");
}
}
document.write("</tr>");
}
</script>
</table>
</div>
<div id="opis" style="position:absolute"></div>
<div align="center">
<span id="tekst" style=""></span>
</div>
<form name="fader" id="fader"><input type="hidden" name="PHPSESSID" value="ab14435d21b537e18eaa9a6d70337441" />
<p><strong>Type your text here:</strong>
<input type="text" name = "msg" id="msg" size="50">
</p>
<table>
<tr>
<td>Font</td>
<td>
<select name="family" id="family">
<script language="JavaScript">
for (var i=0; i<font_family.length; i++)
document.write("<option style=\"font-size:smaller;\" value=\""+font_family[i]+"\">"+font_family[i]+"</option>");
</script>
</select>
</td>
<td style="padding-left:7">Size</td>
<td>
<select name="size" id="size">
<script language="JavaScript">
for (var i=0; i<font_size.length; i++)
document.write("<option value=\""+font_size[i]+"\">"+font_size[i]+"</option>");
</script>
</select>
</td>
<td style="padding-left:7">Bold<input type="checkbox" name="bold"></td>
<td style="padding-left:7">Italic<input type="checkbox" name="italic"></td>
<td style="padding-left:7">Spacing</td>
<td>
<select name="spacing" id="spacing">
<script language="JavaScript">
for (var i=0; i<letter_spacing.length; i++)
document.write("<option value=\""+letter_spacing[i]+"\">"+letter_spacing[i]+"</option>");
</script>
</select>
</td>
</tr>
</table>
<p>
<table>
<tr>
<th colspan="2">Fade:</th>
<th colspan="2">From color:</th>
<th colspan="2">To color:</th>
</tr>
<tr>
<td><input type="checkbox" name="fadeTxtColor" value="fadeTxtColor"></td>
<td>Text Color</td>
<td><input type = "text" name = "txtStrColor" id = "txtStrColor" size="7" maxsize="7" onblur = "processblur(this);"></td>
<td><img id="strTxtColorArrow" src="arrow.gif" width="10" height="24" border="0" alt="Show palette" onclick="ref = document.fader.txtStrColor; showpalette(event);"></td>
<td><input type = "text" name = "txtEndColor" id = "txtEndColor" size="7" maxsize="7" onblur = "processblur(this);"></td>
<td><img id="endTxtColorArrow" src="arrow.gif" width="10" height="24" border="0" alt="Show palette" onclick="ref = document.fader.txtEndColor; showpalette(event);"></td>
</tr>
<tr>
<td><input type="checkbox" name="fadeTxtBgColor" value="fadeTxtBgColor"></td>
<td>Text Background Color</td>
<td><input type = "text" name = "txtStrBgColor" id = "txtStrBgColor" size="7" maxsize="7" onblur = "processblur(this);"></td>
<td><img id="strTxtBgColorArrow" src="arrow.gif" width="10" height="24" border="0" alt="Show palette" onclick="ref = document.fader.txtStrBgColor; showpalette(event);"></td>
<td><input type = "text" name = "txtEndBgColor" id = "txtEndBgColor" size="7" maxsize="7" onblur = "processblur(this);"></td>
<td><img id="endTxtBgColorArrow" src="arrow.gif" width="10" height="24" border="0" alt="Show palette" onclick="ref = document.fader.txtEndBgColor; showpalette(event);"></td>
</tr>
<tr>
<td><input type="checkbox" name="fadeBodyBgColor" value="fadeBodyBgColor"></td>
<td>Document Background Color</td>
<td><input type = "text" name = "bodyStrColor" id = "bodyStrColor" size="7" maxsize="7" onblur = "processblur(this);"></td>
<td><img id="strBodyColorArrow" src="arrow.gif" width="10" height="24" border="0" alt="Show palette" onclick="ref = document.fader.bodyStrColor; showpalette(event);"></td>
<td><input type = "text" name = "bodyEndColor" id = "bodyEndColor" size="7" maxsize="7" onblur = "processblur(this);"></td>
<td><img id="endBodyColorArrow" src="arrow.gif" width="10" height="24" border="0" alt="Show palette" onclick="ref = document.fader.bodyEndColor; showpalette(event);"></td>
</tr>
<tr>
<td><input type="checkbox" name="fadeScrollColor" value="fadeScrollColor"></td>
<td>Scrollbar Color <span style="color:blue;">(IE5.5+)</span></td>
<td><input type = "text" name = "scrollStrColor" id = "scrollStrColor" size="7" maxsize="7" onblur = "processblur(this);"></td>
<td><img id="strScrollColorArrow" src="arrow.gif" width="10" height="24" border="0" alt="Show palette" onclick="ref = document.fader.scrollStrColor; showpalette(event);"></td>
<td><input type = "text" name = "scrollEndColor" id = "scrollEndColor" size="7" maxsize="7" onblur = "processblur(this);"></td>
<td><img id="endScrollColorArrow" src="arrow.gif" width="10" height="24" border="0" alt="Show palette" onclick="ref = document.fader.scrollEndColor; showpalette(event);"></td>
</tr>
</table>
</p>
<p>
<table>
<tr>
<th>Event</th>
<td><select name="fmevent" id="fmevent0">
<option value="onload">on load</option>
<option value="onclick">on button click</option>
<option value="onmouseover">on mouse over</option>
</select>
</td>
<td style="padding-left:20"><input type="checkbox" name="loop" id="loop" value="loop"></td>
<th>Loop</th>
<th style="padding-left:20">Speed</th>
<td><input type="text" name="speed" id="speed" size="3" ></td>
</tr>
</table>
</p>
<p><table>
<tr>
<td><input type="button" value="Preview" onclick = "fgswitch=bgswitch=bodyswitch=scrollswitch=true; preview()"></td>
<td><input type="button" value="OK, Generate Code!" onclick="generatecode()"></td>
<td><input type="button" value="Reset" onclick="resetform()"></td>
</tr>
</table>
</p>
<p>
<strong>Generated Code</strong><a class="highlight" href = "javascript:document.getElementById('generatedCode').focus();document.getElementById('generatedCode').select();"> [Highlight all]</a>
<br>
<textarea cols="60" rows="10" name="generatedCode" id="generatedCode" id="generatedCode" readonly="readonly"></textarea>
</p>
</form>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 36.11 KB -->
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
