+ Antworten
Ergebnis 1 bis 5 von 5

Thema: SEO und Druckfunktion bei Seitenumbruch, Slider oder Tabs

  1. #1
    Kommt häufiger vorbei
    Registriert seit
    22.10.2006
    Ort
    Rottweil
    Beiträge
    499
    Bedankte sich
    114
    Erhielt 14 Danksagungen
    in 13 Beiträgen

    Standard SEO und Druckfunktion bei Seitenumbruch, Slider oder Tabs

    Hallo!
    Habe gerade meine neue Website fertig gestellt und möchte auch das Ausdrucken von Seiten zuzulassen. Meine Artikel sind meist ziemlich lang und haben viel Text.

    Deshalb habe ich bisher den „erschlagenden” Eindruck der Textmenge durch Slider verringert und hierzu das PlugIn Slider von Regular Labs (NoNumber) verwendet. Beim Redesign meiner Site ist mir nun aufgefallen, dass die Slider verhindern, dass die Webseite komplett ausgedruckt werden kann. Hierzu müssten vorher (wie bei RegularLabs auch gut erklärt) per Javascript alle Slider ausgeklappt werden. Danach könnte man alles ausdrucken.
    Nun stelle ich fest, dass dieses Problem auch besteht, wenn ich die Seite mit dem Seitenumbruch-PlugIn von Joomla aufteile. Allerdings gibt es ja auch hier den Link,"alle anzeigen".

    Jetzt hätte ich gerne einen Druck-Button angelegt, der drei Aktionen gleichzeitig erledigt,
    nämlich zunächst das Ausklappen und danach die Druckfunktion ausführt und dann alles wieder einklappt / schließt.

    Aber wie kann ich dann einen "Print-Button" verwirklichen, mit dem diese drei Aktionen nacheinander ausgeführt werden? Hier müsste ja wohl auch eine Pause zwischen den ersten beiden Aktionen eingefügt werden, um die Zeit zu berücksichtigen, die benötigt wird, bis der bisher nicht angezeigte Text vom Server geliefert und vom Browser gerendert wurde.

    Aus Webrecherche fand ich Script-Fragmente, die ich dann so zusammen gebaut habe:

    Code:
    <script type="text/javascript" language="JavaScript">
    <!-- Begin
    function SliderDrucken() {
    focus();
    var el = document.getElementById("id");
    el.addEventListener("click", openAllSliders(){alert("click1 triggered")}, false);
    el.addEventListener("click", window.print(){alert("click2 triggered")}, false);
    el.addEventListener("click", closeAllSliders(){alert("click3 triggered")}, false);
    }
    //  End --<
    </script>
    und der Aufruf über den Button in der Website müsste dann wie folgt gehen:
    Code:
    <form>
    <input type="button" value=" drucken " onClick="javascript:SliderDrucken()">
    </form>
    Der Button wurde auch dargestellt, aber ein Click darauf löste keine Funktion aus. Mir fehlen bei Weitem Wissen und Fähigkeiten, herauszufinden, warum das nicht klappt.
    Die Funktionsaufrufe zum Aufklappen und Schließen aller Slider fand ich bei Regular Labs. "window.print" fand ich oft im Web gezeigt.
    JS müsste mit dem obigen Script eigentlich drei mal einen Click auf den Button simulieren, wobei nacheinander die drei Funktionen abgearbeitet werden sollen.

    Freundliche Grüße
    Clemens

  2. #2
    Gehört zum Inventar Avatar von chr-hl
    Registriert seit
    28.07.2009
    Ort
    Lübeck
    Beiträge
    5.991
    Bedankte sich
    158
    Erhielt 1.823 Danksagungen
    in 1.780 Beiträgen

    Standard

    Hallo,

    ich habe mir einmal die Demoseite angesehen.
    Der Inhalt von eingeklappten Panels ist ja vorhanden, die Anzeige wird über CSS unterdrückt.
    Damit sollte es nach meinem Empfinden möglich sein, mit entprechendem CSS für den Media Type print das gewünschte zum Ausdruck zu bringen.

    Christian
    1. Ohne Link >>> Kein Wink!!!
    2. Konnte ich Dir helfen - dann freut ein Klick auf "Bedanke Dich"
    JUG Lübeck + develop.linsner-luebeck.de

  3. Erhielt Danksagungen von:


  4. #3
    Kommt häufiger vorbei
    Registriert seit
    22.10.2006
    Ort
    Rottweil
    Beiträge
    499
    Bedankte sich
    114
    Erhielt 14 Danksagungen
    in 13 Beiträgen

    Standard

    Hey danke! Diese Idee gefällt mir sehr, weil sie so einfach realisierbar wäre.

    Mein Template hat natürlich eine print.css. Und der übliche Print-Button wird ja durchaus bereit gestellt. Und der würde dann ganz ohne Workaround auch funktionieren.

    Ich werde dem in den kommenden Tagen mal nachgehen und dann hier berichten.

    Erst mal herzlichen Dank für den Tipp!

    Clemens

  5. #4
    Gehört zum Inventar Avatar von chr-hl
    Registriert seit
    28.07.2009
    Ort
    Lübeck
    Beiträge
    5.991
    Bedankte sich
    158
    Erhielt 1.823 Danksagungen
    in 1.780 Beiträgen

    Standard

    Hallo Clemens,

    Das Gute ist manchmal so nah.

    Wenn ich das richtig gesehen habe, wird für die eingeklappten Panels "height: 0" verwendet.
    Außerdem kann dabei auch den gesamten Ausdruck ein passendes Drucklayout verpassen.

    Christian
    1. Ohne Link >>> Kein Wink!!!
    2. Konnte ich Dir helfen - dann freut ein Klick auf "Bedanke Dich"
    JUG Lübeck + develop.linsner-luebeck.de

  6. #5
    Kommt häufiger vorbei
    Registriert seit
    22.10.2006
    Ort
    Rottweil
    Beiträge
    499
    Bedankte sich
    114
    Erhielt 14 Danksagungen
    in 13 Beiträgen

    Standard

    Hallo!
    Das Kriterium "height 0" war wohl nicht das entscheidende. Ich fand mit Hilfe der Webdeveloper-Tools in Firefox, dass die Klassen:
    Code:
      
    .nn_sliders.accordion > .accordion-group.active > .accordion-heading > a.accordion-toggle span.nn_sliders-title-inactive
    auf display: none gesetzt sind.

    Versuchsweise und ohne die Ansicht der Produktionssite zu stören, habe ich in der base.print.css, die für das Drucken entscheidend ist, alle diese Klassen einfeügt und auf display: inline gesetzt.

    Das hat bereits ausgereicht, alle Slider auszuklappen. Allerdings werden in der Druckvorschau nun alle Überschriften der Slider in h1 oder h1 dargestellt, während ich im HTML-Layout h3 definiert habe.
    Mir ist es bisher nicht gelungen, die Slider-Überschriften für den Druck in der base.print.css mit den gleichen Definitionen auszustatten, wie das h3-Tag. Wenn ich Pech habe, werden die Überschriften der Slider irgendwie per PHP definiert und dann ist die CSS_Anweisung natürlich machtlos.

    Außerdem sah ich, dass einige DIV-Container sowie ein von mir im Content platziertes Modul einen beim Druck unerwünschten Inhalt einfügt. Deshalb benötige ich noch eine Klasse, mit der ich verhindern kann, dass solche Elemente mit im Druck eingefügt werden.
    Hierzu fand ich in besagter base.print.css ganz zu Anfang die Klasse .ym-noprint, die auf dispaly: none gesetzt ist. Die könnte ich nun dazu verwenden, unerwünschte Inhalte beim Druck auszublenden.

    Frage hierzu:
    Wie schaffe ich es, dass das ganze Modul (oder zumindest der Inhalt des Moduls) mit Hilfe dieser Klasse beim Druck ausgeblendet wird?

    Und wie kann ich einem DIV-Container, der in diesem Fall bereits eine Klasse zugewiesen bekommen hat, diese zweite Klasse ebenfalls zugewiesen bekommt, mitten im HTML-Code?
    Ich glaube
    Code:
    <div class="ym-noprint" class="mini-screen"> Inhalt... </div>
    wird nicht funktionieren.

    Immerhin kann (als erster Schritt) jetzt jemand aus meiner Website drucken, auch wenn das Design betr der Überschriften und der beim Druck unerwünschten Elemente noch furchtbar ist.

    Vieleicht kann mir jemand was zum Ausblenden der unerwünschten Elemente sagen? - Mit den h3-Defintionen werde ich evtl. noch selbst zurecht kommen.

    Beste Grüße
    Clemens

+ Antworten

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein