Beiträge von Sempervivum

Sempervivum

Die PHP-Seite wird auch hier beschrieben:

http://php.net/manual/de/feat…post-method.php

Sempervivum

Dafür gibt es ein mächtiges Plugin:

https://datatables.net/examples/api/multi_filter_select.html

Features, die man nicht braucht, kann man abschalten, z. B. das Sortieren:

https://datatables.net/examples/basic_init/filter_only.html

Sempervivum

Ich habe es mal im Opera getestet und kann die Anzeige im HTML-Inspektor nicht finden. Deshalb denke ich, dass hier Handarbeit angesagt ist.

Ich habe mal in meinen Testdateien gesucht und dies gefunden:

Code

        <div class="wrtt tooltips">
            <input class="tooltips" pattern="^[0-9]*$" />
            <span>Falsche Eingabe</span>
        </div>
        <div class="wrtt tooltips">
            <input class="tooltips" pattern="^[0-9]*$" />
            <span>Falsche Eingabe</span>
        </div>
        <style>
            .wrtt.tooltips {
                margin-top: 20px;
                position: relative;
                display: inline-block;
            }

                .wrtt.tooltips span {
                    position: absolute;
                    width: 140px;
                    color: #FFFFFF;
                    background: salmon;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 6px;
                }

                    .wrtt.tooltips span:after {
                        content: '';
                        position: absolute;
                        bottom: 100%;
                        left: 50%;
                        margin-left: -8px;
                        width: 0;
                        height: 0;
                        border-bottom: 8px solid salmon;
                        border-right: 8px solid transparent;
                        border-left: 8px solid transparent;
                    }

            input.tooltips + span {
                visibility: visible;
                opacity: 0.8;
                top: 34px;
                left: 50%;
                margin-left: -76px;
                z-index: 999;
            }

            input.tooltips:valid + span {
                visibility: hidden;
            }
        </style>

Alles anzeigen

Nur CSS, zeigt den Fehler sofort bei der Eingabe an. Will man ihn erst beim Submit anzeigen, muss man wahrscheinlich noch etwa Javascript hinzu fügen. Das kann man dann beliebig gestalten und positionieren.

Sempervivum

Dann versuchen wir es mit onchange und einer for-Schleife:

Code

        relselect.onchange = function() {
           var dataselect = document.listForm.data;
           dataselect.innerHTML = '';
           var cdata = data[this.options[this.selectedIndex].innerHTML]
           for (var i = 0; i < cdata.length; i++) {
               var item = cdata[i];
               var opt = new Option(item.Name);
               opt.setAttribute("data-telefon", item.Telefon);
               dataselect.appendChild(opt);
           };
        };

Alles anzeigen

Sempervivum

Ich habe mal einen Vorschlag ohne jQuery ausgearbeitet:

Code

<form name="listForm">
        <select name="relation">
        </select>
        <select name="data">
        </select>
    </form>
    <script>
        var data = {
            '100': [
                {Name:'Bernd', Telefon: '00011'},
                {Name:'Frank', Telefon: '00014'}
            ],
            101: [
                {Name:'Klaus', Telefon: '00012'}
            ],
            102: [
                {Name:'Dieter', Telefon: '00013'}
            ]
        };
        document.listForm.relation.options[document.listForm.relation.length] = new Option('100');
        document.listForm.relation.options[document.listForm.relation.length] = new Option('101');
        document.listForm.relation.options[document.listForm.relation.length] = new Option('102');
        var relselect = document.listForm.relation;
        relselect.addEventListener("change", function() {
           var dataselect = document.listForm.data;
           dataselect.innerHTML = '';
           data[this.options[this.selectedIndex].innerHTML].forEach(function (item, idx) {
               var opt = new Option(item.Name);
               opt.setAttribute("data-telefon", item.Telefon);
               dataselect.appendChild(opt);
           });
        });
        var e = document.createEvent('HTMLEvents');
        e.initEvent("change", false, true);
        relselect.dispatchEvent(e);
    </script>

Alles anzeigen

Prüfe, ob es das ist, was Du brauchst. Die Definition der Daten habe ich so geändert, dass der Zugriff möglichst einfach ist.

Sempervivum

Zitat

lasse ich in einer Selectbox nun eine vereinfachte Auswahl durchführen ...

in der Selectbox sollte nun - wenn man z.B. Relation 100 auswählt

Zwei Fragen:

1. Ich nehme an, die erste Selectbox soll ebenfalls automatisch aufgebaut werden?

2. Soll die Auswahl in der ersten Selectbox nur die Felder 'Relation' enthalten?

Sempervivum

Wenn Du in den Quelltext siehst, erkennst Du, dass bei action eine URL angegeben ist:

Code

<form method="post" action="https://css-tricks.com/examples/DragAndDropFileUploading//?" enctype="multipart/form-data" novalidate class="box">

Wie die PHP-Datei aussehen muss, kannst Du dir hier ansehen:

https://www.tutorials.de/threads/ajax-f…l-nicht.406371/

Sempervivum

Wenn Du wenig Zeit hast, kannst Du die Bilder ganz schnell etwas hübscher machen, indem Du sie rund machst:

http://webentwicklung.ulrichbangert.de/weltkarte-hunde.html

Sempervivum

Hier ist etwas für den Upload:

https://css-tricks.com/examples/DragAndDropFileUploading/

Sempervivum

Das geht mit border-collapse: collapse;

Sempervivum

vertical-align funktioniert außerhalb einer Tabellenzelle nur für Bilder. Zuverlässiger ist Flexbox und align-items:center.

Sempervivum

Zitat

Fragen wir mal Sempervivum .vieleicht weiss er das was ich falsch mache

Dein Vertrauen ehrt mich, Basti, aber ich möchte in dieses Thema nicht einsteigen:

1. Wenn ich dies machen müsste, würde ich Fancybox verwenden.

2. Ich bin bisher nicht in Bootstrap eingestiegen und habe es auch nicht vor.

Sempervivum

Mit jQuery-UI-draggable war es eine Kleinigkeit:

http://webentwicklung.ulrichbangert.de/weltkarte-hunde-draggable.html

Einen der Köpfe mit der Maus ziehen und das Ausgabefeld links unter der Karte beobachten.

Sempervivum

Gute Nacht!

Sempervivum

Ja, das ist ein Demo, das ich für dich gemacht habe. Die Bilder bereitstellen und die Köpfe freistellen musst Du selber machen. Freistellen kann je nach Motiv eine Wissenschaft für sich sein, bist Du damit vertraut?

Was die Positionierung betrifft, kann ich dich unterstützen, indem ich ein Tool baue, mit dem man die Köpfe verschieben kann und die Position ablesen. Du müsstest nur die Karte bereit stellen, vielleicht als Dateianhang, und die Größe der Köpfe angeben. Am einfachsten wäre es natürlich, wenn sie alle die selbe Größe hätten.

Sempervivum

Zitat

bitte nehm jetzt diesen gerade ermittelten Text und nutze ihn um die richtige ID zu suchen und aufzurufen".

Wenn ich dich da richtig verstehe, sollte dieses es tun:

Code

function zeile(){
    var rows = document.getElementById('ID_tablecontrolE1253671').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function() {
            var row = this.rowIndex + 1;
            var idPlus = "_" + row + "_IMG";
            var newId = "ID_imageactioncontrol735BC564" + idPlus;
            $("img #" + newID).trigger("click"); // Klick auf den Button simulieren
            return true;
        });
    }
}

Alles anzeigen

Ich habe jQuery verwendet, weil das Triggern eines Klicks u. U. problematisch sein kann, siehe z. B. hier:

https://gomakethings.com/how-to-simulat…ith-javascript/

Sempervivum

Zitat

mit welchen befehlen positioniere ich die Balken und die Kreise

Siehe z. B. hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://stackoverflow.com/questions/3255…856609#33856609

Damit kannst Du die Elemente positionieren und, wenn Du es richtig machst, sind Position und Größe abhängig von der Auflösung des Bildschirms.

Zitat

Größe in Prozent zu definieren ist ebenfalls schon ein guter Ansatz

Sempervivum

Zitat

Oder: Die Hundeköpfe jeweils in ein a-Tag einbetten und dieses auf der Karte absolut positionieren. Die a-Tag bilden jeweils einen Link, der die betr. Seite öffnet.

Beides ist zunächst mal nicht responsiv.

Diese Aussage muss ich revidieren: Verwendet man konsequent Prozentangaben für Abmessungen und Positionen, kann diese Lösung sehr wohl responsiv sein, siehe hier:

http://webentwicklung.ulrichbangert.de/weltkarte-hunde.html

Sempervivum

Dafür würdest Du eval() brauchen, aber in den meisten Fällen ist das nicht zu empfehlen, sondern es gibt bessere Lösungen, so auch hier: ein Array oder ein Objekt verwenden:

Code

function test1(i){
// Array 
var pD = [
    "Peter1,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    "Peter2,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    "Peter3,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    "Peter4,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    "Peter5,Müller,Mann,10a,12.12.1999,1,2,3,6,2"
];
var a = pD[i];
 
 alert(a);
 return a;
}

function test2(i){
// Objekt 
var pD = {
    pD1: "Peter1,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    pD2: "Peter2,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    pD3: "Peter3,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    pD4: "Peter4,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    pD5"Peter5,Müller,Mann,10a,12.12.1999,1,2,3,6,2"
];
var a = pD["pD" + i];
 
 alert(a);
 return a;
}

Alles anzeigen

Sempervivum

Danach bestand noch das Problem, dass die Höhe von linkem und rechten Logocontainer unterschiedlich war, abhängig von der Fensterbreite. Daher habe ich die Struktur umgestellt:

HTML

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Hauff Intro</title>
    <meta name="description" content="">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="http://www.hauff.com/" />
</head>
<body bgcolor="#a8a9ad">
    <style>
        h1 {
            font-size: 24px;
        }

        h2 {
            font-size: 18px;
            display: inline-block;
            margin: 20px;
            margin-top: 40px;
            margin-bottom: 40px;
        }

        a {
            text-decoration: none;
            flex-basis: 50%;
        }

        body {
            font-family: arial;
            margin: 0;
            padding: 0;
        }

        header, main {
            display: flex;
            flex-direction: row;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        figure {
            width: 100%;
            position: relative;
        }

            figure.left {
                background-color: #fff;
            }

            figure.right {
                background-color: #282828;
            }

                main figure img {
                    width: 100%;
                    height: auto;
                    vertical-align: top;
                }

                main figure figcaption {
                    text-align: left;
                    width: 85%;
                }

        figure.logo {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

            figure.logo.right {
                justify-content: flex-end;
                color: #ffffff;
            }

            figure.logo.left {
                justify-content: flex-start;
                color: #a8a9ad;
            }

            figure.logo.right figcaption {
                text-align: left;
                padding: 20px;
            }

            figure.logo.left figcaption {
                text-align: right;
                padding: 20px;
            }

        figure {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        img.logo {
            max-width: 100%;
        }

        .overlay {
            position: absolute;
            width: 85%;
            bottom: 0;
            color: white;
        }

            .overlay.right {
                left: 0;
                background-color: rgba(245, 130, 32, 0.4);
            }

            .overlay.left {
                right: 0;
                background-color: rgba(102, 174, 64, 0.6);
            }
    </style>
    <header>
        <a href="https://www.hauffdigital.com/" title="Hauff-Digital: Digitale Verkaufslösungen für den Baustoffhandel">
            <figure class="logo left">
                <img class="logo left" src="Hauff-Digital.png" alt="Hauff Digital Logo" />
                <figcaption>
                    <h1>Digitale Verkaufslösungen für den Baustoffhandel</h1>
                </figcaption>

            </figure>
        </a>
        <a href="http://www.hauff.com" title="Hauff-Classic: Ladenbau für den Baustoffhandel">
            <figure class="logo right">
                <figcaption>
                    <h1>Ladenbau für den Baustoffhandel</h1>
                </figcaption>
                <img class="logo right" src="Hauff-Ladenbau.png" alt="Hauff Ladenbau Logo" />
            </figure>
        </a>
    </header>
    <main>
        <a href="https://www.hauffdigital.com/" title="Hauff-Digital: Digitale Verkaufslösungen für den Baustoffhandel">
            <figure class="bottom">
                <figcaption class="overlay left">
                    <h2>Wir planen und bauen erfolgreiche Verkaufsausstellungen. Denn wer heute Kunden begeistern will, muss Mehrwerte bieten – analog und digital.</h2>
                </figcaption>
                <img src="HauffDigital.jpg" alt="Hauff Digital" />
            </figure>
        </a>

        <a href="https://www.hauff.com/" title="Hauff-Digital: Digitale Verkaufslösungen für den Baustoffhandel">
            <figure class="bottom">
                <img src="HauffClassic.jpg" alt="Hauff Ladenbau" />
                <figcaption class="overlay right">
                    <h2>
                        Wir sind die Digitalpioniere der Baustoffbranche und machen Ihre Verkaufsräume fit für die Zukunft. So profitieren Sie und Ihre Kunden aus dem Besten aus Offline und Online!
                    </h2>
                </figcaption>
            </figure>
        </a>
    </main>
</body>
</html>

Alles anzeigen

Ich habe versucht, jetzt die selben Dateinamen für die Bilder zu verwenden wie Du.

Ist das Fenster zu schmal, werden jetzt die Logotexte nicht mehr optimal dargestellt. Dies könnte man noch verbessern, indem man mit eine Mediaquery Bilder und Texte jeweils untereinander anordnen würde bei schmalem Fenster.

Beiträge von Sempervivum

Upload und Download

Durchsuchbare Tabelle

[JS][CSS] setCustomValidity

Durchsuchen eines Arrays und Werte ausgeben

Durchsuchen eines Arrays und Werte ausgeben

Durchsuchen eines Arrays und Werte ausgeben

Upload und Download

Mein Traum für meine ersten Webseite

Upload und Download

allgemeine fragen zu Javascript

Lightbox gallery

Lightbox gallery

Mein Traum für meine ersten Webseite

Mein Traum für meine ersten Webseite

Mein Traum für meine ersten Webseite

[Erledigt] JS / jQuery für eine anklickbare Tabellenzeile

Objekte positionieren

Mein Traum für meine ersten Webseite

allgemeine fragen zu Javascript

Newbie in Sachen Grid und div