Beiträge von Sempervivum

OK, ich werde eine Blick darauf werfen. War eine schlechte Wahl, den Weg mit Canvas statt HTML/CSS zu gehen, aber ich möchte jetzt auch nicht alles neu machen.

Zitat

Also ich habe es jetzt hinbekommen so wie ich es haben möchte

Wie hast Du es denn hin bekommen, hast Du meinen Code aus Posting #79 verwenden können?

jCanvas einbinden:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>

Um sie nach dem Zeichnen ansprechen zu können, musst Du sie als Layer definieren und ihnen einen Namen geben:

https://projects.calebevans.me/jcanvas/docs/addLayers/

Dann kannst Du sie später auch ändern:

https://projects.calebevans.me/jcanvas/docs/manipulateLayers/

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<script src="jcanvas.min.js"></script>

Die erste Zeile reicht aus. Für die zweite Zeile musst Du jCanvas herunter laden und lokal bzw. auf deinem Webspace ablegen.

Der Grund ist lediglich, dass Du ein Problem mit den Hochkommas hast. So wird es funktionieren:

$ges= '<p class="pfehlt">Das Passwort fehlt!</p>';

Zitat

muss ich dann ,siehe Bild, mehrere Canvas anlegen wenn ich z.B. unterschiedliche Schriften haben will?,

Nein, Du kannst die Farben, Schriftarten etc. während des Zeichnens umschalten. fillStyle z. B. wirkt nur auf das, was danach gezeichnet wird und verändert nicht das, was davor gezeichnet wurde. Ich möchte jetzt nicht einsteigen und Beispiele dafür geben, sondern empfehlen lieber gleich eine Bibliothek wie jCanvas zu verwenden. Dort gibt man die Eigenschaften direkt beim Zeichnen des Objektes an und kann sie später auch noch ändern. IMO ist dies wesentlich klarer.

https://projects.calebevans.me/jcanvas/docs/text/

Zitat

irgendwie bekomme ich es nicht hin, dass eine Schrift vor einem farbigen Hintergrund zu lesen ist.

Ich habe es mit ctx.globalAlpha = 0.2 probiert, hat mal funktioniert, dann wieder nicht.

Was soll den transparent sein, die Schrift oder der Hintergrund? Oder das ganze Canvas? Hast Du es mit rgba() versucht?

Zitat

Code

/* So ist es falsch: */
div.klasse { background-color: black; }

Warum sollte das falsch sein?

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var ctx1 = c.getContext("2d");

var ctx2 = c.getContext("2d");

var ctx3 = c.getContext("2d");

var ctx4 = c.getContext("2d");

Zitat

warum hat ctx2 die farbe von ctx1. Sind das nicht zwei verschiedene Objekte oder wie man das nennt?

In Javascript ist es i. allg. so, dass mit Referenzen auf Objekte gearbeitet wird. In diesem Fall nehme ich an, dass es das Context-Objekt für ein Canvas nur einmal gibt und dass getContext jeweils nur die Referenz bzw. einen Verweis auf dieses Objekt liefert. Daher wirken die Aktionen, die man darauf anwendet, auf das selbe Objekt.

Das ist bei allen HTML-Elementen so.

Du hast schon richtig vermutet, das liegt am Canvas. Das Problem ist, dass Du es mit position:relative positioniert hast, In dem Fall bleibt der Raum an der ursprünglichen Position reserviert; das ist meistens nicht das, was man haben will. Ändere es auf position:absolute und alles ist gut.

Wird das bei 10% Höhe nicht alles ein bisschen zu groß? Ich frage mich, ob dann alles noch in der Horizontalen heinein passt? Und müsste dann nicht auch die Schrift vergrößert werden, damit sie zu den Buttons passt?

So sollte es funktionieren:

ctx.font = variable + "px Arial";

Außerdem ist da keine Rede von einer Stapel-/Batchverarbeitung. Bildgröße ändern kann man mit jedem Bildbearbeitungsprogramm, da braucht man kein Programm mit zweifelhafter Lizenz.

