Wie erstelle ich eine wechselnde Textanzeige?

Hallo!

Ich möchte gern in meinem RPG-Forum eine Anzeige einrichten, in der Zitate angezeigt werden, aus den Texten der User. Diese Texte sollen nach einiger Zeit (egal ob eigenständig oder auf Mausklick) wieder verschwinden und ein neues Zitat soll erscheinen. Hat jemand eine Idee, wie ich das machen kann?

MfG Leo

4 Antworten

stboy

21.02.2017, 17:05

Ich weiß zwar nicht, wie dein Forum aufgebaut ist, würde aber folgendes versuchen:

Die eigentliche Darstellung praktiziert man am besten in einem passenden Carousel/ Slider, die oft bereits kostenlos zur Verfügung gestellt werden, z.B.:

https://dcrazed.com/free-responsive-jquery-carousel-slider-plugins/

Je nachdem welchen man wählt, muss man nun natürlich, das Plugin einbinden und die sonstigen Voraussetzungen, wie JQuery, erfüllen. Danach kann man den passenden Code per PHP auf den gewünschten Seiten mit entsprechenden Daten zusammenstellen lassen.

LeoMoran

Fragesteller

22.02.2017, 00:20

Das sieht echt gut aus und ich werde mich auf jeden Fall auf der Seite rumlesen (: Danke dir!

sabrinaseidel

21.02.2017, 17:21

Hallo Leo,

das kannst Du mit Javascript und einem Timeout ganz einfach lösen.

Habe hier einen kleinen Test für Dich eingerichtet:
https://jsfiddle.net/15wj3rw1/1/

Viele Grüße
Sabrina

LeoMoran

Fragesteller

22.02.2017, 00:19

Das sieht super aus, vielen Dank! (:

abbrechen

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

21.02.2017, 19:17

Ohne zu wissen, was für ein System du benutzt, kann man lediglich rumraten, daher nur so viel: Benutze einen each loop.

LeoMoran

Fragesteller

22.02.2017, 00:19

Danke, mit Stichworten ist mir auf jeden Fall schonmal geholfen! (:

Kieselsaeure

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

22.02.2017, 07:02

Mit der window.setInterval funktion

Hallo zusammen,

ich habe beschäftige mich nun seit etwa einer Woche mit dem Erstellen von Webseiten und wollte mal den ersten Schritt wagen und eine Seite erstellen. Spontan bin ich auf die Idee gekommen eine Art Nachrichten Seite zu erstellen und treffe nun auf folgendes Problem: Ich möchte durch das Anklicken der einzelnen Punkte in der Navigationsleiste den Inhalt des Iframes wechseln lassen, weiß aber leider nicht wie ich das anstellen soll.

(Kann bisher nur mit HTML und CSS etwas anfangen, falls jemand einen Lösungsvorschlag mit JavaScript hat, wäre ich sehr dankbar für eine Erklärung!)

...zur Frage

Nicht akzeptieren button?

Ist der Nicht-akzeptieren Button gesetzlich Pflicht beim Cookie Banner? Und wenn ja, wie mache ich es so ohne Cookie szu setzen, dass der Banner nicht aufploppt? Also ohne Cookies geht das doch nicht, oder ist es vielleicht erlaubt, Cookies zu setzen, die beim schließen direkt gelöscht werden?

...zur Frage

CSS / JavaScript: Hilfe bei Leaflet-Integration?

Hallo Leute,

ich brauche Hilfe bei dieser Arbeit.

1. Es sollen zwei Karten nebeneinander sein. Jedoch soll die rechte Karte eine Here-Map sein. Wie baue ich das in den Code ein (siehe unten)?

Sie müssen http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/leaflet-tilelayer-here.js in einem <script>-Tag laden. Danach müsste es mit sowas hier gehen:

L.tileLayer.here({
  appId: 'ViVS62MmsdTJSzwXMlHb',
  appCode: 'bsODmSCzkVqEMR8TnGPHdw'
}).addTo(map);

Statt addTo(map) kommt natürlich der Name Ihrer rechten Karte hin.

appId und appCode sind hier aus dem Beispiel von Ivan Sanchez http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/demo.html

________________

2. Außerdem soll die zweite Karte sozusagen synchron/parallel mit der linken Karte verlaufen:

Sie müssen, wenn der Benutzer in der linken Karte zoomt oder sie verschiebt, die rechte Karte aktualisieren. Dazu müssen Sie eine Funktion schreiben, die aufgerufen wird, wenn auf der linken Karte das "zoomend" oder "moveend"-Ereignis auftritt.

Also etwa

map1.on("zoomend", meine_funktion);

und dann in der meine_funktion können Sie auf der rechten Karte "setBounds" aufrufen, um die rechte Karte zu verschieben/zu zoomen. Das "setBounds" muss dabei den aktuellen Ausschnitt der linken Karte übergeben bekommen (getBounds).

_________________________________________________

<html>
  <head>
    <link rel="stylesheet" href="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.css"></link>
    <script src="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="http: //unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <script>
      function initMaps() {
        map = new L.map('meine_map');
        L.tileLayer('https: //{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
        let karlsruhe = new L.LatLng(49, 8.4);
        map.setView(karlsruhe, 12);
        map1 = new L.map('meine_map1');
        L.tileLayer('http: //{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(map1);
        map1.setView(karlsruhe, 12);

        document.getElementById("suchen").addEventListener("click", suchen);
      }

      async function suchen() {
        let url = new URL('https: //nominatim.openstreetmap.org/search');
        url.searchParams.append('format', 'json');
        url.searchParams.append('q', document.getElementById("ort").value);

        let response = await fetch(url);
        let json = await response.json();
        let box = json[0].boundingbox;

        map.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
        map1.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
      }
    </script>
  </head>
  <body onLoad="initMaps()">
    <div id="meine_map" style="height: 360px; width: 360px;"></div>
    <div id="meine_map1" style="position: absolute; top: 9px; left: 375px; height: 360px; width: 360px;"></div>
    <input type="text" id="ort">
    <button id="suchen">Suchen</button>
  </body>

Anmerkung: Damit der GF-Editor die URLs nicht verfälscht, wurde im Protokoll stets ein Leerzeichen hinzugefügt.

Ich danke euch für die Hilfe im Voraus!

...zur Frage

Kann ich Job in Webdevelopment irgendwo finden, wenn ich solche Kurse absolviere?

https://www.udemy.com/course/der-komplette-webentwickler-2/?couponCode=LETSLEARNNOWPP

...zur Frage

Geld für Website?

Ich mache grade eine Website für den Laden von im, ich wollte jetzt wissen ob es gut rüber kommt wenn ich frage ob ich vielleicht dafür bezahlt werde?

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

PDF Datei auf Website zum Download bereitstellen?

Hallo zusammen,

ich möchte auf meiner Website PDF Dateien zum Download anbieten. Der Nutzer soll also auf ein Img oder einen Button klicken und die entsprechende Datei downloaden.

Wie kann ich das in HTML, CSS, JS und oder PHP umsetzen?

Vielen Dank!

...zur Frage

Link geht nicht ohne https oder http?

wenn mein Link <a href="google.de">google.de</a>

heißt wieso führt der mich dann zu http://localhost/google.de

wie kann ich das beheben ohne ein http oder https davor machen zu müssen? (weil ich kann nicht immer nur http oder https)

der Link ist nur ein Beispiel

Danke im vorraus

...zur Frage

Wie kann man den Dark-Mode Seitenübergreifend machen?

Liebe GuteFrage.net Community,

Wie kann ich dafür sorgen, dass der Dark-Mode aktiviert bleibt, wenn man auf eine Unterseite geht von der Seite? Habe ein wenig JavaScript genutzt, doch ich kenne mich noch nicht so wirklich aus in dem Bereich. Ich hoffe, Ihr könnt es mir erklären. :) Dies ist mein Code:

HTML /Javascript:

<button onclick="myFunction()">Toggle dark mode</button>
            <script>
              function myFunction() {
              var element = document.body;
              element.classList.toggle("dark-mode");
           }
            </script>

Css:

.dark-mode {
  background-image: radial-gradient(#5c5252 2%, transparent 7%),
    radial-gradient(#928f8f 2%, transparent 7%);
  background-color: #16140f;
  background-position: 25px 35px, 50px 50px;
  background-size: 20px 20px; 
}

Eine weitere Frage wäre da noch... Und zwar wie bekomme ich es hin in Boxen die Farbe zu verändern? Bisher verändert sich nur der Hintergrund...

...zur Frage

Hintergrundfarbe ändern eines Elements(.createElement) in Javascript?

inputDecrease = document.createElement('input');
inputDecrease.type = 'button';

dachte jetzt

inputDecrease.style.background = "red";

geht aber nicht :(

weiß jemand wie das geht?

...zur Frage

VS Code hängt extrem, was tun?

Hängt VS Code bei euch auch seit dem letzten update?

Was kann ich dagegen tun?

lg Lisa

...zur Frage

Wordpress Quellcode einzelner Seiten bearbeiten?

Guten Abend,

ich bin langsam am verzweifeln. Ist es irgendwie möglich bei Wordpress den Quellcode einzelner Seiten zu bearbeiten. Sodass ich (nur als Beispiel jetzt) eine <div> Box über dem eigentlichen Content einfügen kann? Diese Box soll aber nur auf einer Seite zu sehen sein.

Ich habe tatsächlich kein passendes Plugin gefunden... Bin wohl schon übermüdet. :D

Danke für eure Hilfe!

...zur Frage

was kostet es eine website (so günstig wie möglich) zu erstellen und hosten?

...zur Frage

Datenbanken Primärschlüssel, Superschlüssel und Schlüsselkandidat frage?

Das was ich verstanden habe ist das der Primärschlüssel eindeutig identifizierbar sein muss, das heißt die Datensätze können in diesem Schlüssel immer nur ein einziges mal auftauchen z.B. wie ID oder sowas. Der Schlüsselkandidat ist quasi wie der Primärschlüssel, da er auch eindeutig sein muss und der Superschlüssel ist eine Zusammensetzung aus mehreren relevanten Attributen und funktioniert auch nur so.

Wenn wir jetzt eine Datenbank modellieren mit der Relation keine Ahnung Vorlesung und den Attributen z.B. ID, Name, Vorname, Uhrzeit, Ort und Lehrer/Prof/Tutor etc.

Wären dann nicht der Primärschlüssel die ID, der Schlüsselkandidat auch die ID, weil es das einzige ist was eindeutig ist und der Superschlüssel einfach alle Attribute aufgelistet? weil die sind ja irgendwo alle relevant. Ich glaube eher ich verstehe da etwas gewaltig nicht, wo ist da der Unterschied zwischen Primärschlüssel und Schlüsselkandidat? Und was bringt mir der Superschlüssel und inwiefern unterscheide ich "relevante" Attribute?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen