nicht angemeldet
Javascript funktioniert nicht mit xhtml
0 0 0 
Struppi
Javascript funktioniert nicht mit xhtml
Hallo,
ich habe hier ein etwas älteres Javascript welches ein div via Linkklicks verschiebt, es soll Text in einem Div ohne Browserscrollbar gescrollt werden. Es läuft in einem HTML-, nicht aber in einem XHTML-Dokument, dort passiert einfach gar nichts beim klick. Alles validiert und ok. Kann mir da jemand auf die Sprünge helfen?
Vielen Dank!
Das verkürzte Dokument:
<body onload="javascript:InitialiseScrollableArea()">
<p><a href="javascript:;" onmouseover="PerformScroll(-7)" onmouseout="CeaseScroll()">[scroll up]</a></p>
<div id="contentbox">
<div id="contentboxtext"><b>vieltext</b></div>
</div>
Die CSS:
#contentbox {
height: 300px;
width: 450px;
position: absolute;
overflow:hidden;
left: 360px;
top: 200px;
clip:rect(0,450,300,0);
background-color: #FFFFFF;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
#contentboxtext {
width: 300px;
left: 10px;
top: 10px;
float: left;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 98px;
position: absolute;
}
Das Javascript:
function verifyCompatibleBrowser(){
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 verifyCompatibleBrowser()
var speed=50
var loop, timer
function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}
function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('contentbox')
objScroller=new ConstructObject('contentboxtext','contentbox')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}
-
habe d'ehre Joy
Hallo,
ich habe hier ein etwas älteres Javascript welches ein div via Linkklicks verschiebt, es soll Text in einem Div ohne Browserscrollbar gescrollt werden. Es läuft in einem HTML-, nicht aber in einem XHTML-Dokument, dort passiert einfach gar nichts beim klick. Alles validiert und ok. Kann mir da jemand auf die Sprünge helfen?
<script......
/* <![CDATA[ */
..Code...
/* ]]> */
</script>man liest sich
Wilhelm-
http://de.selfhtml.org/html/xhtml/unterschiede.htm#script_style
der andere war vom Suchframe
-
Hallo,
Ja, aber diese Konstrukte schaffen doch nur mehr Verwirrung als nötig. JavaScript auszulagern scheint mir immernoch die Beste alternative zu sein.
Gruß;
-
-
hallo,
zusätzlich zu dem, was dir Wilhelm (wow, ausnahmsweise war er mal schneller als ich, aber das liegt auch nur daran, daß mich das TV abgelenkt hat) bereits an Richtigem zu bedenken gegeben hat:
Du willst also XHTML schreiben. Das ist gut und lobenswert. Es gibt aber unterschiedliche DTDs, also "strict", "transitional" usw. Das hat zumindest _kleine_ Auswirkungen auf die Möglichkeiten, Scripts und EventHandler einzusetzen.
Und zu deinem Code:
<body onload="javascript:InitialiseScrollableArea()">
"onload" ist genauso wie "onmouseover" ein EventHandler. Das bedeutet: die Angabe "javascript:..." ist unsinnig, du kannst gleich den Namen der aufzurufenden Funktion angeben. Machst du ja später bei anderen EventHandlern schon richtig.
<p><a href="javascript:;" onmouseover="PerformScroll(-7)" onmouseout="CeaseScroll()">[scroll up]</a></p>
"<a href="javascript:;" ...>" ist ... naja, schau es dir an. Du findest selber heraus, daß das eben nur mit einem badwort bezeichnet werden kann, gelle?
Grüße aus Berlin
Christoph S.
-
Das verkürzte Dokument:
enthält viele falsche und unnötige Sachen
<body onload="javascript:InitialiseScrollableArea()">
Wozu das Label 'javascript:'?
unnötig!<p><a href="javascript:;" onmouseover="PerformScroll(-7)" onmouseout="CeaseScroll()">[scroll up]</a></p>
Warum der Link?
onmouseover funktioniert auch mit dem <p> Element.=========================================
function verifyCompatibleBrowser(){
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
}von sowas ist abzuraten, einfach das prüfen, was du benutzt und gut ist.
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
Dein code ist nicht sonderlich übesichtlich, es hat sich eingebürgert, gewisse Richtlinien beim coden zu beachten, die den Quellcode übersichtlicher machen und damit für den Autor und für Fremde leichter lesbar.
this.obj = obj + "Object"
eval(this.obj + "=this")eval() ist evil!
und auch hier in diesem Falle sicherlich ersetzbar.function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.yleft und top was?
solche CSS angaben erwarten immer eine Einheit.function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)Das kann eigentlich nicht funktionieren (kan aber sein, das ich was übersehne habe, vor allem wegen dem eval) window.setTimeout ruft eine Funktion im Kontext window auf, d.h. this ist gleich window und this.obj bzw. windiw.obj muss in diesem Fall ein String sein, der einen globalen Variabelnnamen repräsentatiert.
Struppi.
--
Javascript ist toll (Perl auch!)