HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

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

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

4 Antworten

Quantm

17.05.2019, 08:51

Wenn du etwas unschärfer gestalten willst, dann hilft dir dieser Link:

https://www.w3schools.com/howto/howto_css_image_effects.asp

Ansonsten würde ich dir raten, mit Frameworks oder mit CSS Libraries wie Bootstrap etc zu arbeiten.

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

17.05.2019, 12:09

Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg.

Ohne Kenntniss des Inhalts der Elemente mit den id's 'myForm', 'overlay' und 'myForm2' wird dir kaum jemand helfen können.

Alex

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, JavaScript

17.05.2019, 08:52

Validiere bitte erst mal deinen Code und poste ihn dann hier korrekt. Dein zweiter Script-Aufruf ist falsch (type="text/javashttps…) und statt den HEAD-Element hast du HEADER genommen, was an dieser Stelle falsch ist.

Weiter habe ich dann gar nicht mehr geschaut.

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

JayC71

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

17.05.2019, 08:37

Gewöhne dir mal an den kompletten Code zu Posten - am besten in Pastebin.

Wer möchte schon diesen unvollständigen "Salat" auswerten....

Woher ich das weiß:Berufserfahrung – Software-Entwickler

Auf meiner Website programmiere ich ein Loginsystem, bei dem ich eine "Visibility-Funktion" (show/hide password) implementiert habe.

Immer wenn ich auf das Icon klicke, soll es die Eigenschaft: "display: none" annehmen, das andere Icon einblenden und den input-Tag auf: type="password" setzen, damit man das Eingegebene sieht.

Der Wechsel zwischen den zwei Icons funktioniert prima. Leider ändert sich der Input type nicht. Ich habe irgendeinen Fehler im Sourcecode, nur finde ich diesen nicht.

HTML:

<div class="login_element password">
  <i class="fa fa-lock password_lock" aria-hidden="true"></i>
  <input type="password" placeholder="password*" class="inputpassword" />
  <i class="fa fa-eye" id="show" aria-hidden="true" onclick="pwdvison()"></i>
  <i class="fa fa-eye-slash" id="hide" aria-hidden="true" onclick="pwdvison()"></i>
</div>

JS:

<script type="text/javascript">
  function pwdvison() {
    var x = document.getElementsByClassName("inputpassword");
    
    if (x.type === "password") {
      x.type = "text";
      document.getElementById('hide').style.display = "inline-block";
      document.getElementById('show').style.display = "none";
    }
    else {
      x.type = "password";
      document.getElementById('hide').style.display = "none";
      document.getElementById('show').style.display = "inline-block";
    }
  }
</script>

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zur Frage

Wie kann sich durch Javascript/HTML der Bereich A beim Aufklappen von Bereich B automatisch schließen, siehe CodeBSP?

Von Seitenanfang bis Head-Ende habe ich folgendes stehen, die spitzen klammern wurden im CodeBSP nicht angezeigt, stattdessen solch ein unverständlicher "& l t ;"-Quatschsinn:

html
    head
        title
            Meine Geichte-Bibliothek
        /title

        script type="text/javascript"
            function toggle(id){
                var e = document.getElementById(id);

                if (e.style.display == "none"){
                  e.style.display = "";
                } else {
                  e.style.display = "none";
                }
            }
        /script
    /head

Und folgendes CodeSP habe ich im BODY stehen:

a href="javascript:toggle('f0100')" I. Gedichte von Goethe /a  div id="f0100" style="display: none"

a href="javascript:toggle('f0101')" 01. Epirrhema /a  div id="f0101" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0102')" 02. Gefunden /a  div id="f0102" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0103')" 03. Erlkönig /a  div id="f0103" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0104')" 04. Das Göttliche /a  div id="f0104" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0105')" 05. Heydenröslein /a  div id="f0105" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0106')" 06. Osterspaziergang /a  div id="f0106" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0107')" 07. Prometheus /a  div id="f0107" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0108')" 08. Selige Sehnsucht /a  div id="f0108" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0109')" 09. Verschwiegenheit /a  div id="f0109" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0110')" 10. Willkommen und Abschied /a  div id="f0110" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0111')" 11. Zauberlehrling /a  div id="f0111" style="display: none" Text folgt /div  br

/div

Viele aufklappbare Gedichte stehen unter einem aufklappbaren Titel, dem Namen des jeweiligen Verfassers, wie Goethe, Schiller, Lessing usw. Wie kann ich es bewerkstelligen, dass sich beim Öffnen von Schiller der Bereich Goethe automatisch schließt, ohne auf irendwelcherlei externe .js-Dateien verlinken zu müssen? Ich gestehe, dass ich gewissermaßen, zumindest was JS-Belange angeht, eher ein ScriptKiddie bin. Ich habe auch einiges über Hover, also Drübergleiten mit Maus gelesen, aber um euch gegenüber ehrlich zu sein nur Bahnhof und Bratkartoffeln verstanden :(

Das habe ich denn nun davon, dass unser Informatik-Lehrer damals nur immer über Ufos und Verschörungstheorien fabulierte, anstatt uns handfesten Unterrichtsstoff über Javascript, jQuery und PHP einzuprügeln .. :// .. sniff

Falls mir jemand leicht erklärlich / verständlich da bei diesem Code helfen könnte, würde mich das wirklich S E H R freuen.

Liebe Grüße und ein schönes Wochenende.

@-}-}--- Matthias :)

...zur Frage

HTML, CSS, JS If-Statement wird erst nach Reload ausgeführt?

Hallo zusammen,

ich habe folgenden Code:

const radiomore = document.getElementById('qty-more');

const lower = document.getElementById('lower-section');

const more = document.getElementById('more-section');

if(radiomore.checked) {

lower.style.display = "none";

more.style.display = "initial";

} else {

lower.style.display = "initial";

more.style.display = "none";

}

Die Funktion wird allerdings erst ausgeführt, wenn ich die Seite manuell reloade.

Kennt jemand dafür eine Lösung?

Vorab Danke.

...zur Frage

Javascript in HTML einbinden - Problem?

Wie soll ich JS in HTML einbinden? Habe das immer so gemacht:
<script language="javascript" type="text/javascript" src="dateiname.js"></script>

Aber wenn ich dann z.B:

drawBoxes('yyy bbb ggg');

Mache, dann passiert in der HTML Seite garnichts.
LG

CSS in HTML einzubinden funktioniert letzterzeit komischerweise auch nicht. Muss das dann immer intern in der HTML-Datei machen.

...zur Frage

Tabellenbereiche ausklappen mit Javascript?

Guten Tag,

ich möchte Tabellenbereiche ausklappen. Kenne mich mit Javascript überhaupt nicht aus darum suchte ich nach einer Lösung im Internet. Ich fand folgendes:

<script type="text/javascript">
var angezeigt = false;
function versteckt()  {  if (angezeigt) { document.getElementById('ghost').style.display = 'none'; angezeigt = false; } else { document.getElementById('ghost').style.display = 'block'; angezeigt = true; } }

</script>
<table cellspacing="2" cellpadding="2" border="0"> 
<tr> 
    <td> 
     Dieser Bereich ist sichtbar (immer). 
    <br><br>Und <a href="#" onclick="versteckt()"> hier</a> blenden wir einen "versteckten" Bereich ein und aus! 
    </td> 
</tr> 
<tr> 
    <td style="display : none" id="ghost">Dieser Bereich kann ein-/ausgeblendet werden!</td> 
</tr> 
</table>

Nun gebe ich mit einer while Schleife in php mehrere Tabellenzeilen aus. Zu jeder Zeile möchte ich gern per Link eine weitere Zeile ausgeben und auch wieder schließen lassen. Mit dem hier vorliegenden ist es nicht möglich es öffnet sich nur die erste Zeile.

Da ich von Javascript nichts verstehe frage ich euch was ich hier ändern müsste?

Vielen Dank im Voraus

...zur Frage

JavaScript in HTML aufrufen?

Hallo zusammen
Ich brauche eure Hilfe, weil ich noch nicht viel mit JS gemacht habe.

Ich habe bis jetzt immer mein <script>-Tag mit Funktionen und Variablen in der HTML-Datei gehabt - hat immer funktioniert.

Jetzt will ich das <script>-Tag in eine eigene Datei ablegen.
Um das zu verschachteln und projektorientiert zu machen, dass man nicht für jede Seite die Funktionsänderung vornehmen muss.

Deswegen hab ich mit "<script src="/fileadmin/public/js/myScript.js"></script>" die JS-Datei in die HTML-Datei implementiert.

Mein Problem: Die Events führen nicht mehr aus.

Liegt das an daran, dass document.getElementById sich die ID aus dem internen dokument sucht?
Wie kriege ich, dass die ID von der HTML-Datei angesprochen werden?

Vielen Lieben Dank und liebe Grüße

...zur Frage

HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

...zur Frage

Dreieck ausgeben mit for schleife in Javascript?

Hallo,

ich wollte Fragen wie ich ein Dreieck ausgeben kann mit Javascript, dabei soll das Dreieck vorher mit einer Zahl mit "prompt" eingegeben und mit sternchen ausgegeben werden.

Am Ende sollte es so aussehen wenn man z.B. die Zahl 4 eingegeben hat:

***

****

Zurzeit habe ich schon einen Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
        function sterne(){
            var zahl = prompt("Zahl eingeben");
            for(var i =0; i <zahl; i++){
                ausgabe.innerHTML += "*" + "<br>";
            }
            
            document.querySelector('output').innerText = 
            "Anzahl der Zeilen: " + zahl;
        }
            </script>
        </head>
        <body onload="sterne()">
            <output></output>
            <br>
            <div id="ausgabe"></div>
        </body>
    </html>

Der mir das hier ausgibt:

Anzahl der Zeilen: <Zahl>

Ich vermute man braucht eine weitere For schleife oder ein if, könnte mir da jemand weiterhelfen? Danke für mögliche Antworten.

...zur Frage

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>

...zur Frage

[JavaScript] Wie kann ich ein Element von Anfang an unsichtbar machen?

Und nach einem erfolgreichem Login wieder sichtbar machen. Ich habe folgenden Code:

function getKey() {


  var visible = document.getElementById("download").style.display = "visible";
  var invisible = document.getElementById("download").style.display = "none";


  var key = "abc1";


  var keY = document.getElementById("key").value;


  if (key == keY) {
    visible;
    alert("r")


  } else {
    alert("w")
  }

Weder funktioniert er, noch wird das Element download wieder angezeigt.

...zur Frage

Clickfunnel: Wieso funktioniert nur jedes zweite JavaScript-Element?

Ich habe in meinem ClickFunnel vier JavaScript-Elemente. Sie sind nicht direkt hintereinander, aber genau gleich gecodet.

Es handelt sich dabei um Dropdown-Elemente.

Mein Problem ist, dass das erste und dritte Element problemlos funktioniert, aber das zweite und vierte nicht. Da kommt kein Dropdown, wenn ich darauf klicke, obwohl alle Elemente gleich gecodet sind.

Woran könnte das liegen? Stehen die einander vielleicht im Weg? Ich kann es auch leider nicht anders machen, da zwischen den Elementen Bilder sind, die dazu gehören.

Hier mein Code (HTML / JS) von einem Element:

<div class="all4">
  <div class="obj">
    <button class="Produkte" style="margin-right: 1vw;">Kompressor</button>
    <div class="panel">
      <p>
        Tankinhalt: 2 × 50 Liter</br>
        Energiequelle: Honda 4Takt GX200 bleifrei</br>
        Antrieb: Riemen</br>
        Atom. Standgas: Ja</br>
        Start: Zugseil</br>
        Abgabeleistung: 490 Liter Minute bei 12 bar</br>
        Abgabeleistung: 550 Liter Minute bei 6 bar</br>
        Max. Druck: 12 bar</br>
        Abmessungen: 95cm × 51cm × 85cm (ohne Transportgriffe)</br>
        Gewicht: ca. 75 Kg</br>
        Lärm: ca. 95 Db</br>
        Garantie: 1 Jahr</br>
      </p>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName("Produkte");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
          panel.style.display = "none";
        }
        else {
          panel.style.display = "block";
        }
      });
    }
  </script>

...zur Frage

HTML/JS Icon Link lädt zu lange?

Hey,

ich lade meine Icons über diesen Link:

<script src="https://kit.fontawesome.com/03a9efeaa3.js" crossorigin="anonymous"></script>

Dieser Link ist im head. Mein anderer script-Tag ist im body und lautet so:

<script type="module" src="./JS/main.js"></script>

Nun habe ich das Problem, dass wenn ich meine Seite neu lade, es lange lädt und dann abstürzt.

Die Konsolenausgabe sieht so aus:

Was kann ich tun?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen