Text nach 5 Sekunden einblenden lassen - Ninja Forms / WP?

Hallo Community ))

Wie kann ich einen Text (Div, p usw) nach einer bestimmten Zeit einblenden lassen?

Die Plattform ist Wordpress (Theme Jupiter) - kann CSS und JS benutzen

Der Text befindet sich in einem Ninja Forms Anfrageformular

<div id="fadein-id" class="fadein-cl" align="center">Daten aufgenommen, klicken Sie nun auf Weiter!</div>

Danke für eure Hilfe

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

CSS

11.11.2020, 21:21

Ich nehme einmal an, die Klasse fadein-cl kommt von dir.

Dann bräuchtest du nur dieses CSS ergänzen:

.fadein-cl {
  animation: fadeIn ease 5s;
}

@keyframes fadeIn {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

Bezüglich des align-Attributs noch eine Anmerkung: Das ist deprecated. Du solltest es nicht mehr benutzen.

Die CSS-Lösung könnte so aussehen:

.centered-text {
  text-align: center;
}

Dem div wird folgendermaßen noch der Klassenselektor zugeordnet:

<div id="fadein-id" class="fadein-cl centered-text">Daten aufgenommen, klicken Sie nun auf Weiter!</div>

Ähnliche Fragen

text-align:center; funktioniert nicht?

Ich versuche schon seit geraumer Zeit dieses Problem zu lösen, doch ich komme einfach nicht dahinter, vielleicht kann mir hier jemand netterweise bei meinem Problem weiterhelfen.

<!DOCTYPE html>                             
<style>
  body{
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
  
 #top{
  text-align: center;
 } 
  
 #logo{
    color:rgb(255, 255, 255);
    background-color: crimson;
    display: inline-flex;
    font-size: 32px;
    font-weight: bold;
    padding: 8px;
    margin-top: 16px;
  }
  #logo-name {
font-size: 32px;
font-weight: bold;
margin: 16px;
text-align: center;
  }
</style>
<html>
  <head>
<title> Homepage </title>
  </head>
<body>
  <div id="top"></div>
  <div id="logo">OH</div>
  <div id="logo-name">Homepage</div>
  <div id="main"></div>
  <div id="footer"></div>
</body>
</html>

...zur Frage

Zweitsprachige Webseite mit JS?

Ist es besser eine extra Seite für die zweite Sprache meiner Website zu machen also seite.com und seite.com/de, oder wäre es besser, die Texte direkt mit Js zu machen. Also wenn einer mit der Browsersprache Deutsch die Webseite betritt, soll Js es ermitteln und dementsprechend den Text einblenden ohne eine zweite Seite. Was wäre besser

...zur Frage

Menü margin geht nicht?

Hallo,

ich habe folgenden Code:

HTML:

<div id="menu">
            <a href="euro-franken.html">Euro in Schweizer Franken</a>
            <a href="euro-krone.html">Euro in Schweizer Franken</a>
            <a href="euro-pfund.html">Euro in Schweizer Franken</a>
    </div>

CSS:

#menu {
  width: 45%;
  padding: 20px;
  display: none;
  min-height: 100%;
  background-color: rgb(71, 91, 107);
  position: fixed;
  z-index: 2;
  animation: fadeIn 0.8s;
}


@keyframes fadeIn {
  from {
    width: 0%;
  }
  to {
    width: 45%;
  }
}


#menu a {
  text-decoration: none;
  color: white;
  text-align: left;
  margin-bottom: 50px;
  border: 2px solid black;
  }

Nun macht der aber kein Abstand zwischen den Links. Warum nicht?

...zur Frage

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"; <---
}

...zur Frage

Wie kann ich in HTML den Text im Rahmen die Schriftart ändern?

Hallo,

ich möchte in html von dem Text der im Rahmen ist, die Schriftart ändern.

Irgendwie klappt das nicht so.

@font-face {

font-family: "Germanica";

src: url("Schrift/germanica/Shadowed Germanica.ttf");

}

#id1 { margin-left: 170px;}

<div id="id1"><div align="center"><p style="font-family:Germanica"><p class="outset"><br><font size="7"><strong>Test </font></strong><br><br> <font size="5"><strong> Der Absatz </font></strong> <br><br></p></div>

...zur Frage

JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!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>
    <link href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();

...zur Frage

Button mittig unter Bild Zentrieren HTML/CSS?

Hallo erstmal, ich bin komplett neu hier also bitte entschuldigt, falls ich irgendwas nicht richtig beachte. Zu meiner Frage: Ich möchte für eine Portfolio Site Vorschaubilder einer Gallery haben und darunter einen Zentrierten Button für den Link zu der jeweiligen Seite. Mein Problem ist jetzt, dass der Button sich leider nicht zentrieren lässt sondern immer links gebunden ist.

Mein HTML Code:

<section id="content">
<div>
<div id="studio"> 
<img src="img/Gallery_Preview/Studio.jpg" alt="Studio Aufnahmen">
<p><a class="button1" href="Studio.html">Studio</a></p>
</div>
</div>
</section>

Mein Css Code:

#studio {
margin: 30px ;
padding:4px;

}
#studio img {
width: 23%;
height: auto;
}
.button1 {
text-align: center;
width: 100%; 
}

P.s. ich bin Anfänger

Danke schon mal

...zur Frage

Html CSS Suchleiste, hilfe?

Der Code unten ist eine Suchleiste die sich erweitert wenn man auf das search icon klickt,

das Problem ist das dann kein hellgrauer text in dem input feld steht bevor man was getippt hat.

wie zum beispiel auf gutefrage.net "Suche nach Fragen,Themen und Nutzern" und wenn man was eintippt verschwindet es.

Kann das jemand hinzufügen sodass es auch einen text im input hat,

wenn ihr Hallo oder sowas da reinschreibt seh ich schon wo ich das selber machen.

<!-- Expandable Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
      <i class="material-icons">search</i>
    </label>
    <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" id="sample6">
      <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
    </div>
  </div>
</form>

...zur Frage

Positionierung von Pfeilen in Flexboxen?

Hallo,

ich wollte bei meiner Website eine kleine Slideshow einbauen. Dazu habe ich erst einmal Pfeile erstellt. Diese wollte ich nun richtig positionieren. Ich hatte die Idee, eine Flexbox um die Bilder mit den Pfeilen zu erstellen und die Pfeile dann einfach mit align-items zu positionieren. Irgendetwas habe ich allerdings falsch gemacht. Vielleicht fällt euch ja mein Fehler auf. Bin für jeden Tipp dankbar.

html:

<div class="slide">
            <div id="footer2">
                <div id="bilder">
                    <div id="flexbox">
                        <div class="post">
                            <img src="wohnzimmer.png" alt="Wohnzimmer">
                            <div class="post-s">
                                <h2>Einbaumöbel</h2>
                            </div>
                        </div>
                        <div class="post1">
                            <img src="badezimmer.png" alt="Badezimmer">
                            <div class="post1-s">
                                <h2>Badmöbel</h2>
                            </div>
                        </div>
                        <div class="post2">    
                            <img src="einbauschränke.png" alt="Einbauschränke">
                            <div class="post2-s">
                                <h2>Einbauschränke</h2>
                            </div>
                        </div>
                    </div>
                    <div class="post3">
                        <img src="hochbett.png" alt="Hochbett">
                        <div class="post3-s">
                            <h2>Kinderhochbetten in Eichemassivholz</h2>
                        </div>
                    </div>
    
                    </div> 
                    
                </div>
                <a class="pfeil pfeil-links"><span>&#10094;</span></a>
                <a class="pfeil pfeil-rechts"><span>&#10095;</span></a>
            </div> 
        </div>

Css:

.slide{
    display: flex;
    border: solid black;
}
.pfeil {
    position: absolute;
    top: 0px;
    bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;
}

...zur Frage

Über PHP HTML Quellcode auslesen und in Variable speichern?

Hallo,

Kennt jemand eine Möglichkeit wie ich mit PHP einen bestimmten Teil HTML Quellcode aus der gerade geöffneten Seite/oder generell aus einer Datei auslesen kann und diesen dann als Text in einer ganz normalen PHP Variablen speichern kann.

Mit bestimmten Teil meine ich zum Beispiel alles was in einem Element wie einem div mit einer bestimmten id steht.

Zum Beispiel dieser HTML Code:

<body>
  <div id="Div1">
      <h1> Nicht dieses Div </h1>
  </div>

  <div id="Div2">
      <h1> Dieses Div </h1>
  </div>

  <div id="Div3">
      <h1> Nicht dieses Div </h1>
  </div>
</body>

Wenn ich dann den Inhalt von Div2 in eine PHP Variable schreiben wil soll in der Variable: "<h1> Dieses Div </h1>" stehen.

Ich hoffe meine Frage ist verständlich und jemand kennt eine Lösung.

Vielen Dank im voraus :D

...zur Frage

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zur Frage

[HTML/CSS] Zwei Form Elemente nebeneinander in die Mitte des Bildschirms?

Hallo Leute, ich würde gerne meine beiden Input Elemente nebeneinander in die Mitte des Bildschirms haben. Habe schon versucht ein DIV außenrum zu erstellen und diesem text-align:center zu geben. Hat leider nicht geholfen.

Mein Code:

<div class="upperForm form-row">
  <div class="form-group">
    <label for="name1">Name</label>
    <input type="text" class="form-control main-input" id="name1" placeholder="">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control main-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
</div>

...zur Frage

Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

...zur Frage

Wie kann ich mit JS ein div mit der zugehörigen ID erstellen?

Ich habe das Problem, dass ich mit dem Befehl:

document.getElementById("main_div").innnerHTML = "<div></div>"

ein neues div-Element (auf einer bereits leeren Seite) erstellen möchte. Das hat mit dem obenstehenden Befehl auch gut geklappt. Jetzt wollte ich aber dem div noch eine ID hinzufügen. Das habe ich wie folgt versucht:

document.getElementById("main_div").innnerHTML = "<div id="evaluation"></div>"

Das hat nicht geklappt. Ich gehe davon aus, dass das Problem bei den gedoppelten Anführungsstrichen liegt.

Gibt es dafür eine Lösung?

Danke im Voraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen