nicht angemeldet
<!DOCTYPE html> beeinflusst Javascript Styling
Guten Morgen zusammen
Ich bastle gerade einen sogenannten Mausverfolger für eine Webseite. Mein Ziel ist ein Bild im Header der Webseite, das sich gleichzeitig wie die Maus nach links bzw. nach rechts bewegt. (in die entgegengesetzte richtung)
Das funktioniert auch soweit (siehe Code)
Mein Problem tritt ein, wenn man oben am html file die <!DOCTYPE html> deklaration einfügt.
Mittlerweile wird dann kein JavaScript-Styling mehr zugelassen.
Gibt es eine Möglichkeit, das CSS mit Javascript zu beeinflussen, auch wenn man die Doctype deklaration einfügt?
(mache die webseite mit einem cms, wo man nur den body-bereich, ein javascript und ein css file bearbeiten kann).
Gruss Joni
ps: bin gut in html & css aber von javascript verstehe ich erst sehr wenig.
<html>
<head>
<title>TEST</title>
<style type="text/css">
body {
overflow-x: hidden;
margin: 0px; padding: 0px: border: 0px;
}
#box {
background-color: #228;
height: 300px;
width: 200%;
position: relative;
z-index: 1;
background: rgb(255,0,0); /* Old browsers */
background: -moz-linear-gradient(left, rgb(255,0,0) 0%, rgb(196,255,2) 48%, rgb(6,255,2) 99%, rgb(191,110,78) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(255,0,0)), color-stop(48%,rgb(196,255,2)), color-stop(99%,rgb(6,255,2)), color-stop(100%,rgb(191,110,78))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(255,0,0) 0%,rgb(196,255,2) 48%,rgb(6,255,2) 99%,rgb(191,110,78) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(255,0,0) 0%,rgb(196,255,2) 48%,rgb(6,255,2) 99%,rgb(191,110,78) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(255,0,0) 0%,rgb(196,255,2) 48%,rgb(6,255,2) 99%,rgb(191,110,78) 100%); /* IE10+ */
background: linear-gradient(to right, rgb(255,0,0) 0%,rgb(196,255,2) 48%,rgb(6,255,2) 99%,rgb(191,110,78) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#bf6e4e',GradientType=1 ); /* IE6-9 */
}
</style>
<script type="text/javascript">
if(document.layers) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = koordinaten;
}
else {
document.onmousemove = koordinaten;
}
function koordinaten(e) {
xpos = (document.layers || (document.getElementById && !document.all)) ? e.pageX : document.body.scrollLeft +
event.clientX;
ypos = (document.layers || (document.getElementById && !document.all)) ? e.pageY : document.body.scrollTop +
event.clientY;
werte();
}
function werte(){
txt = "Xpos ="+xpos+"; Ypos ="+ypos+" ";
document.forms[0].elements[0].value = txt;
window.status = txt;
}
setInterval(function (){box.style.marginLeft = (-xpos);},1);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
-
Hallo,
Mein Problem tritt ein, wenn man oben am html file die <!DOCTYPE html> deklaration einfügt.
Die Angabe eines vollständigen DOCTYPEs bzw. des HTML5-DOCTYPEs <!DOCTYPE html> löst den standardkonformen Modus des Browsers aus. In diesem Modus wird das Dokument gemäß den Webstandard verarbeitet. Wenn man Fehler macht, verzeiht sie einem der Browser weniger. Der standardkonforme Modus ist hilfreich, weil er einen auf Fehler hinweist. Wenn etwas nicht (mehr) funktioniert, dann hat man i.d.R. etwas falsch gemacht.
Siehe auch:
http://webkompetenz.wikidot.com/html-handbuch:quirks-standards-modus
http://carsten-protsch.de/zwischennetz/doctype/einleitung.htmlMittlerweile wird dann kein JavaScript-Styling mehr zugelassen.
Doch, aber man muss korrekte Werte für CSS-Eigenschaften angeben.
if(document.layers) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = koordinaten;
}
else {
document.onmousemove = koordinaten;
}Dieser Code ist über 10 Jahre alt. Er ist für Netscape 4 und Internet Explorer 4 geschrieben, welche 1997/1998 veröffentlicht wurden. Heute kann man das viel einfacher schreiben und sich den Teil für Netscape komplett sparen.
function koordinaten(e) {
xpos = (document.layers || (document.getElementById && !document.all)) ? e.pageX : document.body.scrollLeft + event.clientX;
ypos = (document.layers || (document.getElementById && !document.all)) ? e.pageY : document.body.scrollTop + event.clientY;Das ist auch eine Browserabfrage für 90er-Jahre-Browser, die man durch eine gezielte Featureabfrage ersetzen kann.
Hier reicht:
xpos = e.pageX != null ? e.pageX : event.clientX + document.documentElement.scrollLeft;
ypos = e.pageY != null ? e.pageY : event.clientY + document.documentElement.scrollTop;Alle neueren Browser kennen pageX/Y, die anderen sind ältere IEs (IE < 9), welche clientX/Y und scrollLeft/scrollTop kennen (im standardkonformen Modus auf dem html-Element, daher document.documentElement anstatt document.body).
window.status = txt;
Übrigens: Neuere Browser erlauben das Setzen der Statusleiste nicht mehr. Vor zehn Jahren war das noch möglich.
setInterval(function (){box.style.marginLeft = (-xpos);},1);
Hier wird eine einheitlose Zahl (z.B. -123) als margin-left-Wert gesetzt. Der Wert muss jedoch eine Einheit haben, in diesem Fall »px«.
box.style.marginLeft = (-xpos) + "px";
Ergibt dann einen String mit beispielsweise "-123px", und das ist ein gültiger Wert für margin-left.
Grüße,
Mathias-
...also wenn ich das richtig verstanden habe, reicht:
document.onmousemove = koordinaten; function koordinaten(e) { xpos = e.pageX != null ? e.pageX : event.clientX + document.documentElement.scrollLeft; } setInterval(function (){box.style.marginLeft = (xpos/5) + "px";},1);(die y koordinaten kan ich ja akuch komplett weglassen. brauche ich für meine webseite nicht)
Na dann vielen Dank für deine Hilfe, Mathias!
Gruss Joni
-
Hallo Mathias,
Die Angabe eines vollständigen DOCTYPEs bzw. des HTML5-DOCTYPEs <!DOCTYPE html> löst den standardkonformen Modus des Browsers aus.
im Grunde ja, aber leider trifft dies im speziellen Fall des Internet Explorers nur teilweise zu. Bei Intranetseiten kann der IE durchaus diese Angaben geflissen ignorieren und in die Kompatibilitätsansicht wechseln, was dafür sorgt, dass er (z.B. IE9) sich als IE7 am Server ausgibt und sich auch sonst so verhält (Conditional Comments), aber dennoch Sachen wie Inline-Images versteht und verarbeiten kann (In HTML4 definiert aber IE7 kann das gar nicht). Siehe dazu im IE => Extras => Einstellungen der Kompatibilitätsansicht.
Wer hier auf Conditional Comments setzt oder den X-UA-Compatible Angaben vertraut hat verloren. Das ist jedenfalls meine Erfahrung. Serverseitig kann man testen, ob im UA der Text "Trident" vorkommt, das signalisiert den Kompatibilitätsmodus (ab IE8).
Ja ok, ich wollte das nur mal loswerden. Man ist nicht immer auf der sicheren Seite, auch wenn man dies oder das richtig macht.
-