HTML5-Slideshow ausdrucken
Posted: 01. May 2012 19:50
Hallo,
ich versuche mich gerade etwas in HTML5 und JS einzuarbeiten.
Nach folgender Vorgabe habe ich eine Slideshow erstellt:
www.youtube.com/watch?v=R4G_IygDK3Y&fea ... EVXC4R6VNo
Über position: relativ oder position: absolut habe ich Bilder und Texte (article) übereinander angeordnet.
Mit Hilfe von Java Script wird opacity verändert.
Für den Druck habe ich die Datei druck.css mit folgendem Inhalt angelegt:
Wenn die Seite längere Zeit geöffnet ist und ich im Browser auf die Druckvorschau gehe, sind nur das erste und das gereade gezeigte Bild mit Text zu sehen. Nach dem Betätigen der Tastenkombination STRG+R im Browser werden alle Bilder mit Text in der Druckvorschau angezeigt.
Vielleicht kann man folgendes Script noch so anpassen, damit opacity nur für screen verändert wird und für print auf 1 stehen bleibt:
Einen Link auf der Seite, über den die druckbare Version ausgegeben wird, möchte ich vermeiden.
Über Hinweise, wie man alle Bilder und Texte der Slideshow untereinander im Browser ausgedrucken kann, würde ich mich freuen.
Viele Grüße
Frank
ich versuche mich gerade etwas in HTML5 und JS einzuarbeiten.
Nach folgender Vorgabe habe ich eine Slideshow erstellt:
www.youtube.com/watch?v=R4G_IygDK3Y&fea ... EVXC4R6VNo
Über position: relativ oder position: absolut habe ich Bilder und Texte (article) übereinander angeordnet.
Mit Hilfe von Java Script wird opacity verändert.
Für den Druck habe ich die Datei druck.css mit folgendem Inhalt angelegt:
Code: Select all
articles {
opacity: 1;
}
Vielleicht kann man folgendes Script noch so anpassen, damit opacity nur für screen verändert wird und für print auf 1 stehen bleibt:
Code: Select all
<script type="text/javascript">
var articles = document.getElementById("overview").querySelectorAll("article"), a = 0, l = articles.length;
var slideshow = setInterval(function() {
for(var i=(l-1); i>0; i--) {
if(i==a) {
articles[i].style.opacity = 1;
} else {
articles[i].style.opacity = 0;
}
}
if(a==(l-1)) {
a=0;
} else {
a++;
}
}, 8000);
</script>
Über Hinweise, wie man alle Bilder und Texte der Slideshow untereinander im Browser ausgedrucken kann, würde ich mich freuen.
Viele Grüße
Frank