Beiträge von Sempervivum

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?

Um das Bild eindeutig ansprechen zu können, gibst Du ihm am besten eine Klasse, z. B. "hoverimg":

<img class="hoverimg" src="Malerei/Acrylmalerei/album/thumbs/blaue_formen.jpg" alt="">

Das folgende CSS, dass beim Hover der farbige Rand erscheint. Der transparente Rand ist nur ein Platzhalter, damit sich das Layout bei Hover nicht verschiebt.

img.hoverimg {
    border: 2px solid transparent;
}
img.hoverimg:hover {
    border: 2px solid blue;
}

Wo Du dass CSS hinschreibst, ist von untergeordneter Bedeutung, aber da es zum Bild gehört, bietet es sich an, es dort zu notieren, wo auch die CSS-Regeln für img allgemein stehen, d. h. in style2000.css ab Zeile 108.

... im Opera funktioniert die Fixierung, wenn ich es auf th anwende, und mit z-index bleibt die linke obere Zelle auch sichtbar:

        #DepotKopf {
            background-color: rebeccapurple;
            /* position: sticky;
            top: 0; */
        }

        /* .DepotRel {
            left: 0;
            position: sticky;
        } */

        tr th:first-child {
            background-color: blue;
        }

        tr td:first-child {
            position: sticky;
            left: 0;
            background-color: lightblue;
        }

        #DepotKopf th {
            top: 0;
            left: 0;
            position: sticky;
            background-color: rebeccapurple;
        }

        #DepotKopf th:first-child {
            z-index: 999;
        }

Das ist dann die Erklärung, ich benutze Opera ...

Dafür gibt es sicher auch eine Lösung, aber in meiner Testdatei ist die Kopfzeile nicht fixiert, sie verschwindet nach oben beim vertikalen Scrollen?

Du brauchst nur den betr. Zellen eine Hintergrundfarbe zu geben, dann verschwinden die gescrollten dahinter:

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

Zitat

dass der rechte Teil durchsichtig ist, was aber logischerweise nicht so schön aussieht, da die Daten dann mit der "Überschrift" rechts überlappen. Gibt es da einen kleinen Trick wie die Daten dann einfach hinter der Überschrift verschwinden? Beim Kopf ist das ja auch nicht so, daher verstehe ich gerade nicht wo da das Problem liegt.

Was mich betrifft, so verstehe ich leider nicht, was Du meinst. Ist wahrscheinlich besser, wenn Du ein Beispiel postest. Gibt sicher eine einfache Lösung.

Dazu gibt es zwei Ansätze:

1. Das Bild als Hintergrundbild, dann kannst Du mit Flexlayout die Texte problemlos zentrieren. Nachteil dabei: Der Container passt sich nicht an die Größe des Bildes an, sondern umgekehrt, man muss die Größe des Containers setzen und das Bild passt sich an. Seitenverhältnis bleibt außen vor.
2. Das Bild als img-Tag und die Texte absolut positioniert. Hier passt sich das Bild an die Größe des Containers an und das Seitenverhältnis bleibt erhalten. Nachteil ist die absolute Positionierung und dass die Zentrierung etwas kryptisch wird.

BTW: Dies ist ein klassicher Anwendungsfall für das figure-Tag:
https://wiki.selfhtml.org/wiki/HTML/Text…urierung/figure

Wenn ich versuche, 1-zu-1 umzusetzen, was Du beschreibst, komme ich auf dieses:

https://jsfiddle.net/Sempervivum/sh3o2ybz/3/

Da hast Du nicht ganz unrecht, ich habe vor einiger Zeit vor dem selben Problem gestanden.

Kern der Sache ist ja ein Eingabefeld vom Typ "file", mit dem man die Datei(en) auswählt. Normalerweise ist dies Bestandteil eines Formulars und wenn man das mit Submit abschickt, wird die Datei hochgeladen, ohne dass man weiteres dazu tun muss.

Interessant wird es dann auch auf den Server, weil die Datei(en) mit temporären Namen ankommen und man sie verschieben muss auf den Dateinamen und das Verzeichnis, wie man es braucht. Sieht dann i. allg. so aus:

<?php
    error_reporting(E_ALL);
    ini_set('display_errors', '1');
    var_dump($_FILES);
    var_dump(empty($_FILES));
    $sourcePath = $_FILES['img']['tmp_name']; // Storing source path of the file in a variable
    $targetPath = "uploads/" . $_FILES['img']['name']; // Target path where file is to be stored
    echo $sourcePath; echo $targetPath;
    move_uploaded_file($sourcePath, $targetPath) ; // Moving Uploaded file
?>

'img' ist dabei nicht fest vorgegeben, sondern der Name des file-Eingabefeldes; man kann sich leicht davon überzeugen, wenn man sich den Vardump von $_FILES ansieht.

Wenn ich alles richtig überblicke, müsste dies das Problem lösen:

Oben im head-Bereich:

    <!-- Die erste Zeile mit jQuery kannst Du löschen
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Und ganz unten, am Ende des Body:

    <!-- Set jQuery to compatibilty mode -->
    
    <script>var $j = jQuery.noConflict();</script>
    
    <!-- Back-to-top Java-Script -->
    <script>
        var back_to_top_button = ['<a href="#top-section-content" class="back-to-top"></a>'].join("");
        $j("body").append(back_to_top_button)

        // Der Button wird ausgeblendet
        $j(".back-to-top").hide();

        // Funktion für das Scroll-Verhalten
        $j(window).scroll(function () {
            if ($j(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
                $j('.back-to-top').fadeIn();
            } else {
                $j('.back-to-top').fadeOut();
            }
        });
    </script>

    <!-- Smooth-Scroll jQuery -->

    <script>
        // Add smooth scrolling to all links
        $j("a").on('click', function (event) {

            // Make sure this.hash has a value before overriding default behavior
            if (this.hash !== "") {
                // Prevent default anchor click behavior
                event.preventDefault();

                // Store hash
                var hash = this.hash;

                // Using jQuery's animate() method to add smooth page scroll
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
                $j('html, body').animate({
                    scrollTop: $j(hash).offset().top
                }, 800, function () {


                    // Add hash (#) to URL when done scrolling (default click behavior)
                    window.location.hash = hash;
                });
            } // End if
        }); // end onclick
    </script>

Ungetestet, ich hoffe, ich habe nichts vergessen.

Das scheint zunächst mal eine gute Nachricht zu sein, denn es zeigt offenbar an, dass die Funktion für das Senden jetzt aufgerufen wird. Leider tappe ich ein wenig im Dunkeln, was die Behebung des Fehlers angeht, weil mir die Kenntnisse über Websockets fehlen. Vermutung: Vor dem Senden der Nachricht muss ein Verbindungsaufbau stattfinden und der ist asynchron. Beim Klick auf den Submit-Button bei der ersten Version ist das kein Problem, weil der manuell erfolgt und es einige Zeit dauert, bis der Benutzer mit dem Formular fertig ist. Bei der neuen Version erfolgt das Senden jedoch sofort. I. allg. gibt es jedoch bei asynchronen Vorgängen einen success-Callback wie bei jQuery-Ajax und Du müsstest das Senden dort hinein legen.