Verwandte Themen

Frage
von Lenny774
20.02.2023, 09:17
Mit Links
Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

LG

HTML, Webseite, CSS, JavaScript, Webdesign, Webentwicklung
1 Antwort
Frage
von LennartSBR
17.02.2023, 16:21
Mit Links
Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <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>
</body>


</html>
HTML, Webseite, CSS, JavaScript, HTML5, Webentwicklung
1 Antwort
Frage
von erikplayer1000
16.02.2023, 16:44
Mit Links
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
1 Antwort
Frage
von SFelix47
10.02.2023, 10:08
Mit Links
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
2 Antworten
Frage
von potatoheat
08.02.2023, 13:23
Ideen für Software-Architektur (gitlab, docker, js/ts)?

Hallo, .. wahrscheinlich ist das hier die Falsche Stelle um die Frage zu stellen aber ich versuche es trotzdem.

Ich habe mir ein Biotop aus Progammen (hier Serivces) in auf NodeJs geschaffen, von welchen jeder einzelne in seinem eigenen Docker-Container läuft. Damit die Services ihre Arbeit tun können, müssen sie auf Datenbanken, FTP-Server, etc. zugreifen.

Ich habe also hierfür eine Zentrale DB, wo die Konfigurationen (Eigenschaften, Zugangsdaten, etc.) für die einzelnen Ausprägungen der Services gespeichert sind. So ein Service-Container holt sich bei seiner Initialisierung den für seine Zwecke zugewiesene Konfiguration. Wenn nun Service1 irgendwas von Service2 anfragt, muss Service1 dem angefragten Service2 mitteilen, z.b. mit welcher DB Service2 arbeiten soll. Derzeit übergibt Service1 nun seine Konfiguration (wozu dann natürlich die Zugangsdaten gehören) an Service2.

Dies funktioniert soweit ganz gut.. nur macht es mir Bauchweh, wenn die Services die ganze Zeit Zugangsdaten bei jedem Request mitsenden müssen.

Wie könnte ich das besser machen? ich habe nun darüber nachgedacht, nur eine Referenz-ID mitzugeben und dann würde Service2 sich bei jedem Request die Zugangsdaten aus einer DB holen. Würde auch funktionieren mit geringen Performance-Einbußen. Nur finde ich irgendwie, ist das auch nicht das Gelbe vom Ei.

Nun meine Frage: Wie könnte ich das besser machen? Kann mir nur schwerlich vorstellen, dass keiner vor mir vor diesem Problem stand? Hat jemand Ideen?

JavaScript, Docker
1 Antwort
Frage
von schneckenschnel
07.02.2023, 17:29
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
2 Antworten
Frage
von Lenzer66u
25.01.2023, 09:15
Mit Links
Was mache ich falsch JavaScript?

Ich habe eine Datei mit allein zahlen von 1-100 in einem Array und will nur die letzten 20 es kommt aber immer ein Fehler.

Quellcode:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

window.setInterval("AutoUpdate()",parseInt(2000));  

function AutoUpdate()
{      
        $.ajaxSetup({ cache: false });
        $.get('LetzteZeilen.txt', function(data) 
        {   
            data = data.replace(/\n/g, "</br>");
            LetzteZeilen(data);
            if (data == 1) 
            {
                location.reload();
            }
        });     
}

function LetzteZeilen(data)
{
    Test = new Array();
    DataSplit = data.split("</br>");


    LetzteZeilen = 20;
    Laenge = DataSplit.length;
    NichtGewollteZeilen = (Laenge-LetzteZeilen);
    i = 0;
    x = 0;
    
    while (i < Laenge) 
    {
        if(i < NichtGewollteZeilen)
        {
            i++;
        }
        else
        {
            Test[x] = DataSplit[i];
            i++;
            x++;
        }
    }

    console.log(Test);
}
</script>

Fehler:
Uncaught TypeError: LetzteZeilen is not a function
    at Object.success (LetzteZeilenTest.php:16:13)
    at j (jquery.min.js:2:26911)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:27724)
    at x (jquery.min.js:4:11065)
Webseite, JavaScript, Programmiersprache, Webentwicklung
2 Antworten
Frage
von 83N07
20.01.2023, 22:56
Mit Links
Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js 

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

HTML, Webseite, JavaScript, PHP, Spotify
2 Antworten
Frage
von INformatik856
17.01.2023, 11:05
Frage wurde 1 Mal erneut gestellt
Mit Umfrage
Ist diese Bewerbung gut (Bei Verbesserungsvorschläge bitte scheiben)? (Informatik)?

Also ist die Grammatik und Rechtschreibung sowie Inhalt okay?

Bewerbung auf die Stelle „Ausbildung zum Fachinformatiker Systemintegration zum 01.08.2023

Sehr geehrte ......,

auf der Internetseite Azubiyo habe ich mit großem Interesse gesehen, dass Sie zum 01.08.2023 einen Ausbildungsplatz zum Fachinformatiker Systemintegration anbieten.

Zurzeit mache ich die Pflegeausbildung zur Pflegefachfrau. Der Schwerpunkt liegt aktuell im medizinischen Bereich, was mich auch interessiert, doch meine gesamte Schulzeit und Ausbildungszeit über begleitet mich eine große Leidenschaft für den mathematischen und den IT Bereich.

Der Umgang mit Menschen während meiner Praktika und Ausbildung im Krankenhaus und in Arztpraxen hat zu meiner Offenheit und Selbstständigkeit beigetragen. In diesem Umfeld habe ich zum einen die Patientinnen und Patienten über das weitere Vorgehen informiert, zum anderen konnte ich bei der Abrechnung von Privatleistungen unterstützen. Durch meine Sprachkenntnisse konnte ich Menschen die aus anderen Ländern kommen gut beraten und betreuen.

In der Europaschule konnte ich meine IT Kenntnisse verbessern und dort habe ich Programme wie Java kennengelernt und konnte mich mit codieren befassen. Auch habe ich mich dort mit dem Fachbereich Technik befasst. Diese Einblicke in die verschiedene Bereiche haben meinen Berufswunsch weiter gefestigt.

Ich freue mich, wenn ich vor Ausbildungsbeginn einen Praktikum bei Ihnen absolvieren dürfte, um meine oben genannte Fähigkeiten unter Beweis zu stellen.

Konnte ich Sie mit dieser Bewerbung überzeugen? Einen vertiefenden Eindruck gebe ich Ihnen gerne in einem persönlichen Gespräch. Ich freue mich über Ihre Einladung!

Mit freundlichen Grüßen

************

Das ist okay so 58%
Andere Meinung.... 25%
Nicht gut weil 17%
Deutsch, Mathematik, Technik, Bewerbung, IT, Java, JavaScript, Ausbildungsplatz, Grammatik, Informatik, Informatiker
7 Antworten

Meistgelesene Fragen zum Thema JavaScript
Mehr meistgelesene Fragen zu JavaScript