Hinweis: Das Forum wird geschlossen! Neue Registrierungen sind nicht mehr möglich!

 Zurück zu Pro-Linux   Foren-Übersicht   FAQ     Suchen    Mitgliederliste
HTML5-Slideshow ausdrucken

 
Neuen Beitrag schreiben   Auf Beitrag antworten    Pro-Linux Foren-Übersicht -> Programmieren - Allgemein
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
hastifranki



Anmeldungsdatum: 06.05.2006
Beiträge: 252

BeitragVerfasst am: 01. Mai 2012 19:50   Titel: HTML5-Slideshow ausdrucken

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&feature=bf_next&list=UL4EVXC4R6VNo

Ü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:
articles {
        opacity: 1;
}

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:
Code:
<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>

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
 
Benutzer-Profile anzeigen Private Nachricht senden

hastifranki



Anmeldungsdatum: 06.05.2006
Beiträge: 252

BeitragVerfasst am: 02. Mai 2012 8:46   Titel:

Ich glaube, ich habe eine Lösung gefunden.

Folgenden Tag habe ich verändert: <body onbeforeprint="drucken()" >

Code:
<script type="text/javascript">
            var articles = document.getElementById("overview").querySelectorAll("article"), l = articles.length, a=l;
            function drucken(){
               for (var i=1; i<l; i++) {
                          articles[i].style.opacity = 1;
                       }
            }            
            var slideshow = setInterval(function() {
                if(a==1) {
                       a=l;
                       for (var i=1; i<l; i++) {
                          articles[i].style.opacity = 1;
                       }
                } else {                      
                      a--;
                      articles[a].style.opacity = 0;
                }
            }, 5000);
</script>


Mit Firefox 12 funktioniert es.

Viele Grüße
Frank
 
Benutzer-Profile anzeigen Private Nachricht senden

Beiträge vom vorherigen Thema anzeigen:   
     Pro-Linux Foren-Übersicht -> Programmieren - Allgemein Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehen Sie zu:  

Powered by phpBB © phpBB Group
pro_linux Theme © 2004 by Mandaxy