tag:forum.selfhtml.org,2005:/self Virtueller Scrollbalken oder Ähnliches? – SELFHTML-Forum 2021-04-01T19:45:55Z https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786652#m1786652 Jörg 2021-03-31T08:41:49Z 2021-03-31T08:43:36Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo,</p> <p>ich stelle auf <a href="https://jsfiddle.net/L0yxubkf/" rel="noopener noreferrer">einer Anwendung</a> ein PDF dar und lege einen klickbaren Layer darüber, der eine zusätzliche Funktion ermöglicht.</p> <p>Leider ist es so, dass bei der Darstellung auf Tablet oder Smartphone der Scrollbereich von 200px für das PDF nur noch zu erahnen ist. Das ist nur für geübte User handlebar. Der "normale" Scrollbalken an der Seite scrollt das Gesamtdokument (inkl. dem Iframe)</p> <p>Hat hier einer eine gute Idee, wie ich hier eine etwas intuitivere Lösung finden kann? Ein Scrollbalken "nur für das PDF" wäre natürlich eine Ideallösung, aber woher nehmen...?</p> <p>Jörg</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786663#m1786663 klawischnigg 2021-03-31T12:18:27Z 2021-03-31T12:18:27Z Virtueller Scrollbalken oder Ähnliches? <p>Hi there,</p> <blockquote> <p>Hat hier einer eine gute Idee, wie ich hier eine etwas intuitivere Lösung finden kann? Ein Scrollbalken "nur für das PDF" wäre natürlich eine Ideallösung, aber woher nehmen...?</p> </blockquote> <p>Ganz einfach, Du stellst das PDF in einem Block-Element dar (div bspw.), dem Du die Eigenschaft overflow:scroll gibst... (kannst Du noch auf overflow-x und overflow-y spezifizieren, je nachdem, ob Du vertikale, horzizontale oder beide Scrollbars haben willst...)</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786664#m1786664 Henry 2021-03-31T12:32:49Z 2021-03-31T12:32:49Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo Jörg,</p> <p>da ich nicht sicher bin, wie genau du das meinst, hier mal ein Beispiel mit <a href="https://www.w3schools.com/code/tryit.asp?filename=GP4D3EXRFC70" rel="nofollow noopener noreferrer">object und embed</a>.</p> <pre><code class="block"><object data="https://www.jena.de/fm/41/test.pdf" style="width:100%;height:30vh;"></object> <embed style="width:100%;height:50vh;" src="https://www.jena.de/fm/41/test.pdf"></embed> </code></pre> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786665#m1786665 Rolf B 2021-03-31T13:13:26Z 2021-03-31T13:13:26Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo Jörg,</p> <p>ich hatte mich heute vormittag mal mit dem Problem beschäftigt, und ich glaube, da gibt's keine gute Lösung.</p> <p>Was Du nicht gesagt hast und was hier keiner gemerkt zu haben scheint: dein Problem ist ja nicht das vertikale Scrollen. Das gelingt auch am Smartphone durch touch auf den darübergelegten <a> Layer.</p> <p>Das Problem ist das horizontale Scrollen auf dem Handy-Bildschirm, wenn das PDF zu breit ist und man es nicht vollständig lesen kann. Das geht nur, wenn man in den obersten 200px berührt und hin- und herschiebt. Diese Info musste ich erstmal selbst herausfinden.</p> <p>Ich wollte dann erstmal das tun, was man heute für jede Webseite tun sollte: den Viewport setzen (<code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>). Ohne diese Angabe simulieren die Browser einen 960px breiten Screen und dadurch werden die 200px, die oben frei sind, auf 100px oder weniger herunterskaliert.</p> <p>Ich hatte das PDF auch schon auf <object> umgestellt, um den iframe zu vermeiden. Und es mit CSS gestyled, auf height:100%. Den Body hatte ich auf min-height:2000px gesetzt.</p> <p>Folge: Das Objekt war nur noch 150px hoch. In Chrome und Firefox. Ich musste es mit Gewalt, sprich: height:2000px, auf die richtige Höhe zwingen.</p> <p>Aber in der simulierten Mobilansicht sieht das alles scheußlich aus, bzw. der View tut nicht was er soll. Das Phone verkleinert die Ansicht, um ja das ganze PDF zu zeigen. Unter dem PDF ist leerer Raum, den ich nicht bestellt habe - keine Ahnung was passiert. Ob das ein Bug im Mobilsimulator ist (ist in Chrome und FF passiert). Das object wieder durch iframe zu ersetzen hat auch nichts geändert. Vielleicht ist auch einfach einer der <a href="https://de.wikipedia.org/wiki/Lehmziegel#Adobe" rel="nofollow noopener noreferrer">Lehmziegel</a> im PDF Viewer verrottet.</p> <p>Ich habe aber auch keine Lust, alles hochzuladen und auf meinem Android Phone zu testen. Ich weiß auch nicht, was es bringt - man muss das Verhalten offenbar auf mehreren Phones testen.</p> <p>Deshalb habe ich keine Idee für Dich, die unterbreitungsreif wäre.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786681#m1786681 Jörg 2021-03-31T18:34:11Z 2021-03-31T18:34:11Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo klawischnigg,</p> <blockquote> <p>Ganz einfach, Du stellst das PDF in einem Block-Element dar (div bspw.), dem Du die Eigenschaft overflow:scroll gibst... (kannst Du noch auf overflow-x und overflow-y spezifizieren, je nachdem, ob Du vertikale, horzizontale oder beide Scrollbars haben willst...)</p> </blockquote> <p>Oops, danke, da hätte ich auch selber drauf kommen können. Funktioniert natürlich im Browser meines Laptops, muss morgen mal schauen, wie userfreundlich das im Tablet ist.</p> <p>Jörg</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786666#m1786666 Robert B. 2021-03-31T13:16:09Z 2021-03-31T13:16:09Z Virtueller Scrollbalken oder Ähnliches? <p>Moin,</p> <p>interessant, dass das vormals proprietäre <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/embed" rel="nofollow noopener noreferrer"><code>embed</code></a>, welches hauptsächlich im Flash-Kontext auftauchte, jetzt standardisiert ist, während Flash außer Betrieb genommen worden ist und keine Rolle mehr spielt. „Nichts hält länger als ein Provisorium.“</p> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786667#m1786667 Robert B. 2021-03-31T13:19:58Z 2021-03-31T13:19:58Z Virtueller Scrollbalken oder Ähnliches? <p>Moin Rolf,</p> <blockquote> <p>Vielleicht ist auch einfach einer der <a href="https://de.wikipedia.org/wiki/Lehmziegel#Adobe" rel="nofollow noopener noreferrer">Lehmziegel</a> im PDF Viewer verrottet.</p> </blockquote> <p><a href="https://en.wikipedia.org/wiki/Adobe_Inc.#History" rel="nofollow noopener noreferrer">Adobe ist tatsächlich Namensgeber von Adobe</a>, wieder etwas gelernt! Vielen Dank für den Link!</p> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786671#m1786671 Jörg 2021-03-31T14:22:33Z 2021-03-31T14:22:33Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo Rolf, hallo auch alle anderen...</p> <p>ich muss meine restlichen Antworten auf heute Abend verschieben, weil ich unterwegs bin und nicht testen kann.</p> <p>Aber eines dann doch von unterwegs und vorab: es geht mir tatsächlich nur um das vertikale scrollen. Und mein Problem ist, dass beim Scrollen über den a-layer der hauptbildschirm inklusive iframe scrollt. um innerhalb des frames das PDF zu scrollen, muss man genau in dem 200 Pixel hohen Bereich scrollen, damit es funktioniert... Das ist für die User natürlich nicht sehr intuitiv. Das ist im Prinzip der Hintergrund meiner Frage hier.</p> <p>Gruß, Jörg</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786668#m1786668 Der Martin 2021-03-31T13:28:11Z 2021-03-31T13:28:11Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo,</p> <blockquote> <p>interessant, dass das vormals proprietäre <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/embed" rel="nofollow noopener noreferrer"><code>embed</code></a></p> </blockquote> <p>interessant, ich wusste gar nicht, dass das mal proprietär war.</p> <blockquote> <p>welches hauptsächlich im Flash-Kontext auftauchte, jetzt standardisiert ist, während Flash außer Betrieb genommen worden ist und keine Rolle mehr spielt.</p> </blockquote> <p>Mir ist es hauptsächlich zum Einbinden von Hintergrundgedudel begegnet (meine ich).</p> <blockquote> <p>„Nichts hält länger als ein Provisorium.“</p> </blockquote> <p>Uralte Weisheit! </p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren. </div> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786672#m1786672 Robert B. 2021-03-31T14:27:54Z 2021-03-31T14:27:54Z Virtueller Scrollbalken oder Ähnliches? <p>Moin Martin,</p> <blockquote> <blockquote> <p>interessant, dass das vormals proprietäre <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/embed" rel="nofollow noopener noreferrer"><code>embed</code></a></p> </blockquote> <p>interessant, ich wusste gar nicht, dass das mal proprietär war.</p> </blockquote> <p>In <a href="https://www.w3.org/TR/html4/index/elements.html" rel="nofollow noopener noreferrer">HTML 4</a> gab es kein offizielles <code>embed</code> – das einzige Element, dessen Name mit einem <code>e</code> beginnt, war <code>em</code>. Für das <a href="https://www.w3.org/TR/html4/struct/objects.html" rel="nofollow noopener noreferrer">Einbinden externer Inhalte</a> gab es <code>img</code>, <code>object</code> und <code>applet</code>.</p> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786673#m1786673 Rolf B 2021-03-31T14:30:06Z 2021-03-31T14:30:56Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo Jörg,</p> <blockquote> <p>um innerhalb des frames das PDF zu scrollen, muss man genau in dem 200 Pixel hohen Bereich scrollen, damit es funktioniert..</p> </blockquote> <p>Ich bin davon ausgegangen, dass Du das nicht willst und deshalb das PDF 22xxpx hoch gemacht hast.</p> <p>Ein scrollendes PDF bedeutet, dass es sich relativ zum a-Layer verschiebt. Ist das okay für Dich?</p> <p>In dem Fall wäre die Frage: Warum muss der Layer überhaupt über dem PDF sein? Warum muss er es komplett überdecken? Wäre es nicht sinnvoller, separate Funktionen separat zu platzieren? Oder zumindest soweit in die Ecke zu schieben, dass sie das PDF nicht überlagern?</p> <p>Der Versuch, auf diese Weise eine Interaktion mit dem PDF zu verhindern, ist ohnehin sinnlos (außer vielleicht auf Mobilgeräten). Entwicklertools, klick auf das a Element, löschen, fertig.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786679#m1786679 Jörg 2021-03-31T18:32:12Z 2021-03-31T18:32:12Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo Rolf,</p> <blockquote> <p>Ein scrollendes PDF bedeutet, dass es sich relativ zum a-Layer verschiebt. Ist das okay für Dich?</p> </blockquote> <p>Was genau meinst Du mit "relativ zum a-layer"?</p> <blockquote> <p>In dem Fall wäre die Frage: Warum muss der Layer überhaupt über dem PDF sein? Warum muss er es komplett überdecken? Wäre es nicht sinnvoller, separate Funktionen separat zu platzieren? Oder zumindest soweit in die Ecke zu schieben, dass sie das PDF nicht überlagern?</p> </blockquote> <p>Nein, der Layer muss das PDF nicht komplett überdecken, es sollte nur die Usability vereinfachen, damit der User nicht suchen muss, wo er klicken muss. Noch schöner wäre natürlich, wenn ich den a-Layer an einem bestimmten Punkt im PDF ausrichten könnte, egal wie groß das PDF ist. An dieser Stelle im Script kenne ich die Gesamtnzahl der Seiten und die XY-Koordinaten der Stelle, wo ich den Klick/Touch gerne hätte. Dann könnte von mir aus der gesamte restliche Bereich srollbar und unüberdeckt bleiben.</p> <blockquote> <p>Der Versuch, auf diese Weise eine Interaktion mit dem PDF zu verhindern, ist ohnehin sinnlos (außer vielleicht auf Mobilgeräten). Entwicklertools, klick auf das a Element, löschen, fertig.</p> </blockquote> <p>Nenee, das wollte ich aber ohnehin nicht.</p> <p>Jörg</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786686#m1786686 Jörg 2021-04-01T08:06:20Z 2021-04-01T08:06:20Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo,</p> <blockquote> <p>Noch schöner wäre natürlich, wenn ich den a-Layer an einem bestimmten Punkt im PDF ausrichten könnte, egal wie groß das PDF ist. An dieser Stelle im Script kenne ich die Gesamtnzahl der Seiten und die XY-Koordinaten der Stelle, wo ich den Klick/Touch gerne hätte. Dann könnte von mir aus der gesamte restliche Bereich srollbar und unüberdeckt bleiben.</p> </blockquote> <p>Ich versuche gerade, den a-Layer möglichst weit nach unten zu setzen. Er muss aber definitiv auf der letzten Seite des PDFs in Höhe meiner y-Koordinate vorhanden sein. Aber egal, welche Einheit (%,px,em) ich nehme, es gelingt mir nicht, dass alle Devices den Layer an dieselbe Stelle plazieren.</p> <p>Bekannt sind die Anzahl der Seiten des PDF, die Y-Koordinate, die Breite des Viewports.</p> <p>Wie stricke ich hieraus meine css-Anweisung für das <code>position:absolute; top: ...</code> meines a-Layers so, dass er auf PC, Tablet, usw. auch an derselben Stelle das PDF überdeckt?</p> <p>Jörg</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786684#m1786684 Jörg 2021-04-01T07:36:07Z 2021-04-01T07:36:07Z Virtueller Scrollbalken oder Ähnliches? <blockquote> <p>Funktioniert natürlich im Browser meines Laptops, muss morgen mal schauen, wie userfreundlich das im Tablet ist.</p> </blockquote> <p>Im Tablet ist natürlich kein Scrollbalken zu sehen </p> <p>Jörg</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786692#m1786692 Rolf B 2021-04-01T09:07:44Z 2021-04-01T09:07:44Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo Jörg,</p> <p>ich würde behaupten: vergiss es. Je Device kannst Du unterschiedliche Viewer haben, sie haben unterschiedliche Bildschirmgrößen und der Viewer skaliert das Dokument unterschiedlich.</p> <p>Das ist ein Lottospiel.</p> <p>Du könntest noch versuchen, Viewer und A in einen gemeinsamen Container zu setzen und das A mit bottom statt top zu positionieren. Aber ich gebe dem wenig Chancen.</p> <p>Sicherheit gewinnst Du vermutlich nur, wenn Du die Seiten des PDFs in PNG (oder ein anderes geeignetes Grafikformat) konvertierst und den PDF Viewer aus der Ungleichung herausnimmst ('ne Gleichun wird es damit nicht).</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786694#m1786694 Jörg 2021-04-01T09:27:47Z 2021-04-01T09:27:47Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo Rolf,</p> <p>Ja sowas in der Art habe ich schon befürchtet.</p> <p>Mit bottom Positionierung habe ich auch schon rumgespielt. Das war vollends zum vergessen.</p> <p>Bleiben als Rest Möglichkeiten, der Versuch, den alle in Abhängigkeit des Viewer layers absolut zu positionieren. und als allerletzte Möglichkeit, die mir aber auch am wenigsten gefällt, den alle einfach nicht über die komplette Breite laufen zu lassen, so dass der User den rechten Rand zum Scrollen behält. Diese Möglichkeit würde mir aber, wie schon erwähnt, am wenigsten gefallen</p> <p>Gruß, Jörg</p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786695#m1786695 Rolf B 2021-04-01T09:37:57Z 2021-04-01T09:37:57Z Virtueller Scrollbalken oder Ähnliches? <p>Hallo Jörg,</p> <p>enthält dein Layer Links? Wie vernagelt sind deine PDFs? Man kann Links auch in ein PDF einsetzen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786717#m1786717 Jörg 2021-04-01T18:40:39Z 2021-04-01T19:06:47Z Virtueller Scrollbalken oder Ähnliches? <blockquote> <p>enthält dein Layer Links? Wie vernagelt sind deine PDFs? Man kann Links auch in ein PDF einsetzen.</p> <p><em>Rolf</em></p> </blockquote> <p>Hallo Rolf,</p> <p>mein Layer selbst ist der Link.</p> <p>Den Link selber ins PDF positionieren wäre natürlich optimal und auch recht leicht durchzuführen, aber wenn er einmal drin ist, bekomme ich ihn nicht mehr raus. Und das ist dann weit weniger gut, weil das Dokument dann inkl. Link an Kunden meiner User weiter gehen würde. Das ist nicht so klasse.</p> <p>Ansonsten aber eine gute, nein bisher sogar die beste Idee.</p> <p>Ich könnte natürlich gleich 2 PDFs generieren, wovon eines mit Link und eines ohne Link ist. Oder beim weiter verarbeiten des PDFs ein neues generieren, was ohne Link ist, aber das ist auch alles irgendwie "von hinten durchs Knie in die Brust" geschossen </p> <p>Schade, dass TCPDF,FPDF,FPDI PDFs zwar einlesen kann, aber nicht wirklich editieren. Sonst könnte ich den Link nach Nutzung einfach wieder entfernen.</p> <p>Jörg</p> <p>Edit: Ich glaube, soviel Serverlast erzeugt das gar nicht, das PDF gleich 2 x zu generieren (fpdf). Ich weiß nicht, ob die Methode <code>$pdf->Output()</code> der fpdf-Klasse den kompletten Prozess des PDF-Generierens dann auch 2 x durchführt oder das bis hierher generierte PDF einfach nur 2 x outputtet (ob direkt oder mit Option 'f' speichert ist ja nebensächlich).</p> <p>Ich finde die Idee mit dem Link im PDF anstelle des a-Layers einfach zu gut, um sie nicht umzusetzen. </p> https://forum.selfhtml.org/self/2021/mar/31/virtueller-scrollbalken-oder-ahnliches/1786718#m1786718 Jörg 2021-04-01T19:45:55Z 2021-04-01T19:47:26Z Virtueller Scrollbalken oder Ähnliches? <blockquote> <p>Ich finde die Idee mit dem Link im PDF anstelle des a-Layers einfach zu gut, um sie nicht umzusetzen. </p> </blockquote> <p>Schade. Geht doch nicht. Ich kann zwar den Link im PDF plazieren, aber kann meine Lightbox nicht ansprechen. Dazu bedarf es eines weiteren Attributs, fpdf kann nur <code>href</code>. Ich würde aber auch <code>Title</code> und <code>rel</code> benötigen. Die bekomme ich aber in der link-metghode nicht unter </p> <p>Ansonsten wars natürlich möglich, den Link selber punktgenau zu plazieren. Wie gesagt, schade, weil sehr gute Idee.</p> <p>Jörg</p>