Beiträge von Sempervivum

Ja, es wird immer der Link des letzten Bildes geöffnet. Das liegt daran, dass sie übereinander liegen und das letzte Bild oben. Auch wenn es durchsichtig ist, wirkt trotzdem der Klick darauf.

basti1012 Klick mal auf das erste Bild ...

Du wirst hier mit einer Eigenschaft solcher Slideshows in reinem CSS konfrontiert, dass sie sich relativ schwer ändern und erweitern lassen.

Als nächstes erwarte ich die Frage "Wie kann ich mehr Bilder zu dieser Slideshow hinzu fügen?"

Siehe auch hier:

bildergalerie in CSS

Meine Antwort auf die Frage, wie es am einfachsten geht, lautet daher: Verwende ein ausgereiftes Javascript wie Cycle2, damit ist es eine Kleinigkeit:

http://jquery.malsup.com/cycle2/demo/non-image.php

    <div class="cycle-slideshow" data-cycle-slides="> a">
        <a href="link1.html"><img src="images/a.jpg"></a>
        <a href="link2.html"><img src="images/b.jpg"></a>
        <a href="link3.html"><img src="images/c.jpg"></a>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle2.js"></script>

Edit: Basti: "Ick bin all hier" ...

Lege das gesamte Arrangement mit den Bildern und Texten in einen zusätzlichen Container. Dann kannst Du diesen und den neuen rechten mit

body {display:flex;} nebeneinander anordnen.

Zitat

der dann in der Höhe über die anderen container geht

Das funktioniert dann automatisch weil align-items: stretch; Default ist.

Ein befreundeter Webmaster verwendet dafür Tooltipster, dieses Plugin legt abhängig von der Mausposition die Lage des Tooltip intelligent fest, so dass es immer sichtbar ist.

http://iamceege.github.io/tooltipster/

Der Grund für das Verhalten ist, dass der Filereader für die Erzeugung der Vorschaubilder asynchron arbeitet, dadurch kann die Reihenfolge verfälscht werden. Dieses sollte das Problem lösen:

    <input type="file" id="files" multiple>Choose files
    <div id="sortable"></div>
    <script>
        function dateiauswahl(evt) {
            var dateien = evt.target.files; // FileList object
            var imgs = [], names = []; counter = 0, nrimgs = dateien.length, binchar = 97;
            // Auslesen der gespeicherten Dateien durch Schleife
            for (let i = 0; i < dateien.length; i++) {
                let f = dateien[i];
                names[i] = f.name;
                // nur Bild-Dateien
                if (!f.type.match('image.*')) {
                    nrimgs--;
                    continue;
                }
                let reader = new FileReader();
                reader.onload = function (e) {
                    console.log("loaded " + i)
                    imgs[i] = e.target.result;
                    counter++;
                    if (counter == nrimgs) {
                        // erzeuge Thumbnails.
                        for (var j = 0; j < imgs.length; j++) {
                            var img = document.createElement('img');
                            img.className = 'bild';

                            img.src = imgs[j];
                            img.title = names[j];

                            var li = document.createElement('li');
                            li.appendChild(img);
                            li.id = String.fromCharCode(97 + j);
                            counter++;
                            var sortable = document.getElementById("sortable");
                            sortable.appendChild(li);
                            binchar++;
                        }
                    }
                };
                // Bilder als Data URL auslesen.
                reader.readAsDataURL(f);
            };
        }
        // Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
        document.getElementById('files').addEventListener('change', dateiauswahl, false);
    </script>

Der Footer ist doch unten in Bastis Beispiel?

Den Header würde ich so gestalten, dann sind die Socialitems rechts:

https://jsfiddle.net/Sempervivum/tfy4hga6/18/

Versuche, ob dies das ist, was Du dir vorstellst:

    <select id="dynselect" size="1">
        <option>Zeile1</option>
        <option>Zeile2</option>
        <option>Zeile3</option>
        <option>Zeile4</option>
        <option>Zeile5</option>
        <option>Zeile6</option>
        <option>Zeile7</option>
        <option>Zeile8</option>
        <option>Zeile9</option>
        <option>Zeile10</option>
        <option>Zeile11</option>
        <option>Zeile13</option>
        <option>Zeile14</option>
        <option>Zeile15</option>
        <option>Zeile16</option>
        <option>Zeile17</option>
        <option>Zeile18</option>
        <option>Zeile19</option>
        <option>Zeile20</option>
        <option>Zeile21</option>
        <option>Zeile22</option>
        <option>Zeile23</option>
        <option>Zeile24</option>
        <option>Zeile25</option>
        <option>Zeile26</option>
    </select>
    <script>
        document.getElementById("dynselect").addEventListener("mousedown", function () {
            this.size = "10";
        });
        var opts = document.querySelectorAll("#dynselect option");
        for (var i = 0; i < opts.length; i++) {
            opts[i].addEventListener("mousedown", function () {
                document.getElementById("dynselect").size = "1";
                event.stopPropagation();
            });
        }
    </script>

Da hast Du dir dummerweise wieder eine CSS-Lösung ausgesucht, die umständlich zu erweitern ist. Wenn es nicht anders ginge, würde ich es dir ja umändern aber prüfe zunächst, ob Du dich mit einer Javascript-Lösung anfreunden kannst.

Was heißt denn "es geht nicht"? Wird nur ein Bild angezeigt oder werden alle auf einmal angezeigt oder gar keins?

Ich hatte es mit dem HTML aus deinem ersten Posting getestet; dieses <div id="gallery"> darf nicht verändert werden. Am besten wäre es, wenn Du es online hättest, damit man es sich ansehen kann. Ist sicher nur eine Kleinigkeit.

Ach so, das alte CSS musst Du löschen, jedenfalls soweit es die Slideshow betrifft, vor allem das position:absolute; bewirkt, dass alle Bilder übereinander liegen und nur das oberste sichtbar ist.

Es gibt dafür zahlreiche fertige Skripte, die ich normaler Weise gern empfehle, aber wenn Du keine Übergangseffekte willst, dann versuche dies:

    <script>
        var idx = 0;
        var slides = document.querySelectorAll("#gallery figure");
        function slideIt() {
            for (var i = 0; i < slides.length; i++) {
                if (idx == i) slides[i].style.display = "inline-block";
                else slides[i].style.display = "none";
            }
            if (idx < slides.length - 2) idx++;
            else idx = 0;
        }
        slideIt();
        setInterval(slideIt, 3000);
    </script>

Hinter dem HTML einfügen, am besten vor dem schließenden </body>

Auch ganz ohne jQuery hätte es etwas gegeben, das dir die Arbeit abnehmen kann:

https://developer.mozilla.org/en-US/docs/Web…ormData_Objects

Das ist nun Mal der große Nachteil bei solch einer reinen CSS-Lösung: Sie ist extrem schwer zu erweitern.

input22.json kommt mir fragwürdig vor: Ich verstehe das so, dass die Fahrzeit immer von der aktuellen Station (die in id steht) bis zur nächsten gerechnet wird. Dann würde man in der Endstation keine brauchen, wohl aber in der Startstation. In input22.json ist es jedoch genau umgekehrt.

Außerdem sehe ich noch ein anderes Problem, das durchdacht werden müsste: Normaler Weise können die Züge in beiden Richtung fahren, d. h. die Stationen sowohl in aufsteigender als auch in absteigender Reihenfolge durchfahren. Allerdings für die aktuelle Aufgabenstellung wohl nicht relevant, den die ID der Startstation ist jeweils kleiner als die der Zielstation.

Wenn Du jQuery und den Einsatz von fertigen Skripts nicht ablehnst, dann sieh dir das jQuery-Form-Plugin an. Das ist genau dafür entwickelt worden, ein Formular statt mit Submit über Ajax an den Server zu senden und nimmt dir die ganze Arbeit ab.

http://jquery.malsup.com/form/

Das Problem sind nicht die a-Elemente sondern die lis. Dafür hast Du eine minimale Breite definiert, die die Breite des ul überschreitet, so dass sie nach rechts heraus ragen.

Meine Empfehlung: Auf komplizierte Berechnungen möglichst verzichten und konsequent auf Flexlayout setzen, dann richtet der Browser es so ein, dass es passt.

html-seminar.de/woltlab/attachment/1832/

Zitat

Wenn ich in HTML eine Klasse mit [] Angebe

Das kenne ich nur von den Namen von Formularelementen, aber ich lerne immer gern dazu.

Wenn ich mir dein Javascript ansehe, scheint es darum zu gehen, die Werte der Eingabefelder aufzusummieren. Das lässt sich leicht machen: Gib den betr. Elementen eine Klasse (kann ja noch andere Eingabefelder geben, die in die Prozedur nicht einbezogen werden sollen). Dann kannst Du sie in einer Schleife abarbeiten und die Werte summieren:

$('form#testForm input').change(function() {
    var result = 0;
    var inputs = $("form#testForm input.summand");
    inputs.each(function(idx, ele) {
        result += $(this).val();
    });
    $(".priceresult").val(result);
});

Dann werden automatisch alle berücksichtigt.

Zitat

Meiner Ansicht nach ist die Fahrzeit eine Eigenschaft der Linie ist und sollte daher auch in der Klasse "Linie" berechnet werden.

Für genau die Linie wird sie auch in den Linienobjekten berechnet. Ich weiß nicht genau, wie die Aufgabenstellung ist, hatte angenommen, dass eine Gesamtfahrzeit ermittelt werden soll. Wenn nur die linienspezifische gefragt ist, kann man auf den Calculator wahrscheinlich verzichten.

Guten Morgen Stef,

so etwas war früher mein Beruf

Ich habe das mal ein wenig anders aufgezogen: Für jede Linie ein Objekt kreiert. Habe nicht nachgerechnet, aber grob erscheinen mir die Ergebnisse plausibel. In das mit der Session-Variablen bin ich nicht weiter eingestiegen.

<?php

/*
Aufgabenbeschreibung:

Berechne die Fahrzeit zwischen zwei Stationen auf Basis der geschätzen Fahrzeit (in Sekunden) und der vorgegebenen Start- und Endstation

 */
ini_set('display_errors', '1');
error_reporting(E_ALL);

session_start();

class Line
{
    private $start;
    private $dest;

    public function __construct($jsonFile)
    {
        $json = file_get_contents($jsonFile);
        $this->lineData = json_decode($json);
        $this->start = $this->lineData->startStation;
        $this->dest = $this->lineData->endStation;
    }

    public function getTravellingTime()
    {
        $travellingTime = 0;
        foreach ($this->lineData->stations as $item) {
            if (isset($item->id) && isset($item->durationToNext)) {
                if ($item->id >= $this->start && $item->id < $this->dest) {
                    $travellingTime += $item->durationToNext;
                }
            }
        }
        var_dump($travellingTime);
        return $travellingTime;
    }

}

class Calculator
{
    private $lines;
    public function __construct(array $jsonFiles)
    {
        $this->lines = [];
        foreach ($jsonFiles as $file) {
            $this->lines[] = new Line($file);
        }

    }
    public function getTravellingTime()
    {
        $travelingTime = 0;
        foreach ($this->lines as $line) {
            $travelingTime += $line->getTravellingTime();
        }

        return $travelingTime;
    }
}

$jsonFiles = [
    __DIR__ . "/jsonFiles/input21.json",
    __DIR__ . "/jsonFiles/input22.json",
    __DIR__ . "/jsonFiles/input23.json",
    __DIR__ . "/jsonFiles/input24.json",
    __DIR__ . "/jsonFiles/input25.json",
];

$theCalculator = new Calculator($jsonFiles);
$travelingTime = $theCalculator->getTravellingTime();
var_dump($travelingTime);

$line1 = new Line(__DIR__ . "/jsonFiles/input21.json");
var_dump($line1->getTravellingTime());

Verstehe die Aufgabenstellung nicht ganz: Es sollen Fahrzeiten berechnet werden. Es gibt fünf JSON-Dateien; Repräsentieren die jeweils eine Linie eines Verkehrsmittels? In jeder JSON-Datei steht Start- und Zielstation. Sollte kein Problem sein, die Fahrzeit zwischen diesen Stationen zu berechnen. Sollen dann die Fahrzeiten auf den einzelnen Linien zu eine Gesamtfahrzeit addiert werden? Mir würde es das Verständnis erleichtern, wenn ich wüsste, was das im realen Leben bedeutet: Verkehrsmittel wie Straßenbahn oder U-Bahn wie ich es oben vermutet habe?