Beiträge von Sempervivum

Gern geschehen, freut mich, dass es funktioniert!

So müsste es mit dem Callback aussehen:

        function showPosition(position) {
            x.innerHTML = "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
            $.post("phpexample.php", {
                latitude: position.coords.latitude, longitude: position.coords.longitude
            }, function (data) {
                // im Parameter data steht jetzt die Ausgabe
                // des PHP-Skriptes zur Verfuegung
                console.log(data);
            });
        }

Zitat

müsste er die php Datei aufrufen und die Daten erneut anzeigen

Ersteres tut er, letzteres nicht von allein: Damit die Ausgabe des PHP-Skriptes auf der Seite sichtbar wird, musst Du die Callback-Funktion wieder hinzu fügen. In deren Eingangsparameter (z. B. out oder data statt return) steht dann die Ausgabe des PHP-Skriptes zu Verfügung. Überzeuge dich davon, indem Du sie mit console.log anzeigen lässt.

Ja, die Post-Aktion wird die PHP-Datei aufrufen und deren Ausgabe steht dann im Parameter der Callback-Funktion zur Verfügung, wenn Du diese wieder hinzu fügst.

Erklärungen und Codebeispiele findest Du z. B. hier:

https://www.php-einfach.de/mysql-tutorial/crashkurs-mysqli/

Die Syntax, wie Du jQuery einbindest, ist fehlerhaft. So ist es richtig:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Da ist die Reihenfolge bei den schließenden Klammern falsch:

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
    
    $.post( "phpexample.php", {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
    }); // hier war der Fehler
}

Mache dich mit der Console vertraut, dort werden solche Fehler angezeigt.

Da gibt es noch einige andere Probleme:

• Schließende runde Klammer am Ende des $.post fehlt
• Keine reservierten Wörter wie return bei Variablen- oder Parameternamen verwenden.
• Das $.post musst Du in die Funktion showPosition verschieben, weil sonst die Variable position nicht definiert ist.
• Schreibfehler postion

Es funktioniert nicht, weil Du die Parameter nicht richtig übergibst. Ich empfehle ein Objekt. Darin musst Du die Parameter so eintragen, wie Du sie im PHP einliest:

