Beiträge von Sempervivum

Zitat

auf dem Smartphone kann man nichts erkennen, als hätte man das Bild zu nah rangezoom

Kann ich nicht reproduzieren (Samsung S4, Android, Opera). Hast Du das Problem schon hiermit gelöst?:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Zitat

auch der Parallax Effekt funktioniert nicht.

Anscheinend ist der Browser-Support für background-attachment:fixed noch mangelhaft:

http://caniuse.com/#search=background-attachment

1. "this" ist nicht verfügbar, bzw. es ist das window-Element, wenn Du den Eventlistener inline notierst. Du musst es als Parameter übergeben:

onclick="schreibId(this);"

2. Wenn Du es so machst, ist this bereits ein DOM-Element und Du brauchst es nicht mehr mit getElementById zu ermitteln.

3. Verabschiede dich von document.write, es ist schwierig zu durchschauen. Definiere statt dessen eine Container und schreibe den Wert hinein.

So funktioniert es:

    <p id="test1" onclick="schreibId(this)"> HierClicken</p>
    <p id="test2" onclick="schreibId(this)"> HierClicken</p>
    <p id="output"></p>
    <script>
        function schreibId(ele) {
            var x = ele.id;
            output.innerHTML = x;
        }
    </script>

Das wäre überhaupt kein Problem. Poste ein Beispiel, wie die Tabelle aussieht, dann kann man dir sagen, wie es geht.

Zitat

kann mir jemand vielleicht eine Seite empfehlen wo ich mir so Grundlagen von null auf aneigne ?

Genau hier, wo dieses Forum ist, bist Du richtig:

https://www.html-seminar.de

Leider habe ich keine Ahnung von data driven documents oder Remote Access zu einer Sqlite-Datenbank. Vielleicht meldet sich da noch jemand anders. Ich werde aber versuchen, selber ein wenig zu recherchieren. Oder vielleicht kann dir auch der Entwickler helfen, der diese Datenbank administriert.

Zitat

Soll ich denn lieber ein neues Thema bezüglich responsive Darstellung aufmachen? Das passt ja nun nicht mehr ganz hier her.

Stimmt natürlich, könnte angebracht sein, ein neues Thema aufzumachen.

Zitat

Was meinst du mit auf der sps läuft ein Webserver?

Die Frage erübrigt sich, weil ich inzwischen gelernt habe, dass die Daten auf einem PC liegen und Du sie von dort holst.

Zitat

Ich geben das Format vor das sieht so aus:

JSON.parse('{ "name": ["Maschine1", "Maschine2", "Maschine3"], "geschwindigkeit": ["10", "5", "4"], "laenge": ["10", "8", "12"]}');

dieses Format wird wird auf dem server mit den aktuellen Daten bereitgestellt und ich greife dann dadrauf zu.

Das sind wichtige Informationen. Funktioniert der Zugriff bzw. das Holen der Daten schon? Und funktioniert das Aufbauen der Tabelle auch schon?
Wenn ja, brauchst Du ja nur noch ein wenig Javascript, um die Zellen abhängig von der Zeit einzufärben.

Ein paar Anmerkungen zum responsiven Verhalten. Ich habe mir etwas angesehen, was mir gleich aufgefallen ist: Bei section.bannerabout verschiebt sich der Text, wenn man das Browserfenster schmaler macht. Das liegt daran, dass die Position des Textes im p-Element mit margin und padding austariert wurde. Das passt nicht mehr, wenn man die Höhe durch eine Mediaquery verkleinert. Ich nehme an, dass Du diesen Text zentriert haben willst, horizontal und vertikal. Das geht sehr viel besser und einfacher mit Flexlayout:

.bannerabout {
    background-image: url(../images/Laptop.jpg);
    height: 400px;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
}

Und bei dem was drin ist, alles an Margin und Padding das der Ausrichtung diente, löschen.

Unter der Überschrift h2.parallax befindet sich ein leeres Element p.parallax_description. Ich nehme an, Du willst dieses noch ausfüllen und es soll unter der Überschrift liegen. Daher habe ich in dem CSS oben flex-direction:column verwendet.

Hast Du die Seite selber aufgebaut oder ein Template verwendet?

Hier hat uns die Vorlage in codepen einen Streich gespielt: Das CSS wirkt generell auf Button-Elemente. Die gibt es auch in der Ansicht von Google-Maps und entspr. taucht dort auch der Text "SENDEN" auf. Korrektur, in dem gezielt der Button mit der ID "button" angesprochen wird:

button#button {
  outline: none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius: 40px;
  background: #fff;
  border: 2px solid #1ECD97;
  color: #1ECD97;
  letter-spacing: 1px;
  text-shadow: 0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease; }
  button#button:hover {
    color: white;
    background: #1ECD97; }
  button#button:active {
    letter-spacing: 2px; }
  button#button:after {
    content: "SENDEN"; }

Zitat

Diese Daten werden auf einem PC (Server) gespeichert und von dem PC werden mir die Daten zur verfügung gestellt.

Lese ich erst jetzt. Das ist ja dann ganz etwas anderes. Auf welchem Wege und in welchem Format bekommst Du denn die Daten?

Ich vermutete eher, dass ein Webserver auf der SPS läuft. Wenn Du die Datenbausteine hast, verstehst Du auch was sie machen und wie sie funktionieren? Z. B. ob einer einen Webserver implementiert.

Wer entwickelt denn diese SPS? Oder ist das ein Standardprodukt? Gibt es dazu eine Dokumentation? Häufig läuft dann ein Webserver und man kann Daten über eine URL abfragen.

Das rot färben sollte kein Problem sein. Aber um deine Fragen zu beantworten, braucht es mehr Informationen:

• Ist das dein eigener Server? Oder ein Dienstleister, der die Daten zur Verfügung stellt?
• In welcher Form liegen die Daten vor? Datenbank, Textdatei CSV/JSON?

Datatables ist sehr mächtig und unterstützt auch das Laden der Daten durch Ajax und serverseitige Bearbeitung:

https://datatables.net

Wenn ich den ersten Fehler korrigiere, funktioniert es einwandfrei.

Möglicher Weise war da noch eine Variable undefiniert: $from beim Senden.

Senden der Mail auskommentiert.

<?php
    ini_set('display_errors', '1');
    error_reporting(E_ALL);

    if( !empty ($_POST['von']) && !empty($_POST['mail']) && !empty($_POST['nachricht']) ) {
    $empf = "info@blickpunkt-grafikdesign.de";
    $betreff = '=?UFT-8?B?'. base64_encode('Kontaktanfrage') . '?=';
            $von = htmlspecialchars(stripslashes(trim($_POST['von'])));
            $mail = htmlspecialchars(stripslashes(trim($_POST['mail'])));
            $text = htmlspecialchars(stripslashes(trim($_POST['nachricht'])));
            if (filter_var($mail, FILTER_VALIDATE_EMAIL)) {
                $headers = implode("\r\n", [
                    'MIME-Version: 1.0',
                    'Content-type: text/plain; charset=utf-8',
                    "From: {$von} <{$mail}>",
                    "Reply-To: {$mail}",
                    "Subject: {$betreff}",
                    'X-Mailer: PHP/' . phpversion()
                ]);
                if (TRUE /*mail($empf, $betreff, $text, $von)*/) {
                    echo '<p>Vielen Dank für Ihre Anfrage</p>';
                } else {
                    echo '<p>Beim Versand der E-Mail ist ein Fehler aufgetreten!</p>';
                }
            } else {
                echo '<p>E-Mail ungültig!</p>';
            }
       } else {
            echo '<p>Bitte füllen Sie alle Felder aus!</p>';
        }
       
    ?>

Zeile 9: Für das erste !empty fehlt die schließende runde Klammer.

Zeile 35: Folgefehler?

Bei diesem hier:

// @require    https://code.jquery.com/jquery-3.2.1.min.js
// @require    https://code.jquery.com/jquery-1.10.2.js
// @require    https://code.jquery.com/ui/1.11.4/jquery-ui.js
// @require    https://code.jquery.com/ui/1.1…/smoothness/jquery-ui.css
// @require    https://code.jquery.com/jquery-1.10.2.js

hast Du den Fehler gemacht, dass Du jQuery gleich drei Mal eingebunden hast. Das verhängnisvolle ist das letzte, weil dabei alles, was jQuery-UI und smoothness hinzu gefügt haben, verloren geht.

Bei dem Fiddle in dem ersten Posting musst Du jQuery einbinden. Du erkennst das, wenn du auf das Zahnradsymbol rechts oben im Javascript-Fenster klickst.

Außerdem jquery.table.nd - das erkennst Du in dem linken Fenster unter "External Resources".

Ja, bei mir hatte es funktioniert. Da ist ein Syntaxfehler im Javascript: Schließende geschweifte Klammer fehlt. So ist es richtig:

$(document).ready(function() { 
            // bind 'kontaktformular' and provide a simple callback function 
            $('#kontaktformular').ajaxForm(function(output) { 
                $("#response").html(output);
                $("#kontaktformular")[0].reset();
                if (output.indexOf("Bitte füllen Sie alle Felder aus") != -1) {
                    $("#button").addClass("wrong");
                }
            }); 
        });

Zitat

Ich hätten nun also gerne wenn der Kunde die Felder nicht ausfüllt und trotzdem auf senden klickt, dass der Button läd und dann allerdings rot wird und ein "X" erscheint statt dem Haken.

Oder ist das jetzt zu viel verlangt

Nein, ist nicht zuviel verlangt. Weil dabei alles zusammen spielen muss, habe ich eine Testdatei angelegt. Du musst dir das Notwendige heraus ziehen und vor allem den Namen der PHP-Datei durch deinen ersetzen.

<!doctype html>
<html>
<head>
    <title>Registrierung</title>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
    <section class="contact" id="contact">
        <div id="response"></div>
        <h3>KONTAKT</h3>
        <form id="myForm" method="post" action="ajaxform-blickpunkt.php">
            <input type="text" name="von" placeholder="Name" class="name" /><br />
            <br />
            <input type="text" name="mail" placeholder="E-Mail" class="mail" /><br />
            <br />
            <textarea name="nachricht" placeholder="Nachricht"></textarea>
            <br />
            <button type="submit" id="button"></button>
        </form>
    </section>

    <script>
        // wait for the DOM to be loaded
        $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
            $('#myForm').ajaxForm(function(output) {
                $("#response").html(output);
                $("#myForm")[0].reset();
                if (output.indexOf("Bitte füllen Sie alle Felder aus") != -1) {
                    $("#button").addClass("wrong");
                }
            });

            $( "#button" ).click(function() {
                $( "#button" ).addClass( "onclic", 250, validate);
            });
            function validate() {
                setTimeout(function() {
                    $( "#button" ).removeClass( "onclic" );
                    $( "#button" ).addClass( "validate", 450, callback );
                }, 2250 );
            }
            function callback() {
                setTimeout(function() {
                    $( "#button" ).removeClass( "validate wrong" );
                }, 1250 );
            }
        });
    </script>
    <style>
        button {
            outline: none;
            height: 40px;
            text-align: center;
            width: 130px;
            border-radius: 40px;
            background: #fff;
            border: 2px solid #1ECD97;
            color: #1ECD97;
            letter-spacing: 1px;
            text-shadow: 0;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.25s ease;
        }

            button:hover {
                color: white;
                background: #1ECD97;
            }

            button:active {
                letter-spacing: 2px;
            }

            button:after {
                content: "SUBMIT";
            }

        .onclic {
            width: 40px;
            border-color: #bbbbbb;
            border-width: 3px;
            font-size: 0;
            border-left-color: #1ECD97;
            animation: rotating 2s 0.25s linear infinite;
        }

            .onclic:after {
                content: "";
            }

            .onclic:hover {
                color: #1ECD97;
                background: white;
            }

        .validate {
            font-size: 13px;
            color: white;
            background: #1ECD97;
        }

            .validate:after {
                font-family: 'FontAwesome';
                content: "\f00c";
            }

        .validate.wrong {
            font-size: 13px;
            color: white;
            background-color: salmon !important;
            border-color: red;
        }

            .validate.wrong:after {
                font-family: 'FontAwesome';
                content: "\f00d";
            }

        @keyframes rotating {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</body>
</html>

Gute Nacht! Die nächste Frage kannst Du ja morgen stellen ...

Zitat

Genau das habe ich auch gesehen, dass es SCSS ist. Ich habe dann mit Dreamweaver eine neue SCSS Datei erstellt, den Code reinkopiert und als ich es gespeichert habe, kam eine Meldung das die Datei in CSS kompiliert wurde und ich hatte dann css und scss.

Tut mir Leid, ich hatte nicht damit gerechnet, dass Du dich mit SCSS auskennst. Ich selber nämlich so gut wie nicht.

Freut mich, dass es jetzt funktioniert.

Ja, Du kannst die Einzüge im Head lassen. Am besten auch die anderen dort hin bringen, dann ist es übersichtlicher.

Nein, ich meine auf der codepen-Seite das CSS. Das ist SCSS und muss kompiliert werden. Das habe ich mal gemacht und ein fiddle gemacht, daraus kannst Du das CSS kopieren:

http://jsfiddle.net/dtsLy10q/

Das codepen braucht noch eine Reihe mehr Einzüge, eine wahre Materialschlacht. Du musst dieses noch ergänzen:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.csss">