|
mangoo
Anmeldungsdatum:
28. Juni 2008
Beiträge: Zähle...
Wohnort: europe
|
Hallo, in html 4.01 ging noch alles reibungslos, nach der Umstellung auf XHTML geht mein JavaScript nicht mehr so wie es soll.
Und ich weiss nicht, wie ich den Code korrekt anpassen muss. Habe bisher erfolglos modifiziert. Problem: Die Daten aus der Adresszeile kann ich nicht alle korrekt verarbeiten. Richtig übergeben werden sie z.B. mit "file:///home/www/player.xhtml?a&3&.jpg&bilder"
Die Bilddateien lauten hier z.B. /photos/a1.jpg, /photos/a2.jpg, u.s.w.
Die betreffenden Stellen sind zum schnelleren Auffinden mit "Problem" gekennzeichnet". <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>pictures</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="pictures, bilder, gallery" />
<meta name="description" content="pictures, bilder, gallery" />
<style type="text/css">
body{
margin:30px auto;
background-color:#121212;
}
.mainbox{
margin: 0px auto; width:800px; height: 550px;
position:relative;
font-size:10px;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #2e4ab2;
padding-left:40px;
border:2px solid #444444;
overflow: hidden;
background-color: #000000;
}
.screen{
margin: 0px auto; width: 760px; height: 510px;
position:absolute;
display: table;
overflow: hidden;
text-align: center;
font-size:10px;
background-color:#000000;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #f49404;
border: #222222 1px solid;
}
.screen_in{
width: 760px; height: 510px;
position:relative;
text-align: center;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.navigation{
margin: 0px auto; width:440px; height: 36px;
position:absolute;
bottom:-14px; left:280px;
font-size:8px;
background-color:transparent;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #f49404;
}
.titlebox{
position:relative;
width:400px; height: 20px;
top: 505px;
text-align: left;
float:left;
font-size:11px;
font-weight: bold;
color: #2e7db0;
background-color:transparent;
}
.counterbox{
position:relative;
width:350px; height: 20px;
top: 505px;
right: 110px;
text-align: right;
float:right;
color: #2e7db0;
background-color:transparent;
}
a:link {color:#000000; text-decoration:none; background-color:transparent; font-size:10px;}
a:visited {color:#000000; text-decoration:none; background-color:transparent; font-size:10px;}
a:hover {color:#c8ff20; text-decoration:none; background-color:transparent; font-size:10px;}
input.num_info{margin:0; color:#f49404; font-size:10px; border:0px; background-color:transparent; cursor: pointer; text-align:center;}
</style>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
var counter = 0;
var number_pics = 0;
</script>
</head>
<body onload="slide();">
<div class="mainbox">
<br />
<div class="screen">
<div class="screen_in">
<img id="pic1" src="photos/001.png" width="" height="" alt="No image found." />
</div></div>
<br />
<div class="titlebox">
// > ############ Problem -> hier sollte lt. Uebergabe "bilder" stehen
::: pictures <!-- <script type="text/javascript">document.write(title)</script> -->
</div>
<div class="counterbox">
// > ############ Problem > hier soll der Zähler zählen, tut er aber nicht :-(
image <!-- <script type="text/javascript">document.write(counter)</script> -->
<input class="num_info" type="text" value="0" id="counter" size="2" /> /
<input class="num_info" type="text" value="0" id="number_pics" size="2" />
<!-- <script type="text/javascript" id="number_pics">document.write(number_pics)</script> -->
</div>
<div class="navigation">
<button id="button_home" name="button_home" value="home"><strong>home</strong></button>
<button id="button_go" name="button_go" value="slide"><strong>slide</strong></button>
<button id="button_pause" name="button_pause" value="pause"><strong>pause</strong></button>
<button id="button_last" name="button_last" value="last"><strong>last</strong></button>
<button id="button_next" name="button_next" value="next"><strong>next</strong></button>
</div> </div>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
var img = new Array();
var start = null;
var filesource = "photos/";
var filename = "";
var filetype = "";
var delayTime = 3000;
var liste = new werteliste(location.search);
var title = "pictures";
var button_home = document.getElementById('button_home');
var button_go = document.getElementById('button_go');
var button_pause = document.getElementById('button_pause');
var button_next = document.getElementById('button_next');
var button_last = document.getElementById('button_last');
button_home.onclick = function(){window.location.href='index.xhtml';}
button_go.onclick = function(){slide();}
button_pause.onclick = function(){pause();}
button_last.onclick = function(){last();}
button_next.onclick = function(){next();}
filename = liste.name1;
number_pics = liste.num_pix;
filetype = liste.typex;
title = liste.title;
function werteliste(querystring){
if(querystring == '') return;
var wertestring = querystring.slice(1);
var paare = wertestring.split("&");
var paar, name1, wert, type1, title;
name1 = paare[0];
wert = paare[1];
type1 = paare[2];
title = paare[3];
this.name1 = name1;
this.num_pix = wert;
this.typex = type1;
this.title = title;
}
function animate(){
counter++;
if(counter > number_pics) counter = 1;
counter.value = (counter);
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
document.getElementById("number_pics") = number_pics;
if(counter == number_pics) counter = 0;
}
function slide(){
start = setInterval("animate()", delayTime);
button_go.disabled = true;
button_pause.disabled = false;
}
function pause(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
}
function next(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
counter++;
if(counter > number_pics) counter = 1;
// > ############ Problem
document.counter.current_num.value = (counter); // show num
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
if(counter == number_pics) counter = 0;
}
function last(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
if(counter > 0) counter --;
if(counter == 0) counter = number_pics;
// > ############ Problem
document.counter_form.current_num.value = (counter); // show num
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
}
</script>
</body></html>
|
|
Hello_World
Anmeldungsdatum:
13. Juni 2006
Beiträge: 3620
|
Das ist kein gültiges XHTML. Validiere Dein Dokument gegen das XHTML-XSD und mache entsprechende Anpassungen.
Du solltest Scripte in sowas einfassen:
| <script type="text/javascript">
//<![CDATA[
// Code hierhin
//]]>
</script>
|
oder gleich in eigene Dateien auslagern, das macht es übersichtlicher. Das gilt auch für CSS.
|
|
mangoo
(Themenstarter)
Anmeldungsdatum:
28. Juni 2008
Beiträge: Zähle...
Wohnort: europe
|
Hallo, ja, sorry. Ich habe inzwischen so viel modifiziert, dass es nicht mehr validiert war. Hier die validierte Variante, bei der die Diashow läuft und man navigieren kann. Die Buttons funktionieren also.
Nur die 3 Anzeigen nicht (Name der Diashow, aktuelle Bildnr. und Bilderanzahl). JS und CSS sind mit dabei, damit es jeder einfach testen kann. Die fehlerhaften Codestellen sind auskommentiert.
Wie müssen sie also lauten, damit alles läuft? <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>pictures</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="pictures, bilder, gallery" />
<meta name="description" content="pictures, bilder, gallery" />
<style type="text/css">
body{
margin:30px auto;
background-color:#121212;
}
.mainbox{
margin: 0px auto; width:800px; height: 550px;
position:relative;
font-size:10px;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #2e4ab2;
padding-left:40px;
border:2px solid #444444;
overflow: hidden;
background-color: #000000;
}
.screen{
margin: 0px auto; width: 760px; height: 510px;
position:absolute;
display: table;
overflow: hidden;
text-align: center;
font-size:10px;
background-color:#000000;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #f49404;
border: #222222 1px solid;
}
.screen_in{
width: 760px; height: 510px;
position:relative;
text-align: center;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.navigation{
margin: 0px auto; width:440px; height: 36px;
position:absolute;
bottom:-14px; left:280px;
font-size:8px;
background-color:transparent;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #f49404;
}
.titlebox{
position:relative;
width:400px; height: 20px;
top: 505px;
text-align: left;
float:left;
font-size:11px;
font-weight: bold;
color: #2e7db0;
background-color:transparent;
}
.counterbox{
position:relative;
width:350px; height: 20px;
top: 505px;
right: 110px;
text-align: right;
float:right;
color: #2e7db0;
background-color:transparent;
}
a:link {color:#000000; text-decoration:none; background-color:transparent; font-size:10px;}
a:visited {color:#000000; text-decoration:none; background-color:transparent; font-size:10px;}
a:hover {color:#c8ff20; text-decoration:none; background-color:transparent; font-size:10px;}
input.num_info{margin:0; color:#f49404; font-size:10px; border:0px; background-color:transparent; cursor: pointer; text-align:center;}
</style>
</head>
<body onload="slide();">
<div class="mainbox">
<br />
<div class="screen">
<div class="screen_in">
<img id="pic1" src="photos/001.png" width="" height="" alt="No image found." />
</div></div>
<br />
<div class="titlebox">
::: pictures <!-- <script type="text/javascript">document.write(title)</script> -->
</div>
<div class="counterbox">
image <!-- <script type="text/javascript">document.write(counter)</script> -->
<input class="num_info" type="text" value="0" id="counter" size="2" /> / 0
<!-- <script type="text/javascript" id="number_pics">document.write(number_pics)</script> -->
</div>
<div class="navigation">
<button id="button_home" name="button_home" value="home"><strong>home</strong></button>
<button id="button_go" name="button_go" value="slide"><strong>slide</strong></button>
<button id="button_pause" name="button_pause" value="pause"><strong>pause</strong></button>
<button id="button_last" name="button_last" value="last"><strong>last</strong></button>
<button id="button_next" name="button_next" value="next"><strong>next</strong></button>
</div> </div>
<script type="text/javascript">
var img = new Array();
var counter = 0;
var number_pics = 0;
var start = null;
var filesource = "photos/";
var filename = "";
var filetype = "";
var delayTime = 3000;
var liste = new werteliste(location.search);
var title = "pictures";
var button_home = document.getElementById('button_home');
var button_go = document.getElementById('button_go');
var button_pause = document.getElementById('button_pause');
var button_next = document.getElementById('button_next');
var button_last = document.getElementById('button_last');
button_home.onclick = function(){window.location.href='index.xhtml';}
button_go.onclick = function(){slide();}
button_pause.onclick = function(){pause();}
button_last.onclick = function(){last();}
button_next.onclick = function(){next();}
filename = liste.name1;
number_pics = liste.num_pix;
filetype = liste.typex;
title = liste.title;
function werteliste(querystring){
if(querystring == '') return;
var wertestring = querystring.slice(1);
var paare = wertestring.split("&");
var paar, name1, wert, type1, title;
name1 = paare[0];
wert = paare[1];
type1 = paare[2];
title = paare[3];
this.name1 = name1;
this.num_pix = wert;
this.typex = type1;
this.title = title;
}
function animate(){
counter++;
if(counter > number_pics) counter = 1;
counter.value = (counter);
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
if(counter == number_pics) counter = 0;
}
function slide(){
start = setInterval("animate()", delayTime);
button_go.disabled = true;
button_pause.disabled = false;
}
function pause(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
}
function next(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
counter++;
if(counter > number_pics) counter = 1;
//document.counter.current_num.value = (counter); // show num
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
if(counter == number_pics) counter = 0;
}
function last(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
if(counter > 0) counter --;
if(counter == 0) counter = number_pics;
//document.counter_form.current_num.value = (counter); // show num
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
}
</script>
</body></html>
|
|
phst
Anmeldungsdatum:
24. Juni 2007
Beiträge: 527
|
document.write ist mit XHTML inkompatibel, da nicht garantiert werden kann, dass das Ergebnis wohlgeformtes XML ist. Weise den fraglichen Elementen eine ID zu (wie bei den Buttons) und verwende dann einen Code wie
| document.getElementById("...").innerText = "..."
|
Das könnte funktionieren.
|
|
mangoo
(Themenstarter)
Anmeldungsdatum:
28. Juni 2008
Beiträge: 33
Wohnort: europe
|
Danke für den Hinweis.
Verstehe aber nicht genau, wie du es meinst. Bei den Buttons habe ich die Elemente via "Button" eingefügt. Die anderen Elemente sind via JavaScript eingefügt. Was soll ich da genau wo eintragen?
|
|
Marc_BlackJack_Rintsch
Ehemalige
Anmeldungsdatum:
16. Juni 2006
Beiträge: 4687
Wohnort: Berlin
|
Du sollst statt document.write() zu verwenden, existierende Elemente per ID ansprechen und deren Text verändern. Falls Da keine passenden Elemente bestehen, kannst Du zur Not einfach leere <span>-Tags mit einer ID platzieren.
|
|
mangoo
(Themenstarter)
Anmeldungsdatum:
28. Juni 2008
Beiträge: 33
Wohnort: europe
|
Jetzt habe ich es so gemacht, ID-Tags gesetzt in span und das mit "document.getElementById("...").innerText = "..."
" angesprochen. Die Error-Konsole meldet keine Fehler. Es geht aber immer noch nicht, d.h. die Angaben aus den Variablen werden immer noch nicht ausgegeben. ☹
|
|
Ireyon
Anmeldungsdatum:
6. Juni 2007
Beiträge: 59
|
packe die aufrufe mal in den script-block im head-teil und rufe sie in slide() auf. ein script muss afaik definiert sein, bevor eine funktion aufgerufen wird, am besten sowieso im head-tag.
|
|
mangoo
(Themenstarter)
Anmeldungsdatum:
28. Juni 2008
Beiträge: 33
Wohnort: europe
|
das gesamte JavaScript hatte ich anfangs im Headerbereich. Nun funktioniert es aber so nicht mehr.
Es will nicht. Ich glaube, die Ursachen sind weitreichender bei Umstellung zu XML. <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>pictures</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="pictures, bilder, gallery" />
<meta name="description" content="pictures, bilder, gallery" />
<style type="text/css">
body{
margin:30px auto;
background-color:#121212;
}
.mainbox{
margin: 0px auto; width:800px; height: 550px;
position:relative;
font-size:10px;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #2e4ab2;
padding-left:40px;
border:2px solid #444444;
overflow: hidden;
background-color: #000000;
}
.screen{
margin: 0px auto; width: 760px; height: 510px;
position:absolute;
display: table;
overflow: hidden;
text-align: center;
font-size:10px;
background-color:#000000;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #f49404;
border: #222222 1px solid;
}
.screen_in{
width: 760px; height: 510px;
position:relative;
text-align: center;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.navigation{
margin: 0px auto; width:440px; height: 36px;
position:absolute;
bottom:-14px; left:280px;
font-size:8px;
background-color:transparent;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #f49404;
}
.titlebox{
position:relative;
width:400px; height: 20px;
top: 505px;
text-align: left;
float:left;
font-size:11px;
font-weight: bold;
color: #2e7db0;
background-color:transparent;
}
.counterbox{
position:relative;
width:350px; height: 20px;
top: 505px;
right: 110px;
text-align: right;
float:right;
color: #2e7db0;
background-color:transparent;
}
a:link {color:#000000; text-decoration:none; background-color:transparent; font-size:10px;}
a:visited {color:#000000; text-decoration:none; background-color:transparent; font-size:10px;}
a:hover {color:#c8ff20; text-decoration:none; background-color:transparent; font-size:10px;}
input.num_info{margin:0; color:#f49404; font-size:10px; border:0px; background-color:transparent; cursor: pointer; text-align:center;}
</style>
</head>
<body onload="slide();">
<div class="mainbox">
<br />
<div class="screen">
<div class="screen_in">
<img id="pic1" src="photos/001.png" width="" height="" alt="No image found." />
</div></div>
<br />
<div class="titlebox">
::: pictures <span id="id_title"></span>
</div>
<div class="counterbox">
image <!-- <span id="id_counter"></span> -->
<input class="num_info" type="text" value="0" id="id_counter" size="2" /> / 0
<span id="id_number_pics"></span>
</div>
<div class="navigation">
<button id="button_home" name="button_home" value="home"><strong>home</strong></button>
<button id="button_go" name="button_go" value="slide"><strong>slide</strong></button>
<button id="button_pause" name="button_pause" value="pause"><strong>pause</strong></button>
<button id="button_last" name="button_last" value="last"><strong>last</strong></button>
<button id="button_next" name="button_next" value="next"><strong>next</strong></button>
</div> </div>
<script type="text/javascript">
var img = new Array();
var counter = 0;
var number_pics = 0;
var start = null;
var filesource = "photos/";
var filename = "";
var filetype = "";
var delayTime = 3000;
var liste = new werteliste(location.search);
var title = "pictures";
var button_home = document.getElementById('button_home');
var button_go = document.getElementById('button_go');
var button_pause = document.getElementById('button_pause');
var button_next = document.getElementById('button_next');
var button_last = document.getElementById('button_last');
button_home.onclick = function(){window.location.href='index.xhtml';}
button_go.onclick = function(){slide();}
button_pause.onclick = function(){pause();}
button_last.onclick = function(){last();}
button_next.onclick = function(){next();}
filename = liste.name1;
number_pics = liste.num_pix;
filetype = liste.typex;
title = liste.title;
function werteliste(querystring){
if(querystring == '') return;
var wertestring = querystring.slice(1);
var paare = wertestring.split("&");
var paar, name1, wert, type1, title;
name1 = paare[0];
wert = paare[1];
type1 = paare[2];
title = paare[3];
this.name1 = name1;
this.num_pix = wert;
this.typex = type1;
this.title = title;
}
function animate(){
counter++;
if(counter > number_pics) counter = 1;
counter.value = (counter);
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
if(counter == number_pics) counter = 0;
}
function slide(){
start = setInterval("animate()", delayTime);
button_go.disabled = true;
button_pause.disabled = false;
document.getElementById("id_title").innerText = "hallo"; // show title
document.getElementById("id_counter").innerText = counter; // show counter
document.getElementById("id_number_pics").innerText = number_pics; // show number pics
}
function pause(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
}
function next(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
counter++;
if(counter > number_pics) counter = 1;
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
if(counter == number_pics) counter = 0;
}
function last(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
if(counter > 0) counter --;
if(counter == 0) counter = number_pics;
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
}
</script>
</body></html>
|
|
blackbird
Anmeldungsdatum:
19. November 2004
Beiträge: 3397
Wohnort: Hermagor, Kärnten - Österreich
|
Bist du verpflichted XHTML zu nutzen? Wenn nicht, Finger weg davon. Das macht Schmerzen ohne Ende.
|
|
Ireyon
Anmeldungsdatum:
6. Juni 2007
Beiträge: 59
|
XHTML ist aber toll. man sollte sich vorher aber mit HTML4 auseinandergesetzt haben, aberd das hat mangoo ja. trotzdem gehört javascript in den head, nicht in den body. ich kann dir auch sagen warum: <body onload="slide()"> slide ist bis zum aufruf undefiniert.
|
|
Hello_World
Anmeldungsdatum:
13. Juni 2006
Beiträge: 3620
|
Wieso setzt Du Dich nicht einfach mal auf Deinen Hintern und debuggst Dein Script systematisch? Dann wäre Dir auch aufgefallen, dass das splitten des Query-Strings nicht funktioniert. Das ist auch ganz logisch, denn wenn Du in einem XHTML-Dokument sagst, dass Du den String an & splitten willst, dann wird er auch an & splitten, und nicht an &. Die Lösung ist, das & durch ein & zu ersetzen und den JS-Quelltext, wie ich in meinem ersten Posting bereits schrieb, in eine separate Datei auslagern, damit der HTML- bzw. XML-Parser gar nicht mehr damit in Berührung kommt und sich daher auch nicht mehr am & verheddern kann.
Übrigens ist die Art und Weise, wie Du Deine globalen Variablen initialisiert, sehr unsauber. So etwas sollte in einer eigenen Funktion erledigt werden, die beim onload-Event ausgeführt wird. @blackbird: Wie kommst Du auf diesen Blödsinn? Ich wüsste kein einziges sinnvolles Argument gegen XHTML, das nicht auf Unkenntnis zurückzuführen ist. Man muss einfach nur wissen, was man tut. @mangoo: Ich hatte nicht ohne Grund den Schema-Validator von schneegans.de verlinkt. Dein Dokument entspricht nämlich immer noch nicht dem XHTML-Schema.
|
|
Ireyon
Anmeldungsdatum:
6. Juni 2007
Beiträge: 59
|
der W3C-Validator validiert es. und nochmal zur verdeutlichung: die &blablabla;s sind NUR im XHTML-Code notwendig, nicht aber in CSS, Javascript usw. Ich empfehle dir mal einen blick auf http://de.selfhtml.org 😉
|
|
mangoo
(Themenstarter)
Anmeldungsdatum:
28. Juni 2008
Beiträge: 33
Wohnort: europe
|
Danke erstmal für eure Anmerkungen. Aber nochmal zur Verdeutlichung: Ich hatte validierte Websiten nach "html 4.01 transitional". Diese habe ich umgeschrieben in "xhtml 1.0 strict" (XML ist seit 10 Jahren (u.a. der html Nachfolge-)Standard und ich wollte meine Dokumente aktualisieren). Vorher hatte alles bestens funktioniert. Jetzt habe ich wie gesagt Probleme mit der Anpassung des JavaScriptes. Es gibt eine xhtml-Datei mit Links, die alle zur gleichen Datei (der Diashow) führen, diese die Parameter mitgeben, welche Bildergruppe angezeigt werden soll. Leider muss es clientbasiert sein und ich kann php nicht nutzen. Die Aufrufe erfolgen so:
<a href="player.xhtml?a&100&.jpg&BILDER">tolle Bilder (Bsp.)</a>
Nach meiner Systematik werden die Infos zu den Dateinamen und Beschreibung mitgegeben: "a" für Gruppe A (a1.jpg, a2.jpg, ...); "100" → Anzahl der Bilder; ".jpg" → Dateiendung (jpg/png); "BILDER" → Beschreibung. Da der Validator http://validator.w3.org/ alle meine Dateien validiert und ich nicht der JavaScript-Profi bin, kann ich keine Fehler erkennen. Schneegänse interessieren mich derzeit nicht, sorry (w3.org ist für mich massgebend). Die Anzahl der Bilder wird ja korrekt herausgefiltert und die Diashow läuft.
Ein Ausgliedern des Scriptes und Ändern von "&" in "&" hat meinem Versuch nach nichts gebracht.
Die ganze Datei liefere ich auch gleich mit, damit jeder sich das Problem mal eben visualisieren kann.
selfhtml hatte mir damals viel gebracht, ist in Bezug zu XML aber leider veraltet. Nochwas: CDATA hatte ich anfangs auch drin und löste das Problem nicht. Aber ich mache es gern wieder rein. Frage: funktionieren denn bei euch eure Vorschläge auch oder sind es nur Vermutungen?
Möchte halt wissen, was ich falsch mache.
Danke.
|
|
phst
Anmeldungsdatum:
24. Juni 2007
Beiträge: 527
|
Ireyon schrieb: der W3C-Validator validiert es.
Der W3C-Validator ist ein angepasster SGML-Validator, kein XML-Validator. Benutze zum Validieren einen Schemavalidator, z.B. den oben im Thread verlinkten.
und nochmal zur verdeutlichung: die &blablabla;s sind NUR im XHTML-Code notwendig, nicht aber in CSS, Javascript usw.
Wenn diese Codeteile im XHTML-Dokument eingebettet sind, müssen dort entweder Entitäten oder CDATA-Sektionen verwendet werden, genau wie in jedem anderen Elementinhalt auch.
Ich empfehle dir mal einen blick auf http://de.selfhtml.org 😉
SELFHTML ist mittlerweile leider an vielen Stellen veraltet. Ich empfehle, auf Hello World zu hören.
Ich glaube, die Ursachen sind weitreichender bei Umstellung zu XML.
Du musst dich ein bisschen mit DOM auseinandersetzen. Habe es jetzt selber ausprobiert, innerText funktioniert nicht. In DOM 3 wurde textContent eingeführt. Wenn du kompatibel zu älteren Browsern bleiben möchtest, kannst du dich auf DOM 1 beschränken und mit appendChild, createTextNode usw. arbeiten. Hier ein bisschen Lesestoff zum DOM:
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html Deine slide-Funktion kommt gar nicht erst zu der relevanten Stelle, weil schon vorher Fehler auftreten, wie man mit Tools wie Firebug oder der Firefox-Fehlerkonsole ganz leicht bemerkt.
|