$.post( "phpexample.php", {
    latitude: postion.coords.latitude,
    longitued: postion.coords.longitude
}, function(return){

Nein, gibt es leider nicht. Die Browser schließen aus Sicherheitsgründen den Zugriff auf das lokale Dateisystem mit Javascript aus. Und das ist gut so: Nicht auszudenken, wenn jede x-beliebige Website Zugriff auf meine lokalen Dateien hätte. Ausnahmen sind lediglich die Filereader-API und Skripts zum Speichern von Dateien. Diese ermöglichen den Zugriff aber auch nur durch Interaktion mit dem Benutzer.

Ja, den Debugger zu benutzen, erfordert schon etwas Erfahrung. Dieser zeigt auch nicht die Fehler direkt an, sondern man muss den Code Schritt für Schritt untersuchen, um den Fehler einzugrenzen und zu lokalisieren.

Fällt mir nur noch ein, meine Empfehlung zu wiederholen, mit dem Admin zu sprechen und zu klären, ob der IE irgendwie modifiziert wurde, so dass dieses Skript nicht funktioniert.

Dann fällt mir nur noch der steinige Weg ein, die JS-Dateien in unkomprimierter Form herunter zu laden und den Fehler mit dem Debugger zu untersuchen

Ich habe den Code von Stackoverflow genommen und der funktioniert bei mir einwandfrei im IE11. Hast Du auch genau diesen Code verwendet oder hast Du ihn irgendwie modifiziert oder erweitert? Wenn letzteres, dann poste doch mal deine Version.

Firewall als Problemursache halte ich für unwahrscheinlich, da Du ja beim Stand deines Postings #5 die JS-Dateien selbst gehostet hattest.

Ich würde den Admin daraufhin befragen, ob irgend welche Funktionen im IE deaktiviert wurden, z. B. das lokale Speichern.

Ich halte es für unwahrscheinlich, dass das Problem mit diesem Button zusammen hängt. Sind in der Console irgend welche Hinweise zu erkennen? IE11 macht häufig Probleme, weil er manche Features von Javascript nicht unterstützt.

Ist das dieses Javascript:

https://github.com/SheetJS/sheet.js.org

Am besten wäre es, wenn man sich das in Aktion ansehen könnte. Hast Du die Seite online?

Zitat

Vielleicht würde mir auch am Anfang eine Funktion helfen die erkennt, wann das div den oberen Bildrand berührt.

Mit jQuery kannst Du zum einen die Position eines Elementes, hier des mittleren Divs, ermitteln:

http://api.jquery.com/offset/

Außerdem die aktuelle Scroll-Position:

https://api.jquery.com/scrollTop/

Diese Werte müsstest Du vergleichen. Das Div ist dann am oberen Bildrand wenn beide y-Positionen bzw. top-Werte gleich sind.

Das ganze in einem Eventhandler für das Scroll-Event, z. B. so:
https://api.jquery.com/scroll/

Zwar eine PHP-Datei, die jedoch HTML generiert, daher ist der Doctype erforderlich. Warum es mit diesem bei dir nicht funktioniert, kannst Du wahrscheinlich hier nachlesen:

https://www.php-einfach.de/php-tutorial/php-sessions/

Ja, so etwas gibt es. Informiere dich über Attributeselektoren, z. B. hier:

https://developer.mozilla.org/de/docs/Web/CSS/Attributselektoren

BTW: Hoffentlich bekomme ich jetzt keine Abmahnung, weil ich fertigen Code gepostet habe Aber wir haben es ja zuvor mit dem Hinweis auf Stackoverflow versucht, wo es ein fertiges Beispiel gibt, aber der TO konnte es nicht auf seine Seite übertragen.

Das Kernproblem, warum dein Layout nicht so funktioniert, wie es soll, ist, dass Du dieses

<div class="all">

drin hast. Diesem hättest Du display:flex geben müssen.
Außerdem fehlt der Doctype.

<div class="body">

ist etwas verwirrend. Ich empfehle, statt dessen das main-Tag zu verwenden, das semantisch dafür vorgesehen ist.

Dann würde das HTML so aussehen:

<!doctype html>
<html>

<head>
    <link href="../css/themen-home.css" rel="stylesheet">
    <meta charset="UTF-8">
    <title>Skytastic.eu- Forum Test1</title>
    <link href="../css/header.css" rel="stylesheet">
    <link href="../css/footer.css" rel="stylesheet">
</head>

<body>
    <header>
        <div class="header">
            <div class="navigate">
                <a href="../anmelden.php">
                    <button class="navs">Anmelden</button>
                </a>
                <a href="../registrieren.php">
                    <button class="navs">Registrieren</button>
                </a>
            </div>
            <div class="navigate">
                <a href="../">
                    <button class="navs">Start</button>
                </a>
                <form action="../beitrag-erstellen.php" method="post">
                    <input name="thema" type="hidden" value="Test1">
                    <button name="gesendet" class="navs1" type="submit">Beitrag erstellen</button>
                </form>
                <a href="">
                    <button class="navs"></button>
                </a>
                <a href="">
                    <button class="navs"></button>
                </a>
                <a href="">
                    <button class="navs"></button>
                </a>
                <a href="../../">
                    <button class="navs">Website</button>
                </a>
            </div>
        </div>
        <h1>Skytastic.eu - Forum - Test1</h1>
    </header>
    <main>
        <h1>Es wurde bisher kein Beitrag in diesem Thema erstellt.</h1>
    </main>
    <footer>
        <p>Erstellt von Hoppeltiger</p>
        <p>Discord:
            <a href="https://discord.gg/Mk4BBe">https://discord.gg/Mk4BBe</a>
        </p>
        <p>
            <a href="../adminpannel.php">Adminpannel</a>
        </p>
    </footer>
</body>

</html>

und das CSS so:

        body {

            margin: 0;

            padding: 0;

            background-image: url("images/dia2.jpg");

            background-repeat: no-repeat;
            background-size: cover;

            background-attachment: fixed;

            display: flex;

            flex-direction: column;
            min-height: 100vh;

        }

        .sbutton {

            border: 2px solid #595a5b;

            padding: 10px 20px;

            outline: none;

            cursor: pointer;

            transition-duration: 0.4s;

            text-transform: uppercase;

            border-radius: 15px;

            margin-bottom: 20px;

            margin-left: 20px;

            text-align: center;

            opacity: 0.75;

        }

        .sbutton:hover {

            background-color: #595a5b;

            color: white;

        }

        a {

            color: black;

            text-decoration: none;

        }

        .beitraege {

            margin-top: 15px;

            margin-bottom: 15px;

        }

        .beitraege h1 {

            line-height: 0;

        }

        .p_dat {

            text-align: right;

            font-size: 1em;

        }

        .p {

            font-size: 1em;

        }

        .p {

            line-height: 0;

        }

        .einr {

            display: flex;

            justify-content: space-between;

        }

        hr {

            border-color: rgba(192, 192, 192, 1);

        }

        header {
            flex: 0 0 auto;
        }

        main {

            padding: 15px;

            background-color: rgba(255, 255, 255, 0.75);

            flex: 1 1 auto;

        }

        footer {
            flex: 0 0 auto;
        }

        @media(min-width: 700px) {

            main {

                width: 45%;

                margin: 0 auto;

                padding-bottom: 64px;

            }

        }

und das Layout müsste das sein, was Du dir vorstellst:

Header oben, Footer unten und der grau hinterlegte Inhalt füllt den Raum dazwischen aus.

Poste besser das generierte HTML aus der Quelltextansicht des Browsers.