nicht angemeldet Beat
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Struppi
N'abend!
Ich habe ein kleines Problemchen. Ich will einen Javascroller in einer Joomla-Seite einbauen. Im IE hat bisher auch alles geklappt, im FF gibts ein Problem: Fehleranzeige "Fehler beim Verarbeiten des Wertes für Eigenschaft 'top': Deklaration ignoriert.
Das Javascript sieht wie folgt aus:
function checkBrowser(){
this.ver=navigator.appVersion;
this.dom=document.getElementById?1:0;
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
//If you want it to move faster you can set this lower:
var speed=50
//Sets variables to keep track of what's happening
var loop, timer
//Object constructor
function makeObj(obj,nest){
if (!nest) {nest=''}
else {nest='document.'+nest+'.'}
this.el=0;
this.css=0;
if (bw.dom)
{
this.el=document.getElementById(obj);
this.css=document.getElementById(obj).style;
this.scrollHeight=this.el.offsetHeight;
this.clipHeight=this.el.offsetHeight;
}
if (bw.ie4)
{
this.el=document.all[obj];
this.css=document.all[obj].style;
this.scrollHeight=this.el.offsetHeight;
this.clipHeight=this.el.offsetHeight;
}
if (bw.ns4)
{
this.el=eval(nest+'document.'+obj);
this.css=eval(nest+'document.'+obj);
this.scrollHeight=this.css.document.height;
this.clipHeight=this.css.clip.height;
}
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x; this.y;
this.obj = obj+ "Object";
eval(this.obj + "=this")
return this
}
function moveIt(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
//Makes the object go up
function goDown(move)
{
if(this.y>(-this.scrollHeight+oCont.clipHeight))
{
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
//Makes the object go down
function goUp(move)
{
if(this.y<0)
{
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed)
{
if(loaded)
{
loop=true;
if(speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}
//Stops the scrolling (called on mouseout)
function noScroll()
{
loop=false
if(timer) clearTimeout(timer)
}
//Makes the object
var loaded;
function scrollInit(){
oCont=new makeObj('text')
oScroll=new makeObj('scroll','text')
oScroll.moveIt(0,0)
oCont.css.visibility='visible'
loaded=true;
}
//Call the init on page load
onload=scrollInit;
Das komische ist: Ich habe das Skript auch schon auf einer alten Seite verwendet, und da lief und läuft es auch noch (auch im FF). Liegt das Problem am css-Code, dass da etwas mit den top-Angaben nicht stimmt?
Gruß
henne32
Hi,
Liegt das Problem am css-Code, dass da etwas mit den top-Angaben nicht stimmt?
Nein, sondern hoechstvermutlich - wie so gut wie immer, wenn jemand mit so einem Problem ankommt - am JavaScript-Code, der der CSS-Eigenschaft ungueltige Werte zuweist.
MfG ChrisB
Das komische ist: Ich habe das Skript auch schon auf einer alten Seite verwendet, und da lief und läuft es auch noch (auch im FF). Liegt das Problem am css-Code, dass da etwas mit den top-Angaben nicht stimmt?
Ich tippe mal darauf, das das Element, das via id geladen wird, zwar ein style Attribut hat, aber dort keine Eigenschaft top gesetzt ist.
Da müsstes du diese erst händisch setzen, oder eine initialisierung beim Start des Scriptes schreiben.
mfg Beat
Hi,
Ich tippe mal darauf, das das Element, das via id geladen wird, zwar ein style Attribut hat, aber dort keine Eigenschaft top gesetzt ist.
Da müsstes du diese erst händisch setzen, oder eine initialisierung beim Start des Scriptes schreiben.
Nein.
element.style greift nicht auf das style-Attribut des Elements zu, sondern auf das JavaScript-Objekt style unterhalb diesem.
Und bei jedem Element sind "alle" CSS-Eigenschaften per se "vorhanden".
MfG ChrisB
@@ChrisB:
element.style greift nicht auf das style-Attribut des Elements zu, sondern auf das JavaScript-Objekt style unterhalb diesem.
Und bei jedem Element sind "alle" CSS-Eigenschaften per se "vorhanden".
Was aber nicht heißt, dass sie zwangläufig als Eigenschaften des style-Objektes vorhanden wären. (Es sind nur solche Eigenschaften des style-Objektes vorhanden, die mir JavaScript gesetzt wurden oder entsprechende CSS-Eigenschaften mittels style-Attributs gesetzt wurden. Aber sowas tut man ja nicht.[tm]*)
Andersrum kann man dem style-Objekt beliebige Eigenschaften geben. Wenn es aber keine dementsprechenden CSS-Eigenschatfen gibt, bleiben sie fürs Rendering wirkungslos.
Live long and prosper,
Gunnar
* Genaugenommen tut man das andere nach Möglichkeit auch nicht. Das Setzen von Eigenschaften des style-Objektes widerspricht der Trennung von Präsentation und Verhalten. Besser mit JavaScript nur dynamisch Klassennamen ändern und alle Darstellungsangeben im Stylesheet notieren.
Danke für eure Hilfe, aber was heißt das denn jetzt konkret für mich? Muss ich nur was am Css-Code ändern? (In den beiden DIVs ist top definiert) Oder muss am Javascript-Code was geändert werden?
Gruß
henne32
Hi,
Danke für eure Hilfe, aber was heißt das denn jetzt konkret für mich? Muss ich nur was am Css-Code ändern? (In den beiden DIVs ist top definiert) Oder muss am Javascript-Code was geändert werden?
Die CSS-Eigenschaft top muss einen gueltigen Wert bekommen.
Das ist vollkommen unabhaengig davon, ob du diesen Wert im CSS angibst, oder per JavaScript zuweist.
MfG ChrisB
@@ChrisB:
Die CSS-Eigenschaft top muss einen gueltigen Wert bekommen.
Und was gültige Werte sind, liest du in der Spec [CSS21 §9.3.2] nach.
Wink: <length> ist ein Link. Folge ihm!
Live long and prosper,
Gunnar
Die CSS-Eigenschaft top muss einen gueltigen Wert bekommen.
Hi!
Also die beiden DIVs die betroffen sind (text & scroll) haben beiden einen top-Wert (einmal 150px und einmal 0px). Vorsichtshalber habe ich auch allen anderen DIVs auf der Seite, die meist absolut positioniert sind, einen top-Wert mit px-Angabe gegeben. Leider tut sich beim Scrollen immer noch nix...
Muss ich das Javascript noch anpassen?
Gruß
henne32
Hi,
Muss ich das Javascript noch anpassen?
Ja - und zwar so, dass es dort, wo es die Werte von CSS-Eigenschaften zu setzen versucht, auch fuer diese gueltige Werte verwendet.
MfG ChrisB
Ja - und zwar so, dass es dort, wo es die Werte von CSS-Eigenschaften zu setzen versucht, auch fuer diese gueltige Werte verwendet.
Sorry, kenne mich mit Javascript nicht so aus. Habe exakt das gleiche Skript genommen, wie bei der anderen erwähnten Seite, doch bei der aktuellen läuft es nicht.
Kann mir da jemand helfen! Danke im Voraus,
Gruß
henne32
@@henne32:
Ja - und zwar so, dass es dort, wo es die Werte von CSS-Eigenschaften zu setzen versucht, auch fuer diese gueltige Werte verwendet.
Sorry, kenne mich mit Javascript nicht so aus.
Das Einzige, was du an der Stelle von JavaScript wissen musst, ist, wie man Werte zuweist. Und dazu reichen deine Kenntnisse bereits.
Du solltest dich jedoch mit CSS besser auskennen, um mit JavaScript nur gültige Werte für style-Eigenschaften zuzuweisen.
Dazu hatte ich dir bereits Futter zum Lesen gegeben. Was gibt es NACH dem Lesen da noch für Unklarheiten?
Live long and prosper,
Gunnar
Dazu hatte ich dir bereits Futter zum Lesen gegeben. Was gibt es NACH dem Lesen da noch für Unklarheiten?
Hi!
Dass top so definiert ist, war mir bekannt. Aber wie füge ich sowas in Javascript ein? Das Problem bleibt weiterhin und es hat doch auf der alten Seite auch geklappt, mit exakt dem gleichen Skript?!
Glaube ich sehe den Wald vor lauter Bäumen nicht...
Gruß
henne32
@@henne32:
Glaube ich sehe den Wald vor lauter Bäumen nicht...
Offenbar nicht.
Um was zu sehen, bietet sich an, zur Kontrolle mal Werte ausgeben zu lassen. Debugging sollte dir nicht fremd sein.
Lass doch mal vor der von EKKi erwähnten Zeile 'this.css.top=this.y' den Wert von this.y ausgeben:
alert(this.y);
Dann überlege, ob du diesen Wert wirklich an this.css.top zuweisen solltest.
Live long and prosper,
Gunnar
Gelöst! Ich habe aber nichts am Javascript geändert, sondern im HTML-Code einfach
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
durch
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ersetzt und jetzt läufts einwandfrei hoch und runter.
Danke sehr für eure Hilfe!
Gruß
henne32
@@henne32:
Gelöst!
Nein!
Ich habe aber nichts am Javascript geändert
Solltest du aber.
und jetzt läufts einwandfrei hoch und runter.
In welchen Browsern hast du getestet?
Danke sehr für eure Hilfe!
Gerngeschehen. Warum nimmst du sie nicht in Anspruch?
Live long and prosper,
Gunnar
Gelöst! Ich habe aber nichts am Javascript geändert, sondern im HTML-Code einfach
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">durch
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">ersetzt und jetzt läufts einwandfrei hoch und runter.
Ja, du läßt deine Seite jetzt im Quirksmode darstellen, dieser Modus versucht Fehler zu korrigieren, wie in deinem fal verursacht aber andere Fehler in der Darstellung wie z.b. den Boxmodelbug.
Wenn du damit Leben kannst, mach es so. Das was du da machst, ist einen Fehler, mit einem zweiten Fehler, zu überbügeln. Nicht unbedingt elegant.
Struppi.
Mahlzeit henne32,
Gelöst!
Nein.
Ich habe aber nichts am Javascript geändert,
Dann ist der Code weiterhin fehlerhaft. Warum probierst Du nicht einfach die Dir gegebenen Hinweise aus und behebst die eigentliche Fehlerursache? So schwer ist es nun wirklich nicht ...
sondern im HTML-Code einfach
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">durch
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">ersetzt und jetzt läufts einwandfrei hoch und runter.
Das mag sein ... andererseits: Ist das Dokument jetzt noch valide? Stellen alle handelsüblichen Browser es noch im standardkonformen Modus dar?
Danke sehr für eure Hilfe!
Danke auch für nichts ... anscheinend willst Du sie ja nicht annehmen.
MfG,
EKKi
Mahlzeit henne32,
Sorry, kenne mich mit Javascript nicht so aus. Habe exakt das gleiche Skript genommen, wie bei der anderen erwähnten Seite, doch bei der aktuellen läuft es nicht.
Paragraph 1: Du sollst keinen Javascript-Code ungeprüft verwenden, den Du nicht verstehst.
Kann mir da jemand helfen! Danke im Voraus,
http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=Du http://de.selfhtml.org/css/eigenschaften/positionierung.htm#postop@title=Dir http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=selbst. Einen kleinen Hinweis gebe ich Dir noch:
this.css.top=this.y
MfG,
EKKi