[HTML/CSS] Nach Element Zeilenumbruch?

Ich möchte das immer maximal vier "app"-Elemente in "ads" in einer Zeile sind. egal wie viele ich dazugebe. Es soll automatisch immer nach dem vierten einen zeilenumbruch machen. Und die website soll sich dann anpassen, also man kann dann scrollen

CSS:

body, html {

    display: flex;
    margin: auto;

    flex-direction: column;


    width: 100%;
    height: 100%;

    background-color: cornsilk;
    font-family: Schoolbell;
}

.lowerpart {
    display: flex;
    flex-direction: row;
    justify-content: start;

    width: 100%;
    height: 50%;

    margin-top: 4%;

    /*border: blueviolet solid;*/
}

.ads {
    display: flex;
    flex-flow: column;
    align-content: space-between;
    flex-wrap: wrap;

    border: magenta solid;

    width: 100%;
    height: auto;
    margin-left: 10%;
    margin-right: 3%;
}

.app {
    border-style: solid;
    border-color: black;
    border-width: 3px;
    border-radius: 15px;

    width: 17%;
    height: 70%;

    display: inline;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
</head>
<body>
<section class="header">
    <div class="balance_checkout">
        <div class="balance">0,00$</div>
        <div class="checkout">CASH OUT</div>
    </div>

    <a class="profile">myprofile</a>
</section>

<section class="lowerpart">
    <section class="ads">
        <div class="app">
        </div>

        <div class="app">
        </div>

        <div class="app">
        </div>

        <div class="app">
        </div>

        <div class="app">
        </div>

    </section>
</section>
</body>
</html>
Computer, HTML, Programmieren, CSS, JavaScript, website erstellen, Websitegestaltung, Website Design, Website programmieren
2 Antworten
[HTML/CSS] Div funktioniert nicht in Section?

Guten Abend, wieso sehe ich den div-Block nicht?:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<section class="header">
</section>

<section class="lowerpart">
    <section class="categories">
    </section>

    <section class="ads">
        <div class="singleads">

        </div>
    </section>
</section>
</body>
</html>


CSS:
body, html {

    display: flex;
    margin: auto;
    flex-wrap: wrap;
    flex-direction: column;

    width: 100%;
    height: 100%;

    background-color: cornsilk;
    font-family: Schoolbell;
}

.moneyads {
    font-size: 350%;
    padding-left: 3%;
}



.header {
    margin-top: -1%;
    width: 100%;
    height: 15%;
    /*border: orangered solid;*/

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.lowerpart {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;

    /*border: blueviolet solid;*/
}

.categories {
    width: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;

    margin-left: 4%;
    margin-top: 3%;

    text-align: center;
    /*border: yellow solid;*/
}

.categories_title {
    /*letter-spacing: 4px;*/

    color: #ff3333;
    font-size: 40px;
}

.categories_choices {
    text-align: center;

    font-size: 30px;
    line-height: 150%;
}

.ads {
    display: flex;
    justify-content: center;
    flex-flow: row;
    align-content: flex-start;
    width: 100%;
    margin-left: 10%;


    border: magenta solid;
}

.singleads {
    border-style: solid;
    border-color: black;
    border-width: 3px;
}
  

Danke!

Computer, HTML, Webseite, Programmieren, CSS, Wordpress, JavaScript, website erstellen, Website Design
3 Antworten
404 Fehler bei AJAX Request: PHP-Datei wird nicht gefunden?

Folgendes:

Der Code, den ich in dieser Frage gepostet habe, habe ich minimal geändert (das PHP jetzt auch in eine separate Datei gepackt) und jetzt scheint der Button zu reagieren. So weit, so gut. Jetzt habe ich mir gedacht, dass es nützlich sein könnte, Fehler in einem alert auszugeben. Da ich nicht wusste, wie ich das anstelle, habe ich auch danach online gesucht und wurde fündig.

Nun zum eigentlichen Problem:

Mir wird ein 404-Fehler zurückgegeben, obwohl die Datei, die im Request angegeben wurde, existiert.

Ich habe auch dazu bereits im Internet nach Beiträgen gesucht und im weitesten Sinn ähnliche Beiträge gefunden. Aber keiner der Tipps, die ich dort gefunden habe, von denen ich der Meinung war, dass sie vielleicht helfen würde, hat etwas gebracht.

In einem der Kommentare (auf bspw. Stackoverflow) hieß es, man solle sich mit Werkzeugen wie Fiddler die Requests ansehen. Das habe ich gemacht, aber wirklich schlau werde ich daraus auch nicht.

Hier das JavaScript des Buttons:

<script>
  $(document).on('click', '#removeButton', function() {
    $.ajax({
      // type: "GET",
      url: "removeProject.php",
      // data: [id: selectedProjectID],
      success: function() {
        alert("Success");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert(jqXHR.status);
        alert(textStatus);
        alert(errorThrown);
      } // error
    }) // ajax
  }); // function
</script>

Hier der Inhalt der removeProject.php-Datei:

<?php
  require_once '../sqlGenerator.php';

  $dbh = new PDO("mysql:dbname=" . $db . ";host=localhost", $user, $pass);
  $query = "SELECT * FROM TABLE_SELECTED_PROJECT";
  $selectedProjectID = mysql_query($query);

  $sql = "DELETE FROM " . TABLE_PROJECT_NAME . " WHERE " . COL_PROJECT_ID . " = " . $selectedProjectID;

  try {
    $statement = $dbh->prepare($sql);
    $statement->execute();
  }
  catch (PDOException $e) {
    exit("Datenbank-Fehler: " . $e->getMessage());
  } // trycatch
?>

Am URL-Pfad kann es nicht liegen, da habe ich bereits alles Mögliche ausprobiert. Die Dateien befinden sich beide im gleichen Ordner.

Was könnte der Grund sein?

Computer, Technik, JavaScript, AJAX, PHP, Technologie
2 Antworten
API mit Formular von einer Webseite verbinden?

Guten Tag,

Ich versuche ein Formular mit einem E-Mail Marketing Programm zu verbinden. Und das E-Mail-Marketing-Programm hat mir eine API gegeben. Das Formular befindet sich auf meiner Webseite. In dieses Formular kann man den eignen Namen und die eigene E-Mail eingeben. Ich möchte diese Daten in ein E-Mail Marketing Programm mithilfe der API schicken. Ich habe aber keine Programmierkenntnisse. Ich habe bei Gutefrage.net eine Frage gestellt und als Antwort einen Link erhalten, der mich zu einer Webseite geschickt hat. Durch diese Webseite kam ich hier her: https://github.com/mailin-api/mailin-api-java/tree/master/V2.0/examples. Hier habe ich dann einen Link gefunden von dem ich das Java Script habe: https://apidocs.sendinblue.com/user/#5. Da ich eine Webseite mit Wix.com erstellt habe nutze ich Corvid um dieses Java Script einzufügen. Corvid bietet mir die Möglichkeit durch "Code for Page" dieses JavaScript einzufügen. Ich habe das dann bei der Seite des Formulares gemacht. In dieses Java Script habe ich dann nur noch meine API eingegeben. Und dann kam schon in der ersten Zeile die Fehlermeldung. "parsing error : unexpected token". Was noch eine Idee ist, dass ich die Eingabefelder für den Namen und die E-Mail mit der Datenbank verbinde, dir mir Wix.com bietet und ich dann halt die Datenbank mit der API verbinde. Aber, das wäre glaube ich mal ein Umweg. Ich hoffe, das ist alles verständlich genug.

Danke im Voraus

Computer, Technik, Programmieren, JavaScript, PHP, Technologie, JavaScript-Code, Javascript Codeproblem
1 Antwort
Wie kann ich per JavaScript auf ein PHP-Skript derselben Seite zugreifen, ohne die Seite neu zu laden?

Es geht um Folgendes:

Meiner Arbeitsgruppe wurde ein angefangenes Projekt übergeben, da angenommen wurde, dass alle bereit für etwas Anspruchsvolleres wären, als simple Einstiegsaufgaben. Ich soll nun ein Scrum Manager-Programm um die Funktion "Projekt löschen" erweitern.

Also, es soll auf den "REMOVE"- Teil zugegriffen werden, der den entsprechenden Eintrag in der Datenbank per projectID löscht. Dann soll der Benutzer auf projects.php weitergeleitet werden.

Der Manager benutzt Registerkarten (heißt das so?) für die einzelnen Seiten.

Hier der PHP-Teil, der Button und die entsprechende onClick-Funktion als kleine Übersicht, was an Relevantem bereits da ist.

// Project REMOVE
if (isset($_GET["selectedProjectID"]) && $intent == "removeProject") {
  $selectedProjectID = $_POST["selectedProjectID"];
  $sql = "DELETE FROM " . TABLE_PROJECT_NAME . " WHERE " . COL_PROJECT_ID . " = " . $selectedProjectID;

  try {
    $statement = $dbh->prepare($sql); $statement->execute();
  }
  catch (PDOException $e) {
    exit("Datenbank-Fehler: " . $e->getMessage());
  } // trycatch
} // if


// REMOVE
<button type="button" class="btn btn-secondary" id="removeButton">Remove</button>
<script>
  $(document).ready(function() {
    $("#removeButton").on("click", function() {
    } //onClick
  } //function
</script>

Bei dem PHP-Teil habe ich mich an bereits bestehende Teile des Skripts angelehnt, die sich auch mit dem Löschen von Einträgen befassen. Zu diesen Bestandteilen finde ich allerdings kein entsprechendes JavaScript bzw. AJAX oder was auch immer in diesem Fall nötig wäre.

Ich habe bereits online nach einer Lösung gesucht, aber nichts Passendes gefunden. Es scheint aber zumindest bei dem OK-Button zu funktionieren, also muss es irgendwie möglich sein, oder?

PS: Ich habe oft gelesen, dass man (für etwas ähnliches) AJAX braucht. AJAX ist mir absolut neu und ich habe kaum Erfahrung in PHP, deshalb bin ich hier etwas überfragt.

Kann mir vielleicht hier jemand helfen? Ich komme gar nicht voran und bin am Verzweifeln.

Computer, Technik, Programmieren, JavaScript, AJAX, PHP, Technologie
4 Antworten
PHP Button funktioniert nicht?

Guten Abend,

ich habe ein Problem, das ich auch nach längerem Recherchieren nicht lösen konnte.
Da ich hier nicht den ganzen Code posten möchte und das unnötig wäre, habe ich das Problem vereinfacht.

Wenn ich auf den Button "Bearbeiten" drücke, hebt sich das "readonly"-Attribut auf und ich kann das Inputfeld bearbeiten. Wenn ich daraufhin auf den Button "Speichern" drücke, ist das "readonly"-Attribut wieder aktiv. Das ganze mithilfe von Javascript.

Wenn ich aber auf den Button "Speichern" drücke, sollte auch etwas passieren (Vereinfacht: echo "Hallo";).
"Hallo" wird aber nicht angezeigt bzw. ausgegeben.
Wenn ich jetzt bei den beiden Buttons den Typ auf "Button" setze (type= "button"), wird zwar "Hallo" ausgegeben, aber das "readonly"-Attribut wird weder aufgehoben noch aktiv. Der Button "Bearbeiten" schaltet für einen Bruchteil einer Sekunde auf "Speichern" um und schaltet gleich wieder zurück. Aber "Hallo" wird ausgegeben.

Hier der Code:

<?php
session_start();

$_SESSION['geburtsdatum'] = "20.20.2020";

if(isset($_POST['savebutton'])){
  echo "Hallo";
  $_SESSION['geburtsdatum'] = $_POST['geburtstag'];
}
?>
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
  <script type="text/javascript">
  function removeAttr(){
    document.getElementsByName("editbutton")[0].style.display = "none";
    document.getElementsByName("savebutton")[0].style.display = "block";
    document.getElementsByName("geburtstag")[0].removeAttribute("readonly");
  }
  function setAttr(){
    document.getElementsByName("editbutton")[0].style.display = "block";
    document.getElementsByName("savebutton")[0].style.display = "none";
    document.getElementsByName("geburtstag")[0].readOnly = true;
  }
  </script>
</head>
<body>
  <label><b>Geburtsdatum</b></label>
  <form action="" method="post">
    <input id="geburtstag" type="text" value="<?php echo $_SESSION['geburtsdatum'];?>" name="geburtstag" readonly>
    <button id="editbutton" type="submit" value="submit" name="editbutton" onclick="removeAttr()">Bearbeiten</button>
    <button id="savebutton" type="submit" value="submit" name="savebutton" onclick="setAttr()" style="display:none;">Speichern</button>
  </form>
</body>
</html>

Danke für jede Hilfe.

Gruß
Leyonad

PC, Computer, HTML, Programmieren, JavaScript, Button, Informatik, PHP
3 Antworten
Dropdown-Animation mit CSS und HTML?

Hallo,

ich habe mir nun viele Videos bezüglich dieser Animation angesehen. In diesem wurde es für eine Navigationsleiste benutzt.

https://www.youtube.com/watch?v=burQkhA_s20&t=5s&ab_channel=Divinector

Ich möchte es aber für einen Anmeldebutton nutzen (siehe Foto). Mein Problem ist, dass das "Fenster" jedesmal verschwindet, bevor man überhaupt auf Anmelden drücken kann. Bei den Leuten der YouTube-Videos ist das nicht so.

Button mit Maus irgendwo:

Button mit "Fenster", mit Maus auf dem Logo:

Ich hoffe, ihr versteht mein Problem, sonst schreibt gerne.

Mein HTML-Code:

<div class="nav">
  <ul>
    <li><i class="far fa-user-circle"></i></li>
    <ul class="dropdown">
      <li>Anmelden</li>
    </ul>
  </ul>
</div>

Mein CSS-Code:

.nav {
  position: absolute;
  top: 82px;
  right: 23.5%;
  font-size: 20px;
}

.dropdown li {
  visibility: hidden;
  background-color: #ecf0f1;
  font-size: 15px;
  padding: 0px 5px;
}

.nav li:hover + .dropdown li {
  visibility: visible;
}

.nav li + .dropdown li {
  transform-style: top left;
  opacity: 0;
}

.nav li:hover + .dropdown li:nth-child(1) {
  animation: animate 500ms ease-in-out forwards;
  animation-delay: 0ms;
}

@keyframes animate {
  0% {
    opacity: 1;
    transform: translate(0px, 10px);
    color: white;
    height: 0px;
  }

  30% {
    color: white;
  }

  100% {
    opacity: 1;
    transform: translate(0px, 10px);
    height: 50px;
  }
}

Ich mache das noch nicht all zu lange und habe dadurch noch nicht so viel Ahnung. Vielleicht ist der Code auch total ineffizient und mit JS würde es viel leichter gehen. Ich bin aber gespannt auf mögliche Lösungsansätze.

Vielen Dank.

Dropdown-Animation mit CSS und HTML?
Computer, Website, Animation, HTML, Programmieren, CSS, JavaScript, JS
2 Antworten
Javascript onclick event funktioniert nicht mit gtag?

Hallo,

ich möchte ein Google Analytics Event auf meiner Seite einbauen und verzweifel seit 2 Stunden.

dieses ist der Code, den ich mit onclick losschicken möchte

gtag('event', 'remove_from_cart', {
  "items": [
    {
      "id": "P12345",
      "name": "Android Warhol T-Shirt",
      "list_name": "Search Results",
      "brand": "Google",
      "category": "Apparel/T-Shirts",
      "variant": "Black",
      "list_position": 1,
      "quantity": 2,
      "price": '2.0'
    }
  ]
});

eingebunden habe ich das so:
 
<a href="" onclick"gtag('event', 'remove_from_cart', {
  "items": [
    {
      "id": "P12345",
      "name": "Android Warhol T-Shirt",
      "list_name": "Search Results",
      "brand": "Google",
      "category": "Apparel/T-Shirts",
      "variant": "Black",
      "list_position": 1,
      "quantity": 2,
      "price": '2.0'
    }
  ]
});">

Ich vermute, dass es an den Anführungszeichen liegt, da Firefox und Chrome immer merkwürdigen Code aus meinem erstellt.

<a href="" onclick="

gtag('event', 'remove_from_cart', {

 " items":="" [="" {="" "id":="" "p12345d",="" "name":="" "android="" warhol="" t-shirt",="" "list_name":="" "search="" results",="" "brand":="" "google",="" "category":="" "apparel="" t-shirts",="" "variant":="" "black",="" "list_position":="" 1,="" "quantity":="" 2,="" "price":="" '2.0'="" }="" ]="" });="" "=""><i class="icon-cancel"></i></a>

Kann mir jemand helfen?
Vielen Dank

JavaScript
1 Antwort
AJAX Request funktioniert nicht?

Schönen guten Abend allerseits,

Ich habe versucht, einen kleinen AJAX Request an ein PHP-Skript zu machen. Dabei soll per post Methode ein Text an das PHP-Skript übergeben werden, der in diesem Falle einfach Hello World ist.

Das PHP-Skript, dass einfach den Wert von $_POST['message'] (also den übergebenen Wert) ausgeben soll, erkennt diesen nicht.

Hier der Ausschnitt meines AJAX Requests an das PHP Skript:

...
<script>
        var requestBtn = document.querySelector('#request-btn');
        
        requestBtn.addEventListener('click', function() {
            var request = new XMLHttpRequest();


            request.open('post', 'file.php', true);
            request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            request.send('message=Hello World');


            request.onreadystatechange = function() {
                if(this.readyState == 4 && this.status == 200) {
                    alert(this.responseText);
                }
            };
        }); 
</script>
...

Und hier das ganz simple PHP-Skript:

<?php 
    echo $_POST['message'];
?>

Ich hoffe, dass mir jemand von euch weiterhelfen kann!

Ich nutze übrigens die neueste Version des Firefox-Browsers.

LG

Computer, Website, Programmieren, JavaScript, Programmierung, AJAX, PHP
3 Antworten
CSS Performance + korrekter Syntax?

Also ich habe ein paar Fragen dazu wie man damit ambesten umgeht, im Internet hab ich schon alles Mögliche gelesen aber sicher bin ich mir nicht.

Ich habe mal gehört das es besser wäre alle Elemente nur mit Klassen (.header) anzusprechen statt IDs (#header) oder Attribute (a[name=header]) oder (.header a) zu nutzen. Aber so ganz durchblicken kann ich da nicht. Ist es schlecht wenn immer wieder CSS Werte überschrieben werden und man manchmal !important nutzen muss? Und klar ich weiß #ids sollte man jeweils nur nehmen wenn es nur ein Element mit dieser pro Seite gibt...

Auch gibt es ja noch diese Kombinatoren wie (< ~ ^ $ + usw.) und Pseudoklassen (:hover, ::before). Ich weiß nicht was man davon nutzen sollte, das die CPU oder Internetleitung des Nutzer nicht streikt.

Ist es generell besser HTML oder CSS zusparen oder mehr darauf achten das css direkt die Elemente anspricht?

Wie prüfe ich ambesten ob Mobile oder Desktop? Getrenntes CSS oder @media oder sogar getrennte Subdomain (zB. m.domain.com)?

Also kurz gesagt welche Tipps, Erfahrungen könnt ihr mir geben damit mein Webprojekt langlebig, schnell im laden, kompatibel und professionell wird?

Ja ich weiß viele Fragen 😂

Vielen Lieben Dank im Voraus :)

PC, Computer, Internet, Software, Browser, Website, Technik, Programm, HTML, Webseite, Programmieren, Design, CSS, JavaScript, developer, Domain, Performance, syntax, Technologie, Webentwicklung
2 Antworten

Meistgelesene Fragen zum Thema JavaScript