Beiträge von Sempervivum

Sempervivum

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?

Sempervivum

So sollte es funktionieren:

Code

ctx.font = variable + "px Arial";

Sempervivum

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.

Sempervivum

Siehe mein Posting #29:

Zitat

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

oder eine andere, ausgereifte, konfigurierbare Lightbox.

Sempervivum

Mit diesem CSS:

Code

/* 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;
}

Alles anzeigen

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.

Sempervivum

Das ist das Ergebnis von position:fixed.

Sempervivum

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.

Sempervivum

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

Sempervivum

PS:

glob() kann nicht mit entfernten Dateien arbeiten:

http://php.net/manual/de/function.glob.php

Dies funktioniert bei mir nicht (ohne Fehlermeldung, nur leeres Array):

$images = glob("http://localhost:11117/images/*.jpg");

Dies funktioniert:

$images = glob("./images/*.jpg");

Sempervivum

Du musst schon ein Muster für den Dateinamen angeben, mindestens *.*, z. B. so:

Code

$images = glob("http://sebastian1012.bplaced.net/*.*");

Sempervivum

Hat deine Datei überhaupt die Endung ".php"?

Sempervivum

Du hast allen drei divs die selbe ID zugewiesen. Das ist nicht zulässig und kann zu Problemen führen, i. allg. in der Form, dass nur das erste Element erkannt wird.

Sempervivum

Code

glob("images/*.jpg")

Sucht JPG-Bilder im Verzeichnis "images". Das muss natürlich existieren und es müssen Bilder drin sein.

Sempervivum

Hiermit schaltest Du die Fehleranzeige von PHP ein:

PHP

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>

Das funktioniert etwas anders als die Console des Browsers, denn die Anzeigen werden, ebenso wie Ausgaben durch echo, direkt auf der Seite ausgegeben. D. h. ruft man die Seite direkt im Browser auf, werden sie im Browserfenster angezeigt. Etwas komplizierter wird es, wenn das PHP-Skript durch Ajax aufgerufen wird. Dann stehen sie jedoch als Parameter im success-Callback zur Verfügung.

Auch in dem Beispiel in Posting #8 hast Du es unnötig kompliziert gemacht, denn glob liefert bereits ein Array als Rückgabewert. Dieses kann mal problemlos über JSON an Javascript übergeben, so wie in meinem Beispiel. Sieh dir mal den Quelltext davon an.

Ebenso wie mit console.log kannst Du mit echo oder var_dump Variablen und Hinweise etc. in die Ausgabe schreiben.

Sempervivum

Da hast Du es dir ja sehr schwer gemacht. Diese wenigen Zeilen schreiben die Bilder eines Verzeichnis in ein Javascript-Array:

PHP

<?php
$images = glob("images/*.jpg");
$imjson = json_encode($images);
?>
    <script>
        var images = <?php echo $imjson; ?>;
        console.log(images);
    </script>

Sempervivum

1. Dadurch, dass Du die Größe des Canvas mit CSS fest gelegt hast, wird es herauf skaliert, so dass die Maße, die Du beim Zeichnen des Rechtecks angegeben hast, nicht mehr stimmen. Das kannst Du vermeiden, indem Du die Größe des Canvas nicht über CSS definierst sondern über die Attribute.

2. Tut man dies, hat man immer noch das Problem, dass die Mausposition, die durch evt.clientX und evt.clientY ermittelt wird, sich auf die linke obere Ecke des Anzeigefensters bezieht:

https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/clientX

Besonders deutlich wird das, wenn man den Rahmen ein wenig größer macht.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Click Position</title>

    <style type="text/css">
        body {

            background-color: #FFF;

            margin: 30px;

            margin-top: 10px;

        }

        #myCanvas {

            position: absolute;

            top: 0px;

            left: 0px;

            /* width: 600px;

            height: 400px; */

            border: 20px red solid;
        }
    </style>

</head>

<body onmousedown="zeigKoord(event)">





    <canvas id="myCanvas" width="600" height="400">

        Your browser does not support the HTML5 canvas tag.

    </canvas>

        <span id='x'></span>x

        <span id='y'></span>y

        <script>



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

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

            ctx.font = "20px Arial";



            ctx.rect(100, 100, 60, 60);

            ctx.stroke();

            ctx.fillText(("zufall"), 80, 50);







            function zeigKoord(evt) {

                xPosition = evt.clientX;

                yPosition = evt.clientY;

                document.getElementById("x").innerHTML = xPosition;

                document.getElementById("y").innerHTML = yPosition;

            }



        </script>



    </body>

</html>

Alles anzeigen

Sempervivum

BTW: Entstanden ist diese Lösung, weil anfangs eine kreisförmige Anzeige gefragt war. Ein einfacher Balken mit Text lässt sich jedoch viel einfacher mit HTML und CSS realisieren. Wenn Du für die Zukunft flexibler sein willst, könnte es sich lohnen, auf eine solche Lösung umzustellen.

