Virtueller Scrollbalken oder Ähnliches?

[Jörg]

Hallo,

ich stelle auf einer Anwendung ein PDF dar und lege einen klickbaren Layer darüber, der eine zusätzliche Funktion ermöglicht.

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)

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...?

Jörg

[klawischnigg]

Hi there,

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...?

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...)

[Jörg]

Hallo klawischnigg,

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...)

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.

Jörg

[Jörg]

Funktioniert natürlich im Browser meines Laptops, muss morgen mal schauen, wie userfreundlich das im Tablet ist.

Im Tablet ist natürlich kein Scrollbalken zu sehen 😕

Jörg

[Henry]

Hallo Jörg,

da ich nicht sicher bin, wie genau du das meinst, hier mal ein Beispiel mit object und embed.

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

Gruss
Henry

[Robert B.]

Moin,

interessant, dass das vormals proprietäre embed, 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.“

Viele Grüße
Robert

[Der Martin]

Hallo,

interessant, dass das vormals proprietäre embed

interessant, ich wusste gar nicht, dass das mal proprietär war.

welches hauptsächlich im Flash-Kontext auftauchte, jetzt standardisiert ist, während Flash außer Betrieb genommen worden ist und keine Rolle mehr spielt.

Mir ist es hauptsächlich zum Einbinden von Hintergrundgedudel begegnet (meine ich).

„Nichts hält länger als ein Provisorium.“

Uralte Weisheit! 😀

Live long and pros healthy,
 Martin

[Robert B.]

Moin Martin,

interessant, dass das vormals proprietäre embed

interessant, ich wusste gar nicht, dass das mal proprietär war.

In HTML 4 gab es kein offizielles embed – das einzige Element, dessen Name mit einem e beginnt, war em. Für das Einbinden externer Inhalte gab es img, object und applet.

Viele Grüße
Robert

[Rolf B]

Hallo Jörg,

ich hatte mich heute vormittag mal mit dem Problem beschäftigt, und ich glaube, da gibt's keine gute Lösung.

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.

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.

Ich wollte dann erstmal das tun, was man heute für jede Webseite tun sollte: den Viewport setzen (<meta name="viewport" content="width=device-width, initial-scale=1.0">). Ohne diese Angabe simulieren die Browser einen 960px breiten Screen und dadurch werden die 200px, die oben frei sind, auf 100px oder weniger herunterskaliert.

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.

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.

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 Lehmziegel im PDF Viewer verrottet.

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.

Deshalb habe ich keine Idee für Dich, die unterbreitungsreif wäre.

Rolf

[Robert B.]

Moin Rolf,

Vielleicht ist auch einfach einer der Lehmziegel im PDF Viewer verrottet.

Adobe ist tatsächlich Namensgeber von Adobe, wieder etwas gelernt! Vielen Dank für den Link!

Viele Grüße
Robert

[Jörg]

Hallo Rolf, hallo auch alle anderen...

ich muss meine restlichen Antworten auf heute Abend verschieben, weil ich unterwegs bin und nicht testen kann.

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.

Gruß, Jörg

[Rolf B]

Hallo Jörg,

um innerhalb des frames das PDF zu scrollen, muss man genau in dem 200 Pixel hohen Bereich scrollen, damit es funktioniert..

Ich bin davon ausgegangen, dass Du das nicht willst und deshalb das PDF 22xxpx hoch gemacht hast.

Ein scrollendes PDF bedeutet, dass es sich relativ zum a-Layer verschiebt. Ist das okay für Dich?

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?

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.

Rolf

[Jörg]

Hallo Rolf,

Ein scrollendes PDF bedeutet, dass es sich relativ zum a-Layer verschiebt. Ist das okay für Dich?

Was genau meinst Du mit "relativ zum a-layer"?

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?

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.

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.

Nenee, das wollte ich aber ohnehin nicht.

Jörg

[Jörg]

Hallo,

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.

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.

Bekannt sind die Anzahl der Seiten des PDF, die Y-Koordinate, die Breite des Viewports.

Wie stricke ich hieraus meine css-Anweisung für das position:absolute; top: ... meines a-Layers so, dass er auf PC, Tablet, usw. auch an derselben Stelle das PDF überdeckt?

Jörg

[Rolf B]

Hallo Jörg,

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.

Das ist ein Lottospiel.

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.

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).

Rolf

[Jörg]

Hallo Rolf,

Ja sowas in der Art habe ich schon befürchtet.

Mit bottom Positionierung habe ich auch schon rumgespielt. Das war vollends zum vergessen.

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

Gruß, Jörg

[Rolf B]

Hallo Jörg,

enthält dein Layer Links? Wie vernagelt sind deine PDFs? Man kann Links auch in ein PDF einsetzen.

Rolf

[Jörg]

enthält dein Layer Links? Wie vernagelt sind deine PDFs? Man kann Links auch in ein PDF einsetzen.

Rolf

Hallo Rolf,

mein Layer selbst ist der Link.

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.

Ansonsten aber eine gute, nein bisher sogar die beste Idee.

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 😏

Schade, dass TCPDF,FPDF,FPDI PDFs zwar einlesen kann, aber nicht wirklich editieren. Sonst könnte ich den Link nach Nutzung einfach wieder entfernen.

Jörg

Edit: Ich glaube, soviel Serverlast erzeugt das gar nicht, das PDF gleich 2 x zu generieren (fpdf). Ich weiß nicht, ob die Methode $pdf->Output() 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).

Ich finde die Idee mit dem Link im PDF anstelle des a-Layers einfach zu gut, um sie nicht umzusetzen. 😉

[Jörg]

Ich finde die Idee mit dem Link im PDF anstelle des a-Layers einfach zu gut, um sie nicht umzusetzen. 😉

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 href. Ich würde aber auch Title und rel benötigen. Die bekomme ich aber in der link-metghode nicht unter 😟

Ansonsten wars natürlich möglich, den Link selber punktgenau zu plazieren. Wie gesagt, schade, weil sehr gute Idee.

Jörg