Siehe mein Posting #29:

Zitat

1. Wenn ich dies machen müsste, würde ich Fancybox verwenden.

oder eine andere, ausgereifte, konfigurierbare Lightbox.

Mit diesem CSS:

/* Universalselektoren setzten, um alle Browser auf "Null" zu setzten*/
* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

/*Definition der 1. Überschrift*/
h1 {
    color: #656565;
    font-size: 2em;
}

/*Definition der 2. Überschrift*/
h2 {
    color: black;
    font-size: 1.2em;
   }

/*Schreibschrift, speziell bei Unterschrift*/
h3 {
    color: blue;
    line-height: 1.3em;
    font-family: 'Waiting for the Sunrise', cursive;
}


/*Definition der Seite mit div wrapper*/
#wrapper {
    display: flex;
    flex-direction: column; /*Grundsätzlich von unten nach oben dargestellt*/
    height: 100%;
    width: 100%;
}

header { 
    background-image: url(bilder/rundum2005.gif);
    background-repeat: repeat-x;
    animation: headerbild 100s linear infinite;
    display: flex;
    padding-bottom: 1em;
}

@keyframes headerbild {
    0% {
        background-position: 0px, 0px;
    }
    100% {
        background-position: 98em,100em;
    }
}

/*Darstellung des Bildes home-with-a-view*/
header img {
    border-radius: 0px 0px 90px 90px;
    align-self: flex-start;
}
/*Kopfzeilenschrift definieren*/
header p {
    color: greenyellow;
    padding-left: 1em;
    font-size: 3em;
    text-align: left;
    text-shadow: 2px 2px 10px black;
}

/*Definition nav, article und aside*/
#mehrspaltig { 
    background-color: silver; 
    flex: 1; /* Damit die ganze Seite ausgefüllt wird*/
    display: flex; 
    flex-direction: row; /*Grundsätzlich von links nach rechts dargestellt*/
    }

nav {
    background-color: #7A8EAA;
    flex: 1.5;
}

nav ul {
    font-size: 1em;
    line-height: 1.5em;
    list-style-type: none;
    
}

nav a {
    padding: 0 0 0 1em;
    color: whitesmoke;
    text-decoration: none;
    width: 100%;
    display:inline-block;
}

nav a:hover {
    color: lightblue;
    font-weight: bold;
    background-image: url(bilder/dreieck1.png);
    background-repeat: no-repeat;
    background-position: left center;
    border: 0.5px solid white;
}

nav a:visited {
    color: black;
}


article { 
    background-color: lemonchiffon; 
    flex: 6; 
    padding-left: 1em;
    overflow-y: auto;
}
aside {
    background-color: yellow;
    flex: 2
}

footer { 
    background-color: lightgrey;
    height: 2em;
    padding-left: 2em;
}

Sieht es so aus:

html-seminar.de/woltlab/attachment/1438/

Nur der mittlere Container ist scrollbar, bei unterer Scrollposition ist nichts verdeckt.

Auch im Header kann man auf die absolute Positionierung des Bildes und die feste Höhe verzichten, wenn man Flex verwendet.

Auf die Slideshow habe ich jetzt nicht so das Augenmerk gerichtet.

Das ist das Ergebnis von position:fixed.

Sind jetzt alle Probleme gelöst? Bei mir sieht es jetzt so aus:

html-seminar.de/woltlab/attachment/1436/

Ist das Browserfenster hoch, entsteht zwischen #middle und footer freier Raum.

Den kannst Du vermeiden, indem Du die Höhe von #wrapper auf 100vh setzt.

Außerdem empfehle ich, konsequent zu sein, wenn Du Flexlayout einsetzt und auf die absolute Positionierung des footer zu verzichten.

Ist die Höhe des Fensters geringer, verschwindet unten der Text. Ich empfehle, diesen Container mit overflow-y:auto scrollbar zu machen.

Nicht ganz, der Index geht von 0 bis images.length-1

Informiere dich über Arrays, z. B. hier:

https://wiki.selfhtml.org/wiki/JavaScript/Array