Sempervivum

Da fällt mir auch keine Lösung ein.

Nur, dass man es mit Prozentwerten responsiv machen könnte:

https://jsfiddle.net/Sempervivum/7cv7Lnbk/2/

Flexbox erlaubt auch absolute Positionierung:

https://stackoverflow.com/questions/3255…856609#33856609

aber ich verspreche mir bei diesem Problem keine Vorteile dadurch.

Sempervivum

Ich habe mal eine Funktion synchronisiereBalken hinzu gefügt, die das tun sollte, was Du erwartest:

Code

function erstelleBalken(selector, value, max, options) {
            var balkenEigenschaften = { barWidth: 400, barHeight: 40, barPos: 10,
                cornerRadius: 5, colorBg: "lightgrey", colorText: "black", textPos: "right", 
                templateText: "{value} min" }
            $.extend(balkenEigenschaften, options);
            $(selector).each(function (index, element) {
                var cv = $(this);
                cv.data("balkenEigenschaften", balkenEigenschaften);
                cv.data("max", max);
                if (value > max) max = value;
                var colorBar = getColor2(value, balkenEigenschaften);
                var height = 2 * balkenEigenschaften.barPos + balkenEigenschaften.barHeight;
                cv.drawText({
                    layer: true,
                    name: 'text',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorText,
                    strokeWidth: 4,
                    x: balkenEigenschaften.barPos, y: balkenEigenschaften.barPos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: balkenEigenschaften.templateText.replace("{value}", max).replace("{remaining}", max)
                });
                cv.data("max-text-width", cv.measureText('text').width);
                yBar = balkenEigenschaften.barPos + cv.measureText('text').height / 2 - balkenEigenschaften.barHeight / 2;
                if (balkenEigenschaften.textPos == "left") {
                    var xBar = balkenEigenschaften.barPos + cv.measureText('text').width + 5,
                        xText = balkenEigenschaften.barPos;
                } else {
                    var xBar = balkenEigenschaften.barPos,
                        xText = balkenEigenschaften.barPos + balkenEigenschaften.barWidth + 10;
                }
                var width = balkenEigenschaften.barPos + cv.measureText('text').width + 10 + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.attr("width", width);
                cv.attr("height", height);
                cv.setLayer('text', {
                    text: getText(value, max, balkenEigenschaften),
                    x: xText,
                }).drawLayers();
                cv.drawRect({
                    layer: true,
                    name: 'background',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorBg,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
                cv.drawRect({
                    layer: true,
                    name: 'bar',
                    fromCenter: false,
                    fillStyle: colorBar,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: value / max * balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
            });
        }
        function sychronisiereBalken(selector) {
            var maxTextWidth = 0;
            $(selector).each(function (index, element) {
                var cv = $(element);
                var currentWidth = cv.data("max-text-width");
                if (currentWidth > maxTextWidth) maxTextWidth = currentWidth;
            });
            $(selector).each(function (index, element) {
                var cv = $(element);
                var balkenEigenschaften = cv.data("balkenEigenschaften");
                if (balkenEigenschaften.textPos == "left") xText = balkenEigenschaften.barPos;
                else xText = balkenEigenschaften.barPos + maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.setLayer('background', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('bar', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('text', {
                    x: xText
                });
                cv.attr("width", balkenEigenschaften.barPos + 2 * maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos)
                    .drawLayers();
            });
        }
        erstelleBalken("#display1", 50, 100);
        erstelleBalken("#display2", 5, 100, {textPos: "left"});
        sychronisiereBalken("#display1, #display2");

Alles anzeigen

Rechtsausrichtung der Texte fehlt noch. Ich halte dies nur für sinnvoll, wenn der Text links vom Balken steht?

Sempervivum

Zitat

Kann man mit JS auf einen Ordner zugreifen? Ohne ajax ?

Nein, auf einen Ordner auf dem Server nur mit Ajax.

Edit: In meinem Posting #3 habe ich vergessen, die PHP-Funktion glob() einzutragen, damit ist es ganz einfach.

Beiträge von Sempervivum

Button skallieren

font variable Größe;

Viele verschiedene Bildgrößen auf eine einheitliche Größe bringen?

Lightbox gallery

Test mit Flexboxen: Problem mit den Boxen beim scrollen.

Test mit Flexboxen: Problem mit den Boxen beim scrollen.

Test mit Flexboxen: Problem mit den Boxen beim scrollen.

arrays

arrays

arrays

arrays

mehrere div's mit Upload-Zone - wie unterscheiden?

arrays

arrays

arrays

canvas Koordinaten

Java Script Bibliotheken

2/6 Kreiss 1/3 Kreiss

Java Script Bibliotheken

arrays