dropdown mit download

Ich habe einen Moment gebraucht um meine Testdatei von früher wieder zu finden. Dort sieht das Popover so aus:
1713267855336.png
d. h. mit kleinem Info-Symbol rechts neben dem Beschreibungstext. Ich dachte, das sei so, wie Du es dir vorstellst?
Auf deiner Testseite im Moment mit relativ großem Button.

Edit: Der Code der KI ist Asche - weder notwendig, jQuery zu verwenden noch Javascript überhaupt für diesen Zweck. Popover leistet es ohne das.
 
bdt600 hat gesagt.:
Siehe z.B. (oder einen der anderen tausende Treffer von google) How To Create Popups
Zum Vergrößern anklicken....
Mit englischen Texten kann ich nichts anfangen, Danke
Sempervivum hat gesagt.:
Ich habe einen Moment gebraucht um meine Testdatei von früher wieder zu finden. Dort sieht das Popover so aus:
Anhang anzeigen 67151
d. h. mit kleinem Info-Symbol rechts neben dem Beschreibungstext. Ich dachte, das sei so, wie Du es dir vorstellst?
Auf deiner Testseite im Moment mit relativ großem Button.

Edit: Der Code der KI ist Asche - weder notwendig, jQuery zu verwenden noch Javascript überhaupt für diesen Zweck. Popover leistet es ohne das.
Zum Vergrößern anklicken....
Ja so mit dem Kleinen Symbol wäre das ideal-wie hast Du das gemacht oder kann ich das online anschaun und kopieren?
 
Das HTML muss so aussehen:
Code: 
    <!-- Das HTML für die Popovers, für jede Option ein Element -->
    <div id="popover-1" popover>
        <h4>Die Überschrift im Popover 1</h4>
        <p>Der Text im Popover 1</p>
    </div>
    <div id="popover-2" popover>
        <h4>Die Überschrift im Popover 2</h4>
        <p>Der Text im Popover 2</p>
    </div>
    <select class="image-dropdown" id="image-dropdown3">
        <!-- Optionen mit Popover -->
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-Kreuzung-flach.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-Kreuzung-flach.png"
            data-popover-id="popover-1">
            Gleis-Kreuzung-flach
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-links.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-links.png"
            data-popover-id="popover-2">
            Weiche-Zufahrt-von-links
        </option>
        <!-- und dann weitere Optionen in dem selben Stil -->
Die Funktion makeOptions:
Code: 
        function makeOption(data, container) {
            if (!data.id) return data.text;
            const
                popoverId = data.element.dataset.popoverId;
            let popoverHtml = '';
            if (popoverId) {
                // HTML für den Popover-Button mit Info-Symbol:
                popoverHtml = `<button type="button" popovertarget="${popoverId}"></button>`;
            }
            const $state = $(`
            <span class="select2-option">
                <img src="${data.element.dataset.imgUrl}">
                <span class="dl-icon" data-link=${data.element.value}>⭳</span>
                <span class="option-text">${data.text}</span>
                ${popoverHtml}
                </span>`);
            return $state;
        };
wie früher schon geschrieben, ersetzen, nicht hinzu fügen.
Du findest unter meinem Kommentar das Info-Symbol.

Und das CSS:
Code: 
        span[popover] {
            z-index: 9999;
        }

        /* Default-Hintergrund und Rahmen vom Button entfernen */
        button[popovertarget] {
            border: none;
            background: none;
            font-size: 1.2em;
        }

        /* Download-Icon und Info-Button zentrieren */
        span.dl-icon,
        button[popovertarget] {
            display: inline-block;
            margin: 0 auto;
        }

        /* Anordnung der Elemente mit Gridlayout: */
       .select2-option {
            display: grid;
            grid-template-columns: 1fr auto;
            font-size: 1.5em;
       }
 
Sempervivum hat gesagt.:
PS: Die Forensoftware verschluckt das Infosymbol. Die Zeile muss so aussehen:
Anhang anzeigen 67152
Das Symbol findest Du z. B. hier:
Find all Unicode Characters from Hieroglyphs to Dingbats – Unicode Compart
Zum Vergrößern anklicken....
Was ist die Forensoftware, verwendet die Jeder automatisch?
Und die Zeile oben habe ich nicht ganz verstanden, da ich nicht wüßte, wie ich das "I"-Symbol ins html einbringe.

Mein Symbol habe ich jetzt hier: https://3d.peterplus.eu/MF23/download/jpg/Symbol-25.webp
wo muß das genau angegeben werden? Das mit dem Symbol-Dingbats war mir zu kompliziert.

Ohne das Symbol bleibt die Stelle jedenfalls leer, letzte Version: download-f.html
 
bdt600 hat gesagt.:
Du befindest dich hier in einem Forum, das Forum wurde in PHP programmiert, was ist jetzt wohl die Forensoftware?
Zum Vergrößern anklicken....
Danke, wenn man so oberschlau ist, dann stellen sich Einem solche Fragen natürlich nicht, man geht problemloser durch die Welt und alle, die sich in der Ehre baden dürfen, von Dir eines Besseren belehrt worden zu sein, vergrößern Deine Fan-Gemeinde mit Sicherheit um ein Vielfaches.
 
@PeterPlus
Das hat mit oberschlau absolut nichts zu tun, man muss einfach nur mal nachdenken, dann kommt man von ganz alleine drauf. Aber wozu nachdenken, wenn andere das für einen machen, genau wie HTML/CSS/JavaScript schreiben.
 
Dies CSS:
Code: 
/* @media (min-width: 600px)
.select2-option .dl-icon {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
} */
zerlegt jetzt ein wenig das Gridlayout, deaktiviere es erst Mal wie gezeigt.
Edit: Da sehe ich noch mehr Anweisungen dieser Art, diese ebenfalls deaktivieren.

Aber die Funktion ist wichtiger. Wenn Du deine Grafik verwenden willst, musst Du die Funktion makeOptions so ändern:
Code: 
        function makeOption(data, container) {
            if (!data.id) return data.text;
            const
                popoverId = data.element.dataset.popoverId;
            let popoverHtml = '';
            if (popoverId) {
                // Wir verwenden im HTML eine Grafik für das Info-Symbol:
                popoverHtml = `<button type="button" popovertarget="${popoverId}">
                    <img src="https://3d.peterplus.eu/MF23/download/jpg/Symbol-25.webp">
                </button>`;
            }
            const $state = $(`
            <span class="select2-option">
                <img src="${data.element.dataset.imgUrl}">
                <span class="dl-icon" data-link=${data.element.value}>⭳</span>
                <span class="option-text">${data.text}</span>
                ${popoverHtml}
                </span>`);
            return $state;
        };
Siehe die Zeile unter meinem Kommentar.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück