hallo alle zusammen
ich hoffe man kann mir helfen
ich habe eine index seite, in die ich per php die restlichen seiten intrgrieren lasse. eine davon ist meine email seite. in der email seite habe ich inputfelder,
die per xregexp geprüft werden. da dachte ich mir da kann man doch einen schönen effeckt hinzufügen, und habe im internet auch ein javascript gefunden,
das anhand von klassifizierungen (xclasserr, xclassokay), direkt bei der eingabe, den hintergrund von standart grau auf, bei fehler in rot und bei
richtiger eingabe in grün umwandelt.
in der beschreibung hieß es ausdrücklich ganz am schluß des html dokumentes erst das script laden. getan und es funktionierte beim testen.
beim testen habe ich aber die email seite alleine getestet, da der test erfolgreich war, habe ich die mit der index seite zusammen probieren wollen,
da spielt mir aber das script einen streich, denn wenn die index seite die email seite via php intergriert, (durch klicken im menü) dann heißt es,
diese seite kann nicht geöffnet werden und der broser bringt die fehlerseite "Die Webseite kann nicht angezeigt werden."
das scipt ist angefügt, ich hoffe jemand kann mir sagen, wieso der fehler ist und was ich daran ändern muß
danke im vorraus
Code
// JavaScript Document
var isIE = (window.opera || window.netscape) ? false : true;
var xElements = new Object();
var xTooltip = null;
function getByTag(tagName) {
return document.getElementsByTagName(tagName);
}
function getById(id) {
return document.getElementById(id);
}
function debug(msg) {
alert("[debug] " + msg);
}
function addEventOnClick(node,f) {
if (!isIE) {
node.setAttribute("onclick", f);
} else {
node.onclick = new Function(f);
}
}
function addEventOnMouseOver(node,f) {
if (!isIE) {
node.setAttribute("onmouseover", f);
} else {
node.onmouseover = new Function(f);
}
}
function addEventOnMouseMove(node,f) {
if (!isIE) {
node.setAttribute("onmousemove", f);
} else {
node.onmousemove = new Function(f);
}
}
function addEventOnMouseOut(node,f) {
if (!isIE) {
node.setAttribute("onmouseout", f);
} else {
node.onmouseout = new Function(f);
}
}
function getClassName(node) {
if (isIE) {
return node.className;
} else {
return node.getAttribute("class");
}
}
function setClassName(node, c) {
if (isIE) {
node.className = c;
} else {
return node.setAttribute("class",c);
}
}
function appendToString(str, add) {
if (str == null) return add;
if (add == null) return str;
if (str.indexOf(add) == -1) {
return (str + " " + add);
} else {
return str;
}
}
function removeFromString(str, rem) {
if (str == null) return ("");
if (rem == null) return str;
if (str.indexOf(rem) != -1) {
var array = str.split(rem);
return array.join(" ");
} else {
return str;
}
}
function addClassToNodeStyle(node, nc) {
if ((node == null) || (nc == null)) return false;
var oldclass = getClassName(node);
setClassName(node,appendToString(oldclass,nc));
}
function removeClassFromNodeStyle(node, nc) {
if ((node == null) || (nc == null)) return null;
var oldclass = getClassName(node);
setClassName(node,removeFromString(oldclass,nc));
}
function hideNode(node) {
if (node == null) return false;
node.style.visibility = "hidden";
node.style.position = "absolute";
}
function setRegExpStyleListener(node) {
xClassErr = node.getAttribute("xClassErr");
xClassOkay = node.getAttribute("xClassOkay");;
if (checkRegExp(node)) {
addClassToNodeStyle(node, xClassOkay);
removeClassFromNodeStyle(node,xClassErr);
} else {
addClassToNodeStyle(node, xClassErr);
removeClassFromNodeStyle(node, xClassOkay);
}
}
function checkRegExp(node) {
value = node.value;
xRegExp = node.getAttribute('xRegExp');
if (xRegExp == null)
return true;
var re = new RegExp(xRegExp);
if (value.match(re))
return true;
else
return false
}
function addRegExpStyleListener(node) {
if (!isIE) {
oldhandler = node.getAttribute("onkeyup");
node.setAttribute("onkeyup", "setRegExpStyleListener(this); " + ((oldhandler == null) ? "" : oldhandler));
} else {
node.onkeyup = new Function("setRegExpStyleListener(this);");
}
}
function addRegExpFromType(node) {
var xregexp = "";
xtype = node.getAttribute("xType");
switch(xtype) {
case "integer": xregexp = "^[0-9]+$"; break;
case "date": xregexp = "^[0-9]{1,2}.[0-9]{1,2}.[0-9]{2,4}$"; break;
case "plz": xregexp="^[A-Za-z]{0,3}[-]{0,1}[0-9]{5}$"; break;
case "phone": xregexp="^[0-9-/\+\(\)]+$"; break;
}
if (xregexp != "") node.setAttribute("xRegExp", xregexp);
}
function getAllNodes() {
var allNodes = new Object();
allNodes['input'] = new Array();
allNodes['radio'] = new Array();
allNodes['checkbox'] = new Array();
allNodes['passw'] = new Array();
var allInput = getByTag("input");
for (var i=0; i < allInput.length; i++) {
switch (allInput[i].type) {
case "text":
allNodes['input'].push(allInput[i]);
break;
case "checkbox":
allNodes['checkbox'].push(allInput[i]);
break;
case "radio":
allNodes['radio'].push(allInput[i]);
break;
case "password":
allNodes['input'].push(allInput[i]);
break;
}
}
allNodes['selectBox'] = new Array();
allNodes['selectList'] = new Array();
var allSelects = getByTag("select");
for (var i=0; i < allSelects.length; i++) {
s = allSelects[i].size;
if (s > 1) {
allNodes['selectList'].push(allSelects[i]);
} else {
allNodes['selectBox'].push(allSelects[i]);
}
}
allNodes['textarea'] = getByTag("textarea");
return allNodes;
}
function toggleXCheckBox(node) {
var xCheckBoxDown = (node.refer.attributes["xClassDown"]) ? node.refer.attributes['xClassDown'].value : "";
if (node.refer.checked) {
removeClassFromNodeStyle(node,xCheckBoxDown);
node.refer.checked = false;
} else {
addClassToNodeStyle(node,xCheckBoxDown);
node.refer.checked = true;
}
}
function setXRadioButtonChecked(node) {
if (!node.refer.checked) {
var xRadioDown = (node.refer.attributes["xClassDown"]) ? node.refer.attributes['xClassDown'].value : "";
addClassToNodeStyle(node,xRadioDown);
node.refer.checked = true;
}
}
function toggleXRadioButton(node) {
setXRadioButtonChecked(node);
for (var i=0; i < xElements['radio'].length; i++) {
c = xElements['radio'][i];
if ((c.name == node.refer.name) && (c != node.refer)) {
var xRadioDown = (c.attributes["xClassDown"]) ? c.attributes['xClassDown'].value : "";
removeClassFromNodeStyle(c.refer, xRadioDown);
}
}
}
function createXRadioButtons (nodes) {
for (var i=0; i < nodes.length; i++) {
e = nodes[i];
img = document.createElement("img");
img.src = "img/spacer.gif";
var xClass = (e.attributes["xClass"]) ? e.attributes['xClass'].value : "";
addClassToNodeStyle(img, xClass);
if (e.checked) {
var xRadioDown = (e.attributes["xClassDown"]) ? e.attributes['xClassDown'].value : "";
addClassToNodeStyle(img, xRadioDown);
}
var xClassOver = (e.attributes["xClassOver"]) ? e.attributes['xClassOver'].value : "";
addEventOnClick(img,"toggleXRadioButton(this);");
addEventOnMouseOver(img,"addClassToNodeStyle(this,'"+xClassOver+"');");
addEventOnMouseOut(img,"removeClassFromNodeStyle(this,'"+xClassOver+"');");
img.refer = e;
e.refer = img;
if (e.attributes["xTooltip"]) {
img.setAttribute("xTooltip", e.attributes["xTooltip"].value);
}
e.parentNode.insertBefore(img,e);
hideNode(e);
}
}
function createXCheckBoxes (nodes) {
for (var i=0; i < nodes.length; i++) {
e = nodes[i];
img = document.createElement("img");
img.src = "img/spacer.gif";
var xClass = (e.attributes["xClass"]) ? e.attributes['xClass'].value : "";
addClassToNodeStyle(img,xClass);
if (e.checked) {
var xCheckBoxDown = (e.attributes["xClassDown"]) ? e.attributes['xClassDown'].value : "";
addClassToNodeStyle(img, xCheckBoxDown);
}
var xClassOver = (e.attributes["xClassOver"]) ? e.attributes['xClassOver'].value : "";
addEventOnClick(img,"toggleXCheckBox(this);");
addEventOnMouseOver(img,"addClassToNodeStyle(this,'"+xClassOver+"');");
addEventOnMouseOut(img,"removeClassFromNodeStyle(this,'"+xClassOver+"');");
img.refer = e;
if (e.attributes["xTooltip"]) {
img.setAttribute("xTooltip", e.attributes["xTooltip"].value);
}
e.parentNode.insertBefore(img,e);
hideNode(e);
}
}
function createRegExpMechanism (nodes) {
for (var i=0; i < nodes.length; i++) {
e = nodes[i];
if (e.getAttribute("xType") != null)
addRegExpFromType(e);
if (e.getAttribute("xregexp") != null)
addRegExpStyleListener(e);
}
}
function showXSelectBoxMenue(node) {
node.xSelectBoxMenue.style.visibility = "visible";
}
function hideXSelectBoxMenue(node) {
node.xSelectBoxMenue.style.visibility = "hidden";
}
function showValueXSelectBox(node) {
sel = node.originalselect;
value = sel.options[sel.selectedIndex].text;
node.xSelectBoxValue.nodeValue = value;
}
function setSelectedIndexXSelectBox(li) {
li.originalselect.selectedIndex = li.index;
showValueXSelectBox(li.xSelectBox);
}
function setSelectedIndexXSelectList(li) {
opt = li.originalselect.options;
sel = li.originalselect;
if (sel.multiple) {
opt[li.index].selected = !opt[li.index].selected;
if (opt[li.index].selected) {
addClassToNodeStyle(opt[li.index].li, "xSelectListOptionDown");
} else {
removeClassFromNodeStyle(opt[li.index].li, "xSelectListOptionDown");
}
} else {
sel.selectedIndex = li.index;
for (var m = 0; m < opt.length; m++) {
if (opt[m].selected) {
addClassToNodeStyle(opt[m].li, "xSelectListOptionDown");
} else {
removeClassFromNodeStyle(opt[m].li, "xSelectListOptionDown");
}
}
}
}
function createXSelectBoxes (nodes) {
for (var i=0; i < nodes.length; i++) {
var e = nodes[i];
var xClass = (e.attributes["xClass"]) ? e.attributes['xClass'].value : "";
var xClassArrow = (e.attributes["xClassArrow"]) ? e.attributes['xClassArrow'].value : "";
var xClassMenue = (e.attributes["xClassMenue"]) ? e.attributes['xClassMenue'].value : "";
var xClassText = (e.attributes["xClassText"]) ? e.attributes['xClassText'].value : "";
var xSelectBox = document.createElement("div");
addClassToNodeStyle(xSelectBox,"xSelectBox");
addClassToNodeStyle(xSelectBox,e.className);
var xSelectBoxText = document.createElement("div");
addClassToNodeStyle(xSelectBoxText, xClassText);
var xSelectBoxPulldown = document.createElement("div");
addClassToNodeStyle(xSelectBoxPulldown, xClassArrow);
var xSelectBoxMenue = document.createElement("div");
addClassToNodeStyle(xSelectBoxMenue,xClassMenue);
xSelectBoxMenue.style.visibility = "hidden";
var xSelectBoxValue = document.createTextNode("select");
e.xSelectBox = xSelectBox;
xSelectBox.originalselect = e;
xSelectBox.xSelectBoxValue = xSelectBoxValue;
xSelectBox.xSelectBoxText = xSelectBoxText;
xSelectBox.xSelectBoxPulldown = xSelectBoxPulldown;
xSelectBox.xSelectBoxMenue = xSelectBoxMenue;
var xSelectBoxOptions = document.createElement("ul");
for (var j = 0; j < e.options.length; j++) {
var opt = document.createElement("li");
opt.index = j;
opt.originalselect = e;
opt.xSelectBox = xSelectBox;
var optText = document.createTextNode(e.options[j].text);
var xClass = (e.options[j].attributes["xClass"]) ? e.options[j].attributes['xClass'].value : "";
var xClassOver = (e.options[j].attributes["xClassOver"]) ? e.options[j].attributes['xClassOver'].value : "";
addClassToNodeStyle(opt, xClass);
addEventOnClick(opt,"setSelectedIndexXSelectBox(this);");
addEventOnMouseOver(opt,"addClassToNodeStyle(this,'" + xClassOver + "');");
addEventOnMouseOut(opt,"removeClassFromNodeStyle(this,'" + xClassOver + "');");
opt.appendChild(optText);
xSelectBoxOptions.appendChild(opt);
}
xSelectBoxText.appendChild(xSelectBoxValue);
xSelectBox.appendChild(xSelectBoxText);
xSelectBox.appendChild(xSelectBoxPulldown);
xSelectBoxMenue.appendChild(xSelectBoxOptions);
xSelectBox.appendChild(xSelectBoxMenue);
addEventOnMouseOver(xSelectBox, "showXSelectBoxMenue(this);");
addEventOnMouseOut(xSelectBox, "hideXSelectBoxMenue(this);");
if (e.attributes["xTooltip"]) {
xSelectBox.setAttribute("xTooltip", e.attributes["xTooltip"].value);
xSelectBoxText.setAttribute("xTooltip", e.attributes["xTooltip"].value);
xSelectBoxPulldown.setAttribute("xTooltip", e.attributes["xTooltip"].value);
}
showValueXSelectBox(xSelectBox);
e.parentNode.insertBefore(xSelectBox,e);
hideNode(e);
}
}
function createXSelectLists (nodes) {
for (var i=0; i < nodes.length; i++) {
var e = nodes[i];
var xSelectList = document.createElement("div");
var xClass = (e.attributes["xClass"]) ? e.attributes['xClass'].value : "";
addClassToNodeStyle(xSelectList, xClass);
e.xSelectList = xSelectList;
xSelectList.originalselect = e;
var xSelectListOptions = document.createElement("ul");
for (var j=0; j < e.options.length; j++) {
var opt = document.createElement("li");
var optText = document.createTextNode(e.options[j].text);
opt.index = j;
opt.originalselect = e;
opt.xSelectList = xSelectList;
e.options[j].li = opt;
var xClass = (e.options[j].attributes["xClass"]) ? e.options[j].attributes['xClass'].value : "";
var xClassOver = (e.options[j].attributes["xClassOver"]) ? e.options[j].attributes['xClassOver'].value : "";
var xClassDown = (e.options[j].attributes["xClassDown"]) ? e.options[j].attributes['xClassDown'].value : "";
addClassToNodeStyle(opt, xClass);
if (e.attributes["xTooltip"]) {
opt.setAttribute("xTooltip", e.attributes["xTooltip"].value);
}
addEventOnClick(opt,"setSelectedIndexXSelectList(this);");
addEventOnMouseOver(opt,"addClassToNodeStyle(this,'"+ xClassOver +"');");
addEventOnMouseOut(opt,"removeClassFromNodeStyle(this,'"+ xClassOver +"');");
opt.appendChild(optText);
xSelectListOptions.appendChild(opt);
if (e.options[j].selected) {
addClassToNodeStyle(opt, xClassDown);
}
}
xSelectList.appendChild(xSelectListOptions);
e.parentNode.insertBefore(xSelectList,e);
hideNode(e);
}
}
function updateXTooltip(mozillaEvent) {
if (xTooltip == null) return false;
if (isIE) {
eventSrc = event;
eventSrcObj = event.srcElement;
} else {
eventSrc = mozillaEvent;
eventSrcObj = mozillaEvent.target;
}
if (eventSrcObj.attributes["xTooltip"]) {
var x,y;
if (self.pageYOffset) {
x = self.pageXOffset;
y = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
} else if (document.body) {
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
xTooltip.innerHTML = eventSrcObj.attributes["xTooltip"].value;
xTooltip.style.top = eventSrc.clientY + 13 + y + "px";
xTooltip.style.left = eventSrc.clientX + 13 + x + "px";
xTooltip.style.visibility = "visible";
} else {
xTooltip.style.visibility = "hidden";
}
}
function addXTooltip() {
xTooltip = document.createElement("div");
addClassToNodeStyle(xTooltip, "xTooltip");
addClassToNodeStyle(xTooltip, "font");
xTooltip.style.top = "10px";
xTooltip.style.left = "10px";
bodies = getByTag('body');
body = bodies[0];
body.appendChild(xTooltip);
document.onmousemove = updateXTooltip;
}
function doXStyling() {
xElements = getAllNodes();
createRegExpMechanism(xElements['input']);
createRegExpMechanism(xElements['textarea']);
createXCheckBoxes(xElements['checkbox']);
createXRadioButtons(xElements['radio']);
createXSelectBoxes(xElements['selectBox']);
createXSelectLists(xElements['selectList']);
addXTooltip()
}
doXStyling();