Danke für das Angebot, aber meine eigene Webseite ist leider nicht mehr so gut vorzeigbar. Weil die Besucher fehlten, habe ich sie kaum noch gepflegt und meine Fotos lieber bei Facebook gepostet.
Beiträge von Sempervivum
-
-
Zitat
geht zwar das Menü jetzt nach dem anklicken auf; - aber es bleibt der Text mit Menü auf (statt mit Menü zu)
Es müssen beide Sprungziele auf der Seite vorhanden sein, #nav-menue und #nav-menue-zu. Letzteres finde ich in deinem HTML nicht.
ZitatDein Hinweis mit dem a-Tag ist mir unklar. Könntest Du mir da einen Vorschlag machen, wie man den Einbauen sollte?
Bei mir hat es mit dem Sprungziel im body-Tag nicht funktioniert. Ich habe folgendes gemacht:
Code<body> <a id="nav-menue">Außerdem muss man dann das CSS etwas ändern:
Code#nav-menue:target ~ nav { display: block; }Möglicher Weise verhalten sich hier die Browser unterschiedlich. Ich habe Opera und habe mir nicht die Mühe gemacht, es mit anderen zu testen.
-
Zitat
irgendwann ist er ja zu ende und muss von vorne anfangen ( wie bei dein beispiel ) jedesmal wenn er von vorne anfangen tut gibt es ein ruckeln bzw einen harten übergang.
Um das zu vermeiden, muss man die Maße der Elemente genau berechnen. Bei den waagerechten Lauflichtern habe ich die Breite des Containers auf 200vw gesetzt, also die doppelte Breite des Browserfensters. Und die Anzahl der Kästchen darin muss durch 4 teilbar sein; in deinem Fall kannst Du ja die Werte in deinem select-Feld entsprechend fest legen. Wenn man dann genau auf -100vw nach links verschiebt und dann wieder bei 0vw anfängt, gibt es einen einwandfreien Übergang.
-
Zitat
Wahrscheinlich ist es wieder so ein blöder Tippfehler
Offenbar ja: Sieh dir mal genau den Wert des href-Attributes an:
Code<a class="menue-button menue-button-beschreibung-close" href="#nav-menue-zu>">MENÜ zu</a>Da ist das ">" am Ende zu viel. So lautet das Sprungziel "#nav-menue>" und das existiert nicht.
Außerdem funktionierte es bei mir (Opera) nicht, wenn das Sprungziel im body-Tag steht. Ich musste ein a-Tag dafür anlegen und dann funktionierte es.
-
Zitat
aber da in meinen fall ja bei jeden schleifen durchlauf die positsionen verändert werden ,clone ich ja jedesmal ein anderes element (zumindet den inhalt).... wie kann ich das den nur einmal klonen ( also vor den schleifen durchlauf),und dann in nachherein den inhalt des clones ändern ?????
Ah ja, jetzt verstehe ich, warum Du das gemacht hast, beim Klonen nimmst Du auch die CSS-Eigenschaften mit. Eigentlich auch eine gute Idee.
Um das zu lösen, müsstest Du zwei verschachtelte Schleifen anlegen, die äußere über die Container #einstellungx und die innere über die einzelnen Kästchen einsxy. Ich empfehle aber, damit gar nicht erst anzufangen, sondern statt dessen die Position der Container zu animieren. Dass das funktioniert, siehst Du ja an meinem Beispiel.
-
Freut mich zu lesen. Einen einfachen Farbverlauf kannst Du auch ohne Grafik mit CSS erzeugen:
-
Wie ich sehe, hast Du dabei einiges umgesetzt, was wir früher diskutiert haben.
Das Klonen ist eine gute Idee, gefällt mir.
Leider hat dieses Skript jedoch meinen Browser völlig lahm gelegt. Das Kernproblem war folgendes:
Die Funktion unten(), die #einstellung klont und die Elemente links, rechts und unten anlegt, rufst Du während der zyklischen Bearbeitung auf, so dass immer mehr und mehr dieser Elemente angelegt werden. Du solltest dies nur einmal beim Laden der Seite tun.
Weitere Verbesserungsvorschläge:
Funktion setInterval() verwenden, weil sich ja alle zyklisch wiederholt.
Nicht die einzelnen Rechtecke #einsx bewegen, sondern die gesamten Container #einstellungx.
-
Zitat
css einbinden
Probiere dies:
Codevar lnk = document.createElement('link'); lnk.rel = 'stylesheet'; lnk.type = 'text/css'; lnk.href = 'css/formate.css'; document.head.appendChild(lnk); -
Zitat
kannstdu mirmaleinbeispiel geben ,wie man das obrige machen kann???
nicht genau das obige, aber schau dir mal dies an und probiere es aus:
Code
Alles anzeigen<style> body { margin: 0; padding: 0; } #lauflichtcontainer { width: 200vw; position: relative; top: 0; left: 0; animation: lauflicht 5s linear infinite; display: flex; flex-direction: row; } @keyframes lauflicht { from { left: 0; } to { left: -100vw; } } #lauflichtcontainer div:nth-child(odd) { background-color: turquoise; } #lauflichtcontainer div:nth-child(even) { background-color: blue; } </style> <div id="lauflichtcontainer"></div> <script> var divider = 40; var winwidth = document.documentElement.clientWidth; var nr = Math.ceil(winwidth / divider) * 4; var width = height = winwidth / nr * 2; for (var i = 0; i < nr; i++) { var box = document.createElement("div"); box.style.width = width + "px"; box.style.height = height + "px"; lauflichtcontainer.appendChild(box); } </script> -
Du hast nicht wirklich einen Fehler gemacht, aber das Javascript macht dir einen Strich durch die Rechnung, denn es nummeriert hiermit die Tage neu:
Codefor (var i = 0; i < images.length; i++) { images[i].setAttribute("data-day", i + 1); // Nummer des Tages als data-Attribut hinzu fuegen images[i].src = "http://lorempixel.com/output/nature-q-c-160-160-5.jpg"; // nur zum Test }Wenn Du das löschst, bleiben deine Einträge erhalten.
-
Zeile 7 erzeugt ein Eingabefeld, wo Du den Wert eingeben kannst:
Code<input id="val" />Und ab Zeile 9 wird diesem ein Eventlistener zugewiesen, durch Aufruf der Funktion updateCircleDisplay() die Anzeige auf den Wert setzt, der im Eingabefeld eingegeben wurde.
-
Das ist kein Pfusch und Du kannst es ruhig so machen, wenn Du nicht gerade mehrere Tausend divs anlegen willst.
Besser, weil performanter bzw. schneller, ist, die Elemente nicht mit innerHTML sondern mit document.createElement anzulegen. Hast Du dir dies durch gelesen?
-
Da wird dir jeder etwas anderes empfehlen. IMO ist das Wichtigste, dass der Editor nicht nur ein Syntax-Highlighting hat sondern auch Syntaxfehler gleich beim Editieren anzeigt. Das erleichtert und beschleunigt die Entwicklung enorm.
Selber benutze ich Visual Studio 2015 Community. Die Community Edition ist kostenlos bei nicht kommerzieller Nutzung.
-
Du kannst nur eine Variable zurück geben. Diese kann jedoch ein Array oder Objekt sein, dann kannst Du mehrere Werte hinein legen:
Codefunction los(){ var a = 'hallo'; var b = 'du' var c = 'da' return {va: a, vb: b, vc: c}; // so geht das } var retval = los(); console.log(retval.va); console.log(retval.vb); console.log(retval.vc); -
Wenn Du so etwas effizient kodieren willst, musst Du die Elemente durch Javascript erzeugen und bei der Erzeugung und Bearbeitung Schleifen verwenden.
https://www.html-seminar.de/javascript-dom-eingreifen.htm
https://wiki.selfhtml.org/wiki/JavaScript/Schleife
Und den Effekt, dass sich die Farben abwechseln, kannst Du sehr effizient mit Pseudoklassen realisieren:
-
OK, ich habe es mal versucht. Wenn Du den Code wirklich verstehen willst, empfehle ich, das jQuery-Tutorial hier bei html-siminar durchzuarbeiten.
HTML
Alles anzeigen<!doctype html> <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script> </head> <body> <canvas id="display" class="circlecountdown" width="220" height="220"></canvas> <input id="val" /> <script> // hier wird ein Eventlistener für das input-Feld // mit der ID "val" (Zeile 12) registriert // staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert $("#val").on("change", function () { updateCircleDisplay("#display", this.value); }); function updateCircleDisplay(selector, value) { $(selector).each(function (idx, ele) { var canv = $(this); var max = canv.data("max"); var deg = value / max * 360; canv.setLayer('text', { text: canv.data("templateText").replace("{value}", value) }).stopLayer('circle') .animateLayer('circle', { end: deg }, { duration: 1000, easing: 'linear', }); }); } function createCircleDisplay(selector, value, max, options) { var opts = { radius: 100, colorCircle: "blue", strokeWidthCircle: 20, colorBgCircle: "lightgrey", strokeWidthBgCircle: 20, colorText: "orange", templateText: "{value} $" } $.extend(opts, options); // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen // siehe Aufruf der Funktion in Zeile 94 // staende diese Skript im Head, waere dieses Element noch nicht definiert $(selector).each(function (idx, ele) { var canv = $(this); canv.data("max", max); canv.data("templateText", opts.templateText); var deg = value / max * 360; var size = 2 * opts.radius + opts.strokeWidthCircle; var pos = opts.radius + opts.strokeWidthCircle / 2; canv.attr("width", size); canv.attr("height", size); canv.drawArc({ layer: true, name: 'circle2', strokeStyle: opts.colorBgCircle, strokeWidth: opts.strokeWidthBgCircle, x: pos, y: pos, radius: opts.radius, // start and end angles in degrees start: 0, end: 360 }); canv.drawArc({ layer: true, name: 'circle', strokeStyle: opts.colorCircle, strokeWidth: opts.strokeWidthCircle, rounded: true, x: pos, y: pos, radius: opts.radius, // start and end angles in degrees start: 0, end: deg }); canv.drawText({ layer: true, name: 'text', fillStyle: opts.colorText, strokeWidth: 4, x: pos, y: pos, fontSize: 40, fontFamily: 'Arial', text: opts.templateText.replace("{value}", value) }); }); } createCircleDisplay('#display', 30, 100); </script> </body> </html> -
Gern. Der Browser arbeitet die Datei von oben nach unten ab. Das Javascript greift hier:
Code$("#val").on("change", function () {auf das Input mit der ID "val"
und hier:
Code$(selector).each(function (idx, ele) {auf das Canvas mit der ID "display" zu. Steht das Javascript im Head, hat der Browser die Zeilen wo diese Elemente definiert werden, noch nicht abgearbeitet und sie sind deshalb undefiniert.
Es kommt zu keiner Fehlermeldung, weil z. B. $("#val") dann ein leeres Array liefert.
-
Dann vermute ich folgendes: Da ich im body kein Skript sehe, nehme ich an, dass Du das Javascript in den head eingetragen hast. Dann gibt es das Problem, dass dort die Elemente Canvas und Input noch nicht existieren. Lege das Javascript an das Ende des Body, vor das schließende </body>.
-
Zitat
das es bei jQuery so sein muss, das man immer online sein muss.
Auf keinen Fall, das trifft nur zu, wenn Du es von einem CDN lädst.
-
Zitat
Warum kann er das denn nicht laden ?
Du hast doch geschrieben, dass Du es offline verwenden willst. Wenn Du noch das Laden von den CDNs drin hast, kann es dann nicht funktionieren.
Wenn es daran nicht liegt, dann poste noch Mal, wie Du jQuery und jCanvas eingebunden hast und was die Console anzeigt.