Webentwicklung – die neusten Beiträge

JavaScript: fetch API Fehler - Anfrage wegen CORS blockiert?

Hi,

ein Freund von mir ist großer Fan von dem Format "Barsch'sche Filosofie", das auf SWR3 läuft. Es ist aber etwas umständlich, sich auf deren Seite durch die ganzen Witze durchzuklicken, vor allem, weil man so nicht sieht, was alles drin ist.

Ich habe erst vor ein paar Wochen begonnen, JavaScript richtig zu lernen und dachte mir, zu Übungszwecken probiere ich mal, damit eine Auflistung mit allen Witzen zu ermöglichen.

Essentiell hierbei ist für mich, dass mit jedem Seitenaufruf meines HTML-Dokuments die Filosofie-Webseite "abgefragt" wird (simples GET-Request), damit auch neue Sachen beim abrufen mit dabei sind, wenn die SWR-Redaktion neue einstellt. Das mache ich mit fetch(). Es funktioniert auch alles soweit super, es gibt nur ein Problem:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://www.swr3.de/comedy/barschsche-filosofie-100.html. (Grund: CORS-Anfrage war nicht http).

Mit CORS habe ich mich bislang noch nicht wirklich auseinandergesetzt, aber laut mdn liegt es an einem fehlenden Header in der Server-Response? Auf die hab ich in diesem Fall wohl keinen großen Einfluss...

Wenn ich schreibe, dass alles soweit super funktioniert, dann meine ich damit, dass es manchmal geht, manchmal aber nicht. In letzterem Fall bekomme ich diese Fehlermeldung. Das versuche ich momentan zu beheben. Kann mir jemand weiterhelfen?

Bild zum Beitrag
Webseite, programmieren, JavaScript, Webentwicklung

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung, Frontend

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>
Bild zum Beitrag
PC, Computer, Programm, HTML, Webseite, programmieren, CSS, Java, JavaScript, HTML5, Hacking, Informatik, JQuery, PHP, Programmiersprache, Python, Softwareentwicklung, Technologie, Webdesign, Webentwicklung, Visual Studio Code, Frontend-Entwicklung

Wie kann ich diesen HTML Vorgang stoppen?

Ich würde gerne einen HTML-Vorgang stoppen, wenn eine Voraussetzung in Java Skript nicht erfüllt ist:

Ich arbeite mit formsubmit.co und kann auf meiner Webseite nicht mit PHP arbeiten. Bis jetzt habe folgenden Code:

<form action="https://formsubmit.co/email@gutefrage.de" method="post" onsubmit="validateEmail()">
    <input type="hidden" name="_autoresponse" value=
    "Hallo, du hast diese Email bekommen. " />
    <input type="hidden" name="_next" value="https://www.gutefrage.net/" /> 
    <input type="email" id="email" name="email" placeholder="Email Address" /> 
    <label class="container"><input type="checkbox" required/>Ich habe die Nutzungsbedinungen gelesen.</label> 
    <button type="submit">Send</button>
</form>


<script>
/* <![CDATA[ */
      function validateEmail() {
        const email = document.getElementById("email").value;
        if (email.includes("200") && email.includes("Frage") && email.length >= 20) {
          alert("Valid email address.");
          return true;
        } else {
          alert("Invalid email address.");
          return false;
        }
      }
/*]]>*/
</script>

Das Skript überprüft die Eingabe der E-Mail Adresse, sofern alle Felder eingegeben sind und das Formular abgesendet wurde, ob die eingegebene E-Mail-Adresse "100", "Frage" und grösser oder gleich 20 Zeichen lang ist. Auf einer Nachricht im Browser wird angezeigt, ob die E-Mail-Adresse den Voraussetzungen entspricht oder nicht. Anschließend wird die Nachricht "Hallo, du hast diese E-Mail bekommen." an die eingegebene E-Mail-Adresse gesendet (das übernimmt formsubmit.co). Anschließend wird der Nutzer auf Gute Frage weitergeleitet.

Beides Funktioniert einwandfrei, jedoch wird, egal ob die E-Mail die Voraussetzungen erfüllt oder nicht, an die angegebene E-Mail gesendet.

Meine Frage ist, ob ich die Aktion in HTML irgendwie stoppen kann, also das die E-Mail nicht versendet wird, wenn sie die Voraussetzungen in JavaScript nicht erfüllt. Dabei kann ich keine riesigen Änderungen am gegebenen HTML-Code von formsubmit unternehmen (da dies ja immer noch funktionieren sollte) und ohne PHP oder ähnliches.

Edit: Das mit der Erkennung funktioniert irgendwie auch nicht, es zeigt immer an, dass die Email die Voraussetzungen nicht erfüllt. Ich habe jedoch ein Beispiel, wo dies funktioniert:

<form onsubmit="return validateEmail()" method="post">
    <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="z.B. ichbincool@email.com" size="40" required="" /> <input type="submit" value="senden" required="" />
</form>
<script>
/* <![CDATA[ */
      function validateEmail() {
        const email = document.getElementById("email").value;
        if (email.includes("ich") && email.includes("cool") && email.length >= 5) {
          alert("Valid email address.");
          return true;
        } else {
          alert("Invalid email address.");
          return false;
        }
      }
/*]]>*/
</script>   
HTML, Webseite, programmieren, JavaScript, Programmiersprache, Webentwicklung, Webseitenoptimierung

Wie kann ich iframe Cookies speichern?

Hallo zusammen, ich bin neu hier im Forum und hoffe, dass meine Frage / mein Problem hier richtig platziert ist: ich möchte für eine Auftragsarbeit (Insektenschutz-Website) eine Website mit einem iframe der url https://www.neher.de/produkte erstellen.

Zur Erstellung nutze ich bootstrap. Den iframe habe ich in die html eingebunden, es wird auch alles angezeigt und geladen - so weit so gut.

Jetzt ist es aber so, dass auf der eingebundenen neher.de Website Cookies abgefragt werden. Wie schaffe ich es möglichst mit JavaScript diese Cookies zu speichern?

Sonst muss ich ja wenn ich z.B. auf das Produkt "Pendeltür" klicke, wieder die Cookies akzeptieren, obwohl ich das ja schon getan habe - ich hoffe ihr versteht was ich damit meine.

Leider habe ich keine Ahnung von JS - ich hoffe es kann mir hier jemand helfen.

Schon mal vielen Dank dafür - VG Felix

Das ist der html Code:

<!DOCTYPE html><html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="bootstrap.css" />
    <style> main iframe { width: 100%; height: 65vh; }</style>
  </head>
  <body>
    <main>
      <iframe src="https://www.neher.de/produkte" frameborder="0></iframe>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
       crossorigin="anonymous"></script>
    </main>
  </body>
</html>
Webseite, JavaScript, Webentwicklung

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

<link rel="stylesheet" href="style.css">
<?php
$db = unserialize(file_get_contents('data.php'));
if($db == false){
        $db = array();
}
if($_POST['mail'] == ''){
        if($_POST['name'] == ''){
                if($_POST['pass'] == ''){a
                        if(!array_key_exists($_POST['mail'], $db){
                                $db[$_POST['mail']] = [$_POST['name'], []];
                                file_put_contents('data.php', serialize($db));
                        } 
                }
        }
}
?>
<form action="" method="post">
    <center>
        <label for="firma_name" >name:</label><br>
        <input type="text" class="input" name="name" autocomplete="off"><br>
        <label for="produkte">email:</label><br>
        <input type="text"  class="input" name="mail" autocomplete="off"><br>
        <label for="adresse">pass:</label><br>
        <input type="text"  class="input" name="pass" autocomplete="off"><br>
        <input type="submit" class="anmelde_button" value="anmelden">
    </center>
</form>

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

HTML, Webseite, CSS, JavaScript, HTML5, Datenbank, JQuery, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung, phpMyAdmin

warum funktioniert dieses xslt script nur im Internet Explorer abere nicht in chrome oder edge?

Hallo,

ich habe ein XSLT Script das eine xml zu einer Tabelle umformen soll. Das Script funktioniert nur in IE11 aber nicht in den anderen Browsern.

...

$index_file="index_station.php";

...

echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
echo '<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" >';
?>
<xsl:stylesheet version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  
    xmlns:js="http://www.w3.org/1999/xhtml">
<xsl:template match="/">
 

...
      <?php include "index_station_checkbox.php"; ?>
      <hr/>   
      </td></tr>
         <xsl:apply-templates select="KKHABG/PATIENT">
         <xsl:sort select="<?php echo $xmlsort; ?>" />
         </xsl:apply-templates>
        </TABLE> 
     </BODY>
  </HTML>
</xsl:template>

<xsl:template match="PATIENT">
   <tr>
   <td valign="top" class="patientname">
      <xsl:element name="a">
      <xsl:attribute name="href">
      <xsl:value-of select="PatID/@VALUE"/>
      </xsl:attribute>
      <xsl:value-of select="nachname"/>, <xsl:value-of select="vorname"/>
      </xsl:element>
      <br/><xsl:value-of select="alter"/> - Zi./Bett: <xsl:value-of select="FALL/Behand/ort"/></td>
      <td valign="top" widht="100%">
      <table class="befund">
         <xsl:apply-templates select="FALL/Befund" >
         <xsl:sort select="BefZeit" order="descending"/>
         </xsl:apply-templates>   
      </table>
   </td>
   </tr>
   <tr><td colspan="2"><hr/></td></tr>
</xsl:template>

<xsl:template match="FALL/Befund">
<xsl:if test="<?php echo $sourcexml; ?>">
   <tr>
   <td valign="top" width="100px"><xsl:value-of select="Source"/></td>
   <td valign="top" width="40px">
      <div class="tooltip">
      <xsl:element name="a">
      <xsl:attribute name="href">
      <xsl:value-of select="ID/@ZIEL"/>
      <?php echo $var.'&amp;befart='.$befart.'&amp;befundid=';?><xsl:value-of select="ID/@VALUE"/>
      </xsl:attribute>
      <b><xsl:value-of select="ID"/></b>
      </xsl:element>
      <span class="tooltiptext2"><xsl:value-of select="ID/@TOOLTIP"/>      
      </span>
      </div>
   </td>   
   <td valign="top" width="150px"><xsl:value-of select="BefZeit"/></td>
   <td valign="top">
      <div class="tooltip">
      <xsl:choose>
      <xsl:when test="BefArt/@VALUE">
      <xsl:element name="a">
      <xsl:attribute name="href">
      <xsl:value-of select="BefArt/@VALUE"/>
      </xsl:attribute>
      <xsl:attribute name="target" >_blank</xsl:attribute>
      <b><xsl:value-of select="BefArt"/></b>
      </xsl:element>
      </xsl:when>
      <xsl:otherwise>
      <b><xsl:value-of select="BefArt"/></b>   
      </xsl:otherwise>
      </xsl:choose>
      <span class="tooltiptext">
         <!-- <b><xsl:value-of select="BefArt"/></b><br/> /-->
         <xsl:value-of select="BefText" disable-output-escaping="yes"/>
         <br/><br/>
      </span>
      </div>
      </td>
   </tr>
   </xsl:if>
</xsl:template>
</xsl:stylesheet>
HTML, PHP, Webentwicklung, XML

Meistgelesene Beiträge zum Thema Webentwicklung