nicht angemeldet
suit
Gunnar Bittersmann
suit
suit
suit
suit
suit
suit
suit
Gunnar Bittersmann
suit
dedlfix
Ich versuche mich gerade mit cycle ( http://jquery.malsup.com/), eine Erweiterung für JQuery.
Jetzt gibt es praktisch die zweite Version:
http://jquery.malsup.com/cycle2/demo/non-image.php
doch leider ist die nicht mehr Valide zu html HTML 4.01,
gibt es eine Möglichkeit die ich übershene habe, das es doch valide zu HTML 4.01 ist?
Hallo,
gibt es eine Möglichkeit die ich übershene habe, das es doch valide zu HTML 4.01 ist?
cycle2 setzt auf HTML5. Wenn du HTML4-valide arbeiten willst musst du wohl cycle (1) nehmen.
Gruß
Ole
Ich versuche mich gerade mit cycle ( http://jquery.malsup.com/), eine Erweiterung für JQuery.
Jetzt gibt es praktisch die zweite Version:http://jquery.malsup.com/cycle2/demo/non-image.php
doch leider ist die nicht mehr Valide zu html HTML 4.01,
gibt es eine Möglichkeit die ich übershene habe, das es doch valide zu HTML 4.01 ist?
Nimm die unobtrusive API-Variante und verzichte auf die Konfiguration mit den data-Attributen.
http://jquery.malsup.com/cycle2/api/
"Options can also be set programatically if you prefer [...]
Damit bist du einerseits valide zu HTML 4.01 (wenn du dafür denn einen speziellen Grund hast) und andererseits hast du keinen Müll im Quellcode.
Funktioniert dann so wie es schon beim ursprünglichen cycle-Plugin funktioniert hat.
@@suit:
nuqneH
Damit bist du einerseits valide zu HTML 4.01 (wenn du dafür denn einen speziellen Grund hast)
Es sollte heutzutage keinen Grund für HTML 4.01 geben.
Dafür unzählige dagegen: HTML 4.01 fehlen wichtige Features für Barrierefreiheit (WAI-ARIA-Attribute, strukturelle Elemente wie main, nav, section, article), Lokalisierung (translate-Attribut), Mikroformate (RDFa, <s>microdata</s>) und und und …
<!DOCTYPE html> und gut ist.
Qapla'
Super, danke...
Jetzt ist er wieder valide, doch nicht ganz
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg"
data-cycle-title="Raquette Lake"
data-cycle-desc="Adirondack State Park">
Verstehst du wie man diesen Text auch Valide machenkann??
data-cycle-title="Raquette Lake"
data-cycle-desc="Adirondack State Park
<!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">
<head>
<title>Titel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
$('.cycle-slideshow').cycle({
data-cycle-timeout: 6000;
data-cycle-fx: 'scrollHorz'
});
</script>
</head>
<body>
<div class="cycle-slideshow" >
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg"
data-cycle-title="Raquette Lake"
data-cycle-desc="Adirondack State Park">
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="" />
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="" />
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="" />
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="" />
</div>
</body>
</html>
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg"
data-cycle-title="Raquette Lake"
data-cycle-desc="Adirondack State Park">
>
> Verstehst du wie man diesen Text auch Valide machenkann??
nimm das Zeug aus den Attributen raus und bau eine Liste
~~~html
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" />
</li>
Sagt doch keiner, dass der Code genauso ausschaun muss wie dort gezeigt- das ist nur ein Beispiel (und noch dazu ein schlechtes) weil Inhalt in Attribute verlagert wird, die ein gewöhnlicher Client nicht als Inhalt verarbeitet.
Mit HTML5 könnte man das noch in eine figure/caption-Geschichte umbauen.
Ja, aber wenn ich eine LISTE mache,
dann wird doch nur die Liste ausgegeben, nicht mehr das Script ausgeführt...
<!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">
<head>
<title>Titel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
$('.cycle-slideshow').cycle({
data-cycle-timeout: 6000;
data-cycle-fx: 'scrollHorz'
});
</script>
</head>
<body>
<div class="cycle-slideshow" >
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<ul>
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" />
</li>
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" />
</li>
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" />
</li>
</ul>
</div>
</body>
</html>
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg"
data-cycle-title="Raquette Lake"
data-cycle-desc="Adirondack State Park">
> >
> > Verstehst du wie man diesen Text auch Valide machenkann??
>
> nimm das Zeug aus den Attributen raus und bau eine Liste
>
> ~~~html
<li>
> <h1>Raquette Lake</h1>
> <p>Adirondack State Park</p>
> <img src="http://jquery.malsup.com/cycle2/images/p4.jpg" />
> </li>
Sagt doch keiner, dass der Code genauso ausschaun muss wie dort gezeigt- das ist nur ein Beispiel (und noch dazu ein schlechtes) weil Inhalt in Attribute verlagert wird, die ein gewöhnlicher Client nicht als Inhalt verarbeitet.
Mit HTML5 könnte man das noch in eine figure/caption-Geschichte umbauen.
Ja, aber wenn ich eine LISTE mache,
dann wird doch nur die Liste ausgegeben, nicht mehr das Script ausgeführt...
Dem cycle-Plugin ist es völlig egal ob das Bilder, div- oder li-Elemente sind - das ist eine reine Konfigurationssache - du musst ihm nur einen Selektor mitgeben, mit dem er die zu slidenden Elemente findet.
http://jquery.malsup.com/cycle2/demo/non-image.php (geht natürlich auch über die API).
Ich bekomme das nicht hin. Egal wie oft ich es mir durchlesen.
Ich verstehe nicht wie ich dem Script klarmachen soll, das jetzt li,h1,p anzusteuern sind.
Thorsten
Ja, aber wenn ich eine LISTE mache,
dann wird doch nur die Liste ausgegeben, nicht mehr das Script ausgeführt...Dem cycle-Plugin ist es völlig egal ob das Bilder, div- oder li-Elemente sind - das ist eine reine Konfigurationssache - du musst ihm nur einen Selektor mitgeben, mit dem er die zu slidenden Elemente findet.
http://jquery.malsup.com/cycle2/demo/non-image.php (geht natürlich auch über die API).
Ich bekomme das nicht hin. Egal wie oft ich es mir durchlesen.
Ich verstehe nicht wie ich dem Script klarmachen soll, das jetzt li,h1,p anzusteuern sind.
Siehe "slides" unter Options:
http://jquery.malsup.com/cycle2/api/
Ich bekomme das nicht hin. Egal wie oft ich es mir durchlesen.
Auch wenn ich dein Beispiel nehme...
<!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">
<head>
<title>Titel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
$('.cycle-slideshow').cycle({
data-cycle-fx: 'scrollHorz',
data-cycle-timeout: 2000,
data-cycle-slides='> div'
});
</script>
</head>
<body>
<div class="cycle-slideshow">
<div style="background:#fcc">
<p>Lorem ipsum dolor ...
</div>
<div style="background:#cfc">
<p>Lorem ipsum dolor ...
</div>
<div style="background:#ccf">
<p>Lorem ipsum dolor ...
</div>
</div>
</body>
</html>
$('.cycle-slideshow').cycle({
data-cycle-fx: 'scrollHorz',
data-cycle-timeout: 2000,
data-cycle-slides='> div'
In der API-Version brauchst du das "data-cycle" - da notierst du nur "fx", "timeout" usw - das geht doch eigentlich klar aus der Doku hervor.
Ich lauf gleich gegen die Wand.
Ich versthe es nicht. Wahrscheinlich stehe ich davor, aber ich blick wirklich nicht durch...
Ich nehme jetzt dein Besipiel von oben.
data-cycle-slides:'> li'
so müsste es eigentlich klappen, aber keine Chance...
<!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">
<head>
<title>Titel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
$('.cycle-slideshow').cycle({
data-cycle-timeout: 6000;
data-cycle-fx: 'scrollHorz',
data-cycle-slides:'> li'
});
</script>
</head>
<body>
<div class="cycle-slideshow" >
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<ul>
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" />
</li>
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" />
</li>
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" />
</li>
</ul>
</div>
</body>
</html>
data-cycle-slides:'> li'
im JavaScript musst du "slides" notieren - nur im HTML muss hier "data-cycle-slides" stehen.
data-cycle-slides:'> li'im JavaScript musst du "slides" notieren - nur im HTML muss hier "data-cycle-slides" stehen.
Jetzt kommt ich wieder...
$('.cycle-slideshow').cycle({
timeout: 6000,
fx: 'scrollHorz',
slides:'> li'
});
dann müsste es ja so gehen
<div class="cycle-slideshow" >
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<ul>
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" />
</li>
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" />
</li>
<li>
<h1>Raquette Lake</h1>
<p>Adirondack State Park</p>
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" />
</li>
</ul>
</div>
$('.cycle-slideshow').cycle({
slides:'> li'
dann müsste es ja so gehen
<div class="cycle-slideshow" >
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<ul>
<li>
dein li ist kein Kind-Element des Elements mit der Klasse cycle-slideshow - der Selektor "> li" trifft somit auf nichts zu.
Ein paar CSS-Grundlagen könnten dir nicht schaden, damit wäre dein Problem in Null Komma Josef gelöst.
Ein paar CSS-Grundlagen könnten dir nicht schaden, damit wäre dein Problem in Null Komma Josef gelöst.
Das mag sein, aber ich denke ich habe erst einmal Grundsätzliches Javascript Problem...
Beispiel:
das sind die Anweisungen...
<div class="cycle-slideshow"
data-cycle-fx="fadeout"
data-cycle-timeout="3000"
data-cycle-next="#next"
data-cycle-manual-fx="scrollHorz"
data-cycle-manual-speed="300"
>
aus: http://jquery.malsup.com/cycle2/demo/manualFx.php
Hier habe ich sie laut API umgewandelt und angepasst, trotzdem werden sie nicht angenommen. Es ist gar so als sind sie nicht einmal da. Da kann ich rumtesten wie ich will, wenn das Script von Haus aus keine Änderunge annimmt, helfen dann auch die CSS Anweisungen nichts.
<!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">
<head>
<title>Titel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
$('.cycle-slideshow').cycle({
fx:'fadeout',
timeout:3000,
next:'next',
fx:'scrollHorz',
speed:300
});
</script>
</head>
<body>
<div class=center><a href=# id=next>Next</a></div>
<div class="cycle-slideshow" >
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>
Das mag sein, aber ich denke ich habe erst einmal Grundsätzliches Javascript Problem...
Nein, das dortige Problem ist ein reines Problem mit einem CSS-Selektor den die Selekor-Engine von jQuery (Sizzle) verarbeitet.
Hier habe ich sie laut API umgewandelt und angepasst, trotzdem werden sie nicht angenommen. Es ist gar so als sind sie nicht einmal da.
Das nachfolgende ist ein JavaScript-Problem, genauer gesagt ein jQuery-Problem:
<!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">
<head>
<title>Titel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle2.js"></script><script type="text/javascript">
$('.cycle-slideshow').cycle({
fx:'fadeout',
timeout:3000,
next:'next',
fx:'scrollHorz',
speed:300
});
</script>
Hier wurde das cycle-Plugin "instanziert" und ausgeführt - $('.cycle-slideshow') trifft aber auf nichts was bisher in deinem Quelltext vorkommt zu.
</head>
<body><div class=center><a href=# id=next>Next</a></div>
<div class="cycle-slideshow" >
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
Hier erst ist überhaupt das nötige HTML vorhanden, das JavaScript ist aber schon gelaufen und hat nix gefunden, drum wird auch nix damit gemacht.
</body>
</html>
Hier wären jetzt ein paar jQuery-Grundlagen von Vorteil:
<http://api.jquery.com/ready/>
btw: XHTML 1.0 Strict ist dein HTML ebenfalls nicht ;)
btw: XHTML 1.0 Strict ist dein HTML ebenfalls nicht ;)
ja.
Ich gebe nicht auf. Ich will das dieses Ding läuft. Ist es jetzt besser?????
<!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">
<head>
<title>Titel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.cycle-slideshow').cycle({
fx:'fadeout',
timeout:3000,
next:'next',
fx:'scrollHorz',
speed:300
});
});
</script>
</head>
<body>
<div class="center"><a href="#" id="next">Next</a></div>
<div class="cycle-slideshow" >
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="" />
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="" />
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="" />
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="" />
</div>
</body>
</html>
btw: XHTML 1.0 Strict ist dein HTML ebenfalls nicht ;)
ja.
Ich gebe nicht auf. Ich will das dieses Ding läuft. Ist es jetzt besser?????
Das sieht auf den ersten Blick gut aus und sollte funktionieren - tut es denn jetzt mal prinzipiell was es soll?
btw: Terry Pratchett hat mal sinngemäß geschrieben, dass Satzzeichen keine Rudeltiere sind :)
btw: XHTML 1.0 Strict ist dein HTML ebenfalls nicht ;)
ja.
Ich gebe nicht auf. Ich will das dieses Ding läuft. Ist es jetzt besser?????
Das sieht auf den ersten Blick gut aus und sollte funktionieren - tut es denn jetzt mal prinzipiell was es soll?
btw: Terry Pratchett hat mal sinngemäß geschrieben, dass Satzzeichen keine Rudeltiere sind :)
NEIN, es nimmt nichts an, es ist so als ob meine Daten nicht mal da wären...
<script type="text/javascript">
$( document ).ready(function() {
$('.cycle-slideshow').cycle({
fx:'fadeout',
timeout:3000,
next:'next',
fx:'scrollHorz',
speed:300
});
});
</script>
<!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">
<head>
<title>Titel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.cycle-slideshow').cycle({
fx:'fadeout',
timeout:3000,
next:'next',
fx:'scrollHorz',
speed:300
});
});
</script>
</head>
<body>
<div class="center"><a href="#" id="next">Next</a></div>
<div class="cycle-slideshow" >
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="" />
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="" />
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="" />
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="" />
</div>
</body>
</html>
NEIN, es nimmt nichts an, es ist so als ob meine Daten nicht mal da wären...
Kannst du das mal irgendwo online bereitstellen - spontan sehe ich hier keinen Fehler.
NEIN, es nimmt nichts an, es ist so als ob meine Daten nicht mal da wären...
Kannst du das mal irgendwo online bereitstellen - spontan sehe ich hier keinen Fehler.
Wenn alle sgeklappt hat müsste es hier sein.
http://jsfiddle.net/TBLp9/
Normalerweise müsste auf KLICK NEXT das Bild weiter gehen.
Aber du siehst auch das WORT next im Code wird nicht angezeigt, auch wenn du es änderst.....
http://jsfiddle.net/TBLp9/
Normalerweise müsste auf KLICK NEXT das Bild weiter gehen.
Dir fehlt beim Selektor für das Next-Element eine Raute - da musst du "#next" reinschreiben (wieder ein CSS-Thema)
Aber du siehst auch das WORT next im Code wird nicht angezeigt, auch wenn du es änderst.....
Aber ungeachtet dessen funktioniert es nicht, weil dein äußerer Container die Klasse "cycle-slideshow" hat, das verursacht, dass die Slideshow mit Grundeinstellungen losläuft und alles igoriert was du sagst - darum umbenennen:
@@suit:
nuqneH
Dir fehlt beim Selektor für das Next-Element eine Raute - da musst du "#next" reinschreiben (wieder ein CSS-Thema)
Nö, ein Selektor-Thema. ;-b
Qapla'
Dir fehlt beim Selektor für das Next-Element eine Raute - da musst du "#next" reinschreiben (wieder ein CSS-Thema)
Nö, ein Selektor-Thema. ;-b
Die von der CSS-Workinggroup erarbeitet werden :p
Jetzt funktioniert es, ich habe deine erste Anmerkung mit den Listen auch umgesetzt:
Die Listen, und die Überschriften gehen. doch unterhalb habe ich die Ausgabe desc, bei jedem Bild. Hast Du eine Idee wie ich diese wegbekommen?
Thorsten (und vielen Dank)
Jetzt funktioniert es, ich habe deine erste Anmerkung mit den Listen auch umgesetzt:
Die Listen, und die Überschriften gehen. doch unterhalb habe ich die Ausgabe desc, bei jedem Bild. Hast Du eine Idee wie ich diese wegbekommen?
http://jquery.malsup.com/cycle2/demo/overlay.php
http://jquery.malsup.com/cycle2/api/ Stichwort "overlay-template"
@@suit:
nuqneH
Nein, das dortige Problem ist ein reines Problem mit einem CSS-Selektor den die Selekor-Engine von jQuery (Sizzle) verarbeitet.
Dass die Selektoren mittlerweile auch von anderen Dingen als CSS benutzt werden, könnte der Grund sein, warum sie gar nicht mehr „CSS-Selektoren“ heißen.
Qapla'
Nein, das dortige Problem ist ein reines Problem mit einem CSS-Selektor den die Selekor-Engine von jQuery (Sizzle) verarbeitet.
Dass die Selektoren mittlerweile auch von anderen Dingen als CSS benutzt werden, könnte der Grund sein, warum sie gar nicht mehr „CSS-Selektoren“ heißen.
Ja, sie heissen genaugenommen mittlerweile "Slectors Level n" - werden aber immer noch von der CSS-Workinggroup entwickelt :)
Tach!
Ich versthe es nicht. Wahrscheinlich stehe ich davor, aber ich blick wirklich nicht durch...
Warum machst du dir das Leben so schwer? Die Antwort auf die Frage, warum es HTML 4.01 (XHTML 1.0) sein muss, bist du schuldig geblieben. Stell doch den Doctype um auf <!DOCTYPE html> und freu dich über die Möglichkeiten der data-*-Attribute. Oder lass den Doctype auf XHTML1.0 und ignorier die Nicht-Validität beim Einsatz von data-*. Validität ist doch kein Selbstzweck, und es ist auch kein Verbrechen, wenn man bewusst an bestimmten Stellen Invalidität in Kauf nimmt, wenn es denn unbedingt noch die alte HTML-Version sein muss.
dedlfix.