Beiträge von Tamaleus

Hallo Sempervivum

Schön, von Dir zu hören!

Ich will auf einer HP-Seite Einträge (in einer Liste) erstellen, in welchen jeweils links das Original-Dokument, dann eine kurze Inhaltsbeschreibung zu lesen ist und quasi in der dritten Spalte das Original zusammen mit der Transkription der Schrift, auch dies als PDF-Datei aufrufbar. In dieser (Quell-) Datei sollen alle Einträge dieses Archives zu finden sein. Am Anfang jedes DIV-Eintrages steht eine ID (z. B. "archiv-id001", "archiv-id00" etc.)

In einigen weiteren HP-Seiten dann sollen einzelne dieser Einträge aufrufbar sein, bzw. angezeigt werden. Ich wollte das allerdings nicht als Kopie (der Funktion) erstellen, um Redundanzen zu vermeiden. In den "weiteren" HP-Seiten sollten - das war mein Ansatz - nur selektive Ausschnitte von der Archiv- (Quell-) Seite zu sehen sein. Dazu habe ich eine Funktion "ladeAusschnitt" (JS) gefunden, was so auch klappt. Was ich nicht hinbekommen habe, war, das Ganze mit Parametern (in der Ziel-Seite) so zu steuern, dass in den jeweiligen Seiten, wo nur der eine oder andere Eintrag zu sehen sein sollte, das - gerne mit nur einer Zeile - mit JS-Funktion und Parametern wie "URL" (der Quell-Seite) und "(DIV) ID" in der Ziel-Datei eingefügt werden kann.

Es war auch nicht meine Hoffnung, eine fertige Lösung gestellt zu bekommen, sondern nur Hilfe beim Teil der adaptierten "ladeAusschnitt"-JS-Funktion erweitert um die benötigten Parameter, so dass in der Ziel-Datei nur die Funktion, zusammen mit den benötigten Parametern aufgerufen werden kann und als Ergebnis der gewünschte Ausschnitt aus der Haupt-Archiv-Datei dann in der jeweiligen Ziel-Datei zu sehen sein würde.

Mir ist schon klar, dass das stümperhaft ist, was ich hier zusammengebastelt hatte. Da für mich die Lösung aber nur Mittel zum Zweck ist, möchte ich mich ungern länger als nötig damit befassen. Wenn es nur schon so funktionieren würde, wie angedacht, wäre ich glücklich und zufrieden, da ich sonst keine Hilfe habe.

@ Ulrich: Würde mich sehr über eine Nachricht von Dir freuen.

Guten Tag

Ich wende mich an die Fachleute, da das nicht mein Fachgebiet ist. Ich suche nach einer Lösung, um in verschiedenen HTML-Dateien individuell eine Javascript-Funktion (mit 3 Parametern) aufrufen zu können, womit ein ganz bestimmter Ausschnitt (fetch; definiert durch eine "div-id") zurückgegeben werden soll. Grundgedanke ist, in einer HTML-Datei verschiedene, durch div-id ausgezeichnete Abschnitte in anderen html-Dateien einfügen zu müssen, um so redundante Daten zu vermeiden. Ich glaube, mich bisher redlich bemüht zu haben, schaffe es aber nicht, bis zum gewünschten Ziel zu kommen. Ich stelle auch gerne zur Verfügung, was ich soweit habe. Womit mir nicht wirklich gedient ist, sind Grundsatz-Belehrungen. Ich bin IV-Rentner und arbeite mit Leidenschaft an einer Familien-Homepage. Ich bin mir bewusst, dass es fachlich sinnvoll wäre, mir zuerst das nötige Basis-Wissen anzueignen. Aber gerade das möchte ich (aus verschiedenen Gründen) nicht. Drum hoffe ich auf Nachsicht und punktkuelle Hilfe. Dafür im Voraus recht herzlichen Dank.

@ sempervivum: prä-senile Bettfluch!

Dachte eigentlich, würde das so auch anwenden. Allerdings schenke ich mir von Fall zu Fall eine neue Thread-Nr, wenn es nur um ein paar wenige Zeichen geht, zumal dann ggf. auch diverese andere Files neu durchzunummerieren wären (css, script, img-files in anderen sub-dirs, etc.). Aber danke für den Hint anyway.

Und gleich noch Bestätiung zu #30:

Wechsel von einem (vergrösserten) Bild zu einem anderen klappt jetzt auch prima, ebenso wie das entsprechende "ein- und wieder auszoomen". Damit auch dieser Punkt für mich erledigt, abgesehen von der Frage in #24 (Code-Box): Wie ist das mit den Eintragungen (Hacks?) für andere Browser à la -moz-*, -webkit-*, -ms-* und -o-* ?

Hatte dieses Problem auch schon und musste dann feststellen, dass die Codierung in der Datei trotz gegenteiliger Angaben nicht gestimmt hatte. Konnte das Problem dann so lösen, in dem ich gesamten Datei-Inhalt kopiert, in eine neue Datei eingefügt und neu als z. B. Text unter UTF-8 gespeichert habe.

Und gleich noch Bestätiung zu #30:

Wechsel von einem (vergrösserten) Bild zu einem anderen klappt jetzt auch prima, ebenso wie das entsprechende "ein- und wieder auszoomen". Damit auch dieser Punkt für mich erledigt, abgesehen von der Frage in #24 (Code-Box): Wie ist das mit den Eintragungen (Hacks?) für andere Browser à la -moz-*, -webkit-*, -ms-* und -o-* ?

Betreffend "Reload": Da es mir immer wieder passiert ist, dass ich mir (nach Upload einer neuen Version) dennoch die Vorgänger-Version angeschaut hatte, habe ich dann in den (Menü -> Weitere Tools -->) Entwicklertools auf Registerkarte "Netzwerk" die Option "Cache deaktivieren" ge-flagt. Merkwürdigerweise bin ich aber trotzdem davon überzeugt, hin und wieder - hier im Beispiel Chrome - eine "Vorgänger-Version" angezeigt zu bekommen. Mein Provider meinte dann auf Anfrage, dass ein "Vorhalten" einer älteren Version einer Datei bei ihnen nicht möglich sei. Macht jemand ähnliche Erfahrungen und falls, wie kann ich diesen "nicht vorhandenen Cache" definitiv ausschalten?

Nachtrag zu #25

Zitat

Wie hast Du das denn versucht? Bei mir funktioniert es mit diesem CSS einwandfrei:

Habe - zur Sicherheit - nochmals mit meinem eigenen ZIP aus # 24 begonnen. Browser gestartet, Cache (CTRL-SHIFT-DEL ?) gelöscht und dann beide Seiten (sv-15-vorlage.htm und sv-15-split.htm) in je CHROME, FIREFOX und EDGE aufgerufen. Ich hatte so noch bei keinem der drei einen veränderten Mausanzeiger bekomme. Habe dann Deine CSS-Zeilen (für den Cursor) aus #25 am Ende Deiner <style>-Anweisungen, bzw. extern in meine CSS-Datei eingefügt. Und natürlich hattest Du recht, jetzt klappt es. Muss mich da wohl verheddert haben. Dieser Punkt also erledigt.

Sorry für die zeitliche Verzögerung. Habe - to be on the safe side - nochmals mit meinem eigenen ZIP (sv-15.zip) aus #24 angefangen und dann für je in unter den Browsern CHROME, FIREFOX und EDGE je einmal "sv-15-vorlage.html" und einmal (meine gesplittete Version) sv-15-split.html gestartet. Dann Deine cursor-CSS-Zeilen in beiden Varianten eingefügt. Attestiere: Klappt tadellos. Weiss nicht, wo ich mich da verfranst habe.

Habe dann je neue Versionen unter ("sv-26/sv-26-vorlage.html" und "sv-26/tam-26-split.html" mit "tam-26-split.css" und "tam-26-split.js") angelegt und darin (in beiden HTML-Dateien) Dein neues JS aus #26 eingefügt.

Stelle nun folgendes Verhalten fest. Der eigentliche Wunsch, nach Klick auf kleines Bild oben (Dorf) und vergrösserter Anzeige, mit Maus (von Dorf) auf "Tomate" fahrend, dass dann die Tomate sanft aufgezoomt wird. Das tut es noch nicht. Hingegen wird, nach erstem Klick auf "Dorf" und nach dessen Vergrösserung bei Klick an gleicher Stelle, also nach wie vor auf "Dorf", das Bild zuerst ein- und dann gleich wieder aufgezoomt. Was für mich auch in Ordnung wäre, das Bild mit Klick auf Thumb (eim ersten Klick vergrössern), dann bei zweitem Klick (nach wie vor auf Thumb) die Vergrösserung beenden. Aber sie danach gleich wieder vergrössern ist dann m. E. doch etwas too much

Übrigens: Habe mich erdreisted das in Datei "vorlage" fehlende "<head>"-Label einzufügen. Ebenso einen <title> mit der jeweilgen Eintrags-Nummer.

Anbei neues ZIP mit sämtlichen Files + Screenshot.

Zwischendurch schon mal vielen herzlichen Dank. Für heute mache ich Feierabend, schaue mir aber die neuesten Inputs gerne so rasch wie möglich wieder an. Sorry, dass ich nicht so schnell bin, wie ihr das seid.

Hallo nochmal

Habe zwischenzeitlich mit Eurer beider verschiedenen Versionen - auf meine eigenen Seiten - noch etwas rumgetüftelt und bin zum aktuellen Stand der Dinge gekommen.

- Das Vergrössern einer kleinen Bilddatei ohne Klick, also nur "on hover", macht das Ganze sehr nervös. Dieser Ansatz von mir war nicht gut. Besser, dass geklickt werden muss. nextuser: Du hast es vor mir gewusst!

- In der angefügten Version (Ausgang Tag # 15, Sempervivum) habe ich bloss css-Datei und js-Datei (inkl. Bilder) in separate Unterverz/Dateien ausgelagert, um dann auch in viele andere Seiten einbauen zu können.

- Wunsch wäre nun noch - ich hab's leider nicht hinbekommen - dass Maus-Zeiger bei hovern über kleinem Bild zu "Plus-Zeiger" bzw. über grossem Bild zu "Minus-Zeiger" wird. Ansatz etwa wie nachstehend? (Mir ist klar, dass das nur für Bildschirm gilt).

   cursor: -moz-zoom-in;         bzw.        cursor: -moz-zoom-out;
   cursor: -webkit-zoom-in;      bzw.        cursor: -webkit-zoom-out;  
   cursor: zoom-in;              bzw.        cursor: zoom-out;

- Beim Vergrössern/Verkleinern des Bildes ist eine gewisse Verzögerung realisiert. Das ist prima. Bloss, wenn ich den Wert (in cc-File)

transition: all 1s linear; (?) ändere, kann ich auf der Seite keine Veränderung feststellen. Was habe ich (beim Verändern des Wertes "1s") falsch gemacht?

- Bei Anzeige von vergrössertem Bild und Klick darauf, wird "langsam" ausgeblendet. Wenn ich aber bei vergrössertem Bild auf anderes, kleines Bild klicke, fehlt diese Verzögerung. Lässt sich das "zwischen" den Bildern auch realisieren?

- Zuguter letzt noch die Frage nach "Responsive Design": Könnt Ihr mir helfen, das zu realisieren?

Interessanterweise funktioniert auch das Antippen für Vergrösserung/Verkleinerung auf meinem Mobil (Galaxy S8/Android). Bloss der Wechsel (von vergrössertem zu anderem, kleinen Bild) bleibt ohne Effekt.

Bin mir bewusst, dass das schon fast eine Frechheit ist, derart viel zu erbitten. Daher schon im Voraus herzlichen Dank für jegliche Ergänzungen!

nextuser

Klasse! Auch Dir recht herzlichen Dank für Deinen Input. Sorry, falle hin und wieder aus gesundheitlichen Gründen eine Zeit lang aus. Habe nun aber Deine Vorschläge hier eingebaut und bin wirklich positiv überrascht. Nun bloss noch letzte Frage: Wäre das auch ohne Klick (auf das kleine Bild) machbar, so dass das vergrösserte Bild "nur" schon bei "hover mouse" angezeigt wird? Aktuell ist ja noch zu klicken. Das müsste ich dann dem User bei jedem Bild noch mitteilen. Wenn sich das noch vermeiden liesse, wäre ich am Ziel meiner Wünsche, bzw. Vorstellungen. Sorry für meine Hartnäckigkeit

PS: Habe am Thread überhaupt nichts geändert, geschweige irgend etwas geschlossen, gar Dich gesperrt. Muss dann vom Betreiber der Site sein.

Ich ziehe meinen Hut, oh Erleuchteter. Danke Dir recht herzlich für Deine ganze Arbeit! Verstehe also, dass "auf-zoomen" an anderer Stelle - mit meinem Ansatz - nicht möglich ist.

Vielen Dank! Verstehe, was Du meinst. Nicht anfreunden kann ich mich damit, dass das geklickte (kleine) Bild verschwindet, was die gesamte Seite (die z. T. recht gross ist) im Erscheinungsbild ändert. Dann ist auch für mich gewöhnungsbedürftig, dass ich *nicht* auf das grosse Bild klicken muss, um es wieder zu verkleinern, sondern gerade ausserhalb dessen.

Ich bin mir bewusst, dass es meist nicht gut daher kommt, erst um Rat zu bitten und es dann doch selber besser zu wissen. So ist es auch nicht gemeint. Ich denke bloss, mir würde nur ein ganz kleines Stück fehlen, weshalb ich mich erdreiste, hier anbei den letzten Stand der Dinge anzufügen. Mouse - hover - enlarged image. Und bei Klick auf (grosses) Bild, zurück in Ausgangssituation. Es fehlt halt bloss, dass das vergrösserte Bild - und ich denke jetzt dürfte allen Lesern klar sein, warum es so sein soll - mittig des Bildschirms gezoomt werden soll.

Wäre sehr dankbar, gezeigt zu bekommen, wie das Zoomen von der Mitte des Gerätes aus gehen würde. Dessen, dass heute die Mehrheit mit Handhelds unterwegs ist, bin ich mir bewusst.

Moin Sempervivum

Danke für Deine Anregung betr. JS. Werde ich dann so befolgen, weiss bloss leider gar nicht, wie das zu bewerkstelligen ist. Ausserdem endet Deine letzte Mitteilung abrupt, so dass ich denke, es könnte nach "außerhalb des Bildes geklickt wird, z. B." noch etwas fehlen. Oder war das so beabsichtigt?

Hallo Sempervivum

Vielen Dank für Deine Hilfe. Ich habe den von Dir angegebenen Teil in meinem "<style>"-Bereich im <head> wie ganz oben gezeigt, eingefügt. Schon im Preview (arbeite mit Visual Studio Code), aber auch in der in den Browser (Chrome und Edge, bei Firefox wird bei Maus-over gar kein weiteres Bild angezeigt, bzw. ist nicht sichtbar) geladenen Datei erhalte ich ein unheimliches "Ge-Flacker" zwischen dem Ausgansbild oben in der Mitte und dem "ge-hoverten" Bild, welches sich bei mir aber noch nicht in der Mitte des Bildschirmes zeigt, sondern mit der linken oberen Ecke in der Mitte des Bildschirmes (nach rechts unten) hängt. Auch wenn ich das Label <center></center> vor und nach dem <div> deaktiviere, ändert das am Problem selbst nichts. Das Ausgangsbild wird dann bloss anstatt in der Mitte oben links angezeigt. Doch das Geflacker erscheint nach wie vor. Und das Bild ist auch nicht mittig des Bildschirms, sondern hängt quasi mit seiner linken oberen Ecke in der Mitte des Bildschirms (nach unten rechts)

nextuser

Lass uns bitte nicht darüber diskutieren, was der Hintergrund ist. Ich habe versucht, das zu erklären. Mehr kann ich dazu nicht sagen. Frage ist nun, ob Du mir helfen kannst.

@ nextuser

Danke für Deinen Input. Ich muss eingestehen, dass es sich bei dem, was ich bisher hinbekommen habe, um den Rest unzähliger Versuche handelt. Ich lasse mich ja gerne beraten. Daher mein Input hier. Zum Gedanken dahinter: Wenn auf einer Seite ein kleines Bild fast am linken Rand steht und dieses mittig über diesem Bild vergrössert wird, hängt der linke Teil des vergrösserten Bildes über den linken Bildschirm-Rand hinaus. Und daher soll das vergrösserte Bild in der Mitte des Gerätes platziert und von dort aus vergrösserte werden. Vielleicht kannst Du mir zeigen, wie das geht.

Hallo allerseits

Erbitte Hilfe beim Zentrieren von Bildern beim Hovern, mittig von Gerät und nicht von Bilddatei ausgehend.

Was ich bisher habe, ist folgendes:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To hover image centered on Device</title>
    <style>
        center{
            margin-top: 100px;
        }
        .myzoomimg img{
            position: relative;
            transition: 1s;
        }
        .myzoomimg img:hover{
            z-index: 1;
            display: block;
            margin: 0 auto;
            transform: scale(1.6);
        }
    </style>
    </head>
    <body>
        <center>
            <div class="myzoomimg">
                <img src="pic1-600.jpg" width="30%" height="300px"> 
            </div>
        </center>
    </body>
</html>

Vielen Dank im Voraus für jegliche Schützenhilfe.

Greez

Tamaleus