Es ist nicht unbedingt immer von Vorteil, Elemente dynamisch mit Javascript anzulegen. Bei deinem Fiddle wäre es viel übersichtlicher, das div und das Menü darin im HTML-Text zu notiereren.
Mache dich mit den Developertools deines Browsers vertraut. Die sagen sofort, dass bei dem Fiddle die Variable border nicht definiert ist.
Google findet z. B. dieses:
https://www.sitepoint.com/css3-transform-background-image/
Etwas tricky mit :before, aber sollte funktionieren.
So etwas habe ich vor längerer Zeit auch Mal kodiert.
Javascript:
var canvas = document.getElementById('mycanvas');
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "savepic.php",
data: { img: dataURL }
}).done(function (msg) {
alert(msg);
});savepic.php:
<?php
$img = $_POST['img'];
if (strpos($img, 'data:image/png;base64') === 0) {
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = 'uploads/img'.date("YmdHis").'.png';
if (file_put_contents($file, $data)) {
echo "Der Canvas wurde gespeichert als $file.";
} else {
echo 'Der Canvas konnte nicht gespeichert werden.';
}
}
?>Wie ich sehe, sieht dein PHP meinem sehr ähnlich, wahrscheinlich aus der selben Quelle gefischt.
bildunten.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/09/08/20/52/milky-way-1655504_960_720.jpg");'Das ist fast richtig, nur das ";" ist falsch platziert. Es gehört ganz ans Ende. Anders als bei einer CSS-Definition braucht man es beim Zuweisen mit Javascript nicht.
bildunten.style.backgroundImage = 'url("https://cdn.pixabay.com/photo/2016/09/08/20/52/milky-way-1655504_960_720.jpg")';Und die inneren Hochkommas sind optional weil man ja schon die Klammern als Begrenzer hat, d. h. so funktioniert es auch:
testbg.style.backgroundImage = 'url(https://cdn.pixabay.com/photo/2016/09/08/20/52/milky-way-1655504_960_720.jpg)';da aber das bil das gedreht wird um einiges grösser sein muss,damit es nicht auffallen tut das es ein bild ist habe ich das problem das der div mit wachsen tut am bild.. wie unterbinde ich das das das div die 200 mal 200 pixel nicht übertrift,aber trotzdem grösser ist als das div ..
Ich hoffe, ich verstehe es richtig: Wenn Du die Größe des div fest definierst, sollte es sich nicht an das Bild anpassen.
das der div bei grösseren bilder nicht scrollbar ist ist doch overflow:none; oder was muss da stehen
Auch hier hilft es, eine Anleitung zu lesen:
https://wiki.selfhtml.org/wiki/CSS/Eigen…nzeige/overflow
Am besten machst Du mal ein Fiddle von dem, was Du bisher hast.
ist es heutzutage überhaupt noch sinnvoll data:image anzulegen??? das internet ist so schnell das das wohl nicht mehr viel ausmacht ,oder ist das doch noch ein grosser zeit gewinn ????
Was meinst Du hier? Solch HTML, wo ein Bild als Data-URL bzw. kryptische Zeichenfolge kodiert ist und inline im HTML-Text steht, ohne dass eine externe Datei geladen werden muss?
Dafür kann es andere Gründe geben, vor allem um die Handhabung von HTML-Dateien zu erleichtern, denn werden alle Bilder auf diese Weise eingebettet, braucht man sich nicht um externe Dateien zu kümmern.
Ich hatte z. B. einmal in einem Forum eine Anfrage, wo jemand eine HTML-Datei an Personen verteilen wollte, die keine Computerkenntnisse haben.
wie arbeitet man mit querySelector bzw was macht das genau
Google kaputt?
https://wiki.selfhtml.org/wiki/JavaScrip…t/querySelector
document.getElementById(1)
ich dachte man darf keine id mit zahlen beginnen,oder wahr das nur bei variabeln?? ist id="1" also ok ????
Das ist eine interessante Frage. Bei HTML5 ist es tatsächlich zulässig, dass eine ID mit einer Ziffer beginnt. Es gibt aber ein großes "aber", denn für CSS trifft das nicht zu. Auch wenn man querySelector() verwendet, funktioniert es nicht, weil der Parameter ein Selektor ist, der den Regeln von CSS folgt. Daher ist es besser, wenn man generell dabei bleibt, dass IDs nicht mit einer Ziffer beginnen.
wasmacht das fragezeichen da und was kann das hohe fusball ergebniss da zu bedeuten haben ???
Das kannst Du z. B. hier nachlesen:
Ich wäre hier am besten gar nicht eingestiegen, denn diese Lösungen mit :target sind eigentlich nicht so mein Ding. Entsprechend habe ich ein paar falsche Informationen geliefert. Ich habe jetzt eine Testseite mit deinem vollständigen Code angelegt und siehe da: Das Öffnen des Menüs funktioniert auch wenn das Ziel im body-Tag steht.
Wenn ich dieses im CSS ergänze, funktioniert auch das Auf- und Zumachen:
#nav-menue:target .menue-button-beschreibung-close {
display: block;
}
inspector-stylesheet:1
#nav-menue:target .menue-button-beschreibung-open {
display: none;
}auch ohne dass #nav-menue-zu definiert ist. Offenbar ist es ausreichend, dass ein Klick auf den Link mit diesem Ziel das :target von #nav-menue weg nimmt.
Ich gehe davon aus, dass Du den jQuery-UI-Datepicker verwendest. Ich würde einen Zähler führen und diesen nur erhöhen, wenn der Wochentag nicht am Wochenende liegt.
var dat = new Date();
var nrDays = 3, counter = 0;
while (counter < nrDays) {
var weekDay = dat.getDay();
if (weekDay != 0 && weekDay != 6) counter++;
dat.setDate(dat.getDate() * 1);
}
// jetzt enthält dat das erste zulässige DatumAls ich versucht habe, das zu reproduzieren, hatte ich das gleiche Problem. Es lag dann daran, dass position und top oben notiert hatte und darunter noch Mal die gleichen Anweisungen kamen, die es überschrieben haben. Nachdem ich das korrigiert habe, funktioniert es einwandfrei.
Wenn man es richtig macht, will das garantiert. Die letzte Anweisung ordnet sie in einer Reihe an, d. h. nebeneinandert:
#lauflichtcontainer {
width: 200vw;
position: relative;
top: 0;
left: 0;
animation: lauflicht 5s linear infinite;
display: flex;
flex-direction: row;
}Und so in einer Spalte, d. h. untereinander:
#lauflichtcontainer {
height: 200vh;
position: relative;
top: 0;
left: 0;
animation: lauflicht 5s linear infinite;
display: flex;
flex-direction: column;
}Beachte auch, dass ich Breite durch Höhe ersetzt habe.
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.
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.
Dein 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:
<body>
<a id="nav-menue">Außerdem muss man dann das CSS etwas ändern:
#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.
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.
Wahrscheinlich ist es wieder so ein blöder Tippfehler
Offenbar ja: Sieh dir mal genau den Wert des href-Attributes an:
<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.
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.
css einbinden
Probiere dies:
var lnk = document.createElement('link');
lnk.rel = 'stylesheet';
lnk.type = 'text/css';
lnk.href = 'css/formate.css';
document.head.appendChild(lnk);kannstdu mirmaleinbeispiel geben ,wie man das obrige machen kann???
nicht genau das obige, aber schau dir mal dies an und probiere es aus:
<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:
for (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.