horstmann: Licht nur in bestimmten Block soll funktionieren

problematische Seite

Hallo ,

  1. wie kann ich machen, dass das Licht nur bei Landschaft Bild bleibt und auf Blöcke unten und oben nicht reinkommt ?
  2. wie kann ich class .searchlight.on nur den Block .canvas zuweise ?
  3. Wie kann ich den schwarzen Background nur den .canvas block zuweisen ?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drohne</title>
    <style>
        html {
            height: 100%;

        }
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .canvas {
            width: 100%;
            height: 100%;
            background: url("Solarpark-Oberlauda.jpg") no-repeat center;
            background-size: cover;

        }

        .searchlight {
            position: absolute;
            z-index: 100;
            height: 800px;
            width: 800px;
            border-width: 100vh 100vw;
            border-style: solid;
            border-color: #000;
            top: -100vh;
            left: -100vw;
            background: #000;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            -ms-box-sizing: content-box;
            box-sizing: content-box;



        }
        .searchlight.on {
            background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
            background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* Opera 12+ */
            background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
            background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
        }
        .center {
            display: block;
            margin: 0 auto;

        }
        .bild {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;

        }
        .eins {
            background-color: aqua;
            width: 100%;
            height: 300px;

        }
        .zwei {
            background-color: blueviolet;
            height: 300px;

            bottom: 0;
            width: 100%;

        }
    </style>
</head>

<body>

    <div class="eins"></div>
    <div class="canvas">
            <div class="bild"><img src="drohne1.png" alt="" class="center"></div>
    </div>
    <div class="zwei"></div>
<div class="searchlight"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('.searchlight')
        .on('mousemove', function(event) {
            $(this).addClass('on').css({'margin-left': event.pageX - 400, 'margin-top': event.pageY - 400});
        })
        .on('mouseout', function(event) {
            $(this).removeClass('on');
        })

</script>
</body>
</html>
  1. problematische Seite

    Hallo horstmann,

    ohne auf deine Frage einzugehen: alle Eigenschaften, die mit -moz-, -o-, -ms- oder -webkit- beginnnen, können weg.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  2. problematische Seite

    @@horstmann

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    

    Das kann weg. jQuery war mal gut, als es gut war. Das ist vorbei.

    <script>
        $('.searchlight')
            .on('mousemove', function(event) {
                $(this).addClass('on').css({'margin-left': event.pageX - 400, 'margin-top': event.pageY - 400});
            })
            .on('mouseout', function(event) {
                $(this).removeClass('on');
            })
    
    </script>
    

    Das auch.

    Mir scheint, du willst Stile für .searchlight:hover angeben.

    😷 LLAP

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
  3. problematische Seite

    Hallo horstmann,

    folgende Empfehlungen:

    (1) Allgemein

    • deine .eins und .zwei divs möchten gerne header und footer heißen
    • dein .canvas div möchte gern eine andere Klasse haben, weil man es sonst mit dem <canvas> Element verwechseln könnte. Vielleicht möchte es auch gleich ein <figure> Element werden
    • dein mit Flexbox gemachtes Seitenlayout sollte auch mit flex-Eigenschaften gesteuert werden. Also z.B. flex: 0 0 9em für header und footer (feste Größe, 9em hoch) und der Bildcontainer bekommt flex: 1 0 1em;, also minimal 1em und er macht sich so hoch, dass die Seite voll wird.

    (2) Searchlight

    • mach das Searchlight zu einem Kind-Element der figure (also dein .canvas, falls Du Teil (1) übersprungen hast). Die figure benötigt dann position:relative.
    • gibt der figure die overflow:hidden Eigenschaft, damit das Searchlight in der Figure bleibt
    • mach das Searchlight rund mit border-radius
    • ich wollte Dir schon box-shadow statt border vorschlagen, aber das erzeugt bei mir einen störenden Übergangsring. Schei...browser! Also doch border, du kannst das als border: max(120vh, 120vw) solid black; zusammenfassen (100 reicht nicht!)
    • verwende transform:translate(-50%, -50%) auf dem Searchlight und positioniere es mit top und left, nicht über Margins. Auf diese Weise kannst Du mit top und left den gewünschten Mittelpunkt angeben und brauchst im JavaScript keine Informationen über die Größe des Searchlight
    • Weil die figure nun das Elternelement des Searchlight ist, müssen die Koordinaten des Searchlights nun relativ zu dieser figure gesetzt werden.

    Eine on/off Steuerung brauchst Du dann auch nicht mehr. Wenn das searchlight außerhalb der figure ist, ist das Bild komplett überdeckt. Dafür muss nur der Rahmen breit genug sein. Ich kann nur nicht beurteilen, ob das zu Performanceproblemen führt, wenn man per mousemove auf der ganzen Seite ein searchlight durch die Gegend schiebt, das einen riesigen Rahmen trägt. Eventuell muss man einen IntersectionObserver hinzufügen, der das searchlight abschaltet (und das Bild schwarz verdeckt), wenn es das Bild verlassen hat.

    Guckst Du hier: https://jsfiddle.net/Rolf_b/4nqkazvw/

    Deutlich kleiner, ohne jQuery 😀. Ggf. muss man noch das Scrolling des Body berücksichtigen. Wenn der nämlich höher als 100vh wird und man das Fenster (per Mausrad) scrollt, wandert das Searchlight mit und positioniert sich erst nach einer Mausbewegung wieder auf die Maus. Was logisch ist...

    Ich weiß ja nicht, warum auf deiner Seite kein störender Übergangsrahmen zwischen Radialgradient und Border erscheint; in meinem Fiddle passiert das. Ich muss den Übergangspunkt im Radialgradienten auf genau 71% legen (also den Kehrwert von Wurzel 2, der Diagonalenlänge), damit er nicht auffällt. Mach ich ihn kleiner, ist da dieser feine Ring. Mach ich ihn größer, ist der Übergang zum Rand zu hart. Liegt vielleicht am iframe von jsFiddle, bei Dir ist es ja nicht so, wobei bei Dir auch auffällt, dass das Schwarz des Gradienten und das Schwarz des Randes unterschiedlich sind.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Danke sehr Rolf B, das ist sehr hilfreich gewesen.

  4. problematische Seite

    Hallo horstmann,

    wie @Gunnar Bittersmann schon schreibt, würde ich auch den jquery-Kram ersetzen durch standard-Javascript.

    Was deine Aufgaben betrifft, so gibts mittlerweile ne Menge neuer CSS-Selektoren, die für sowas hilfreich sind.

    Btw. @Christian Kruse, das hier ist wieder so ein typisches Beispiel, wo es hilfreich wäre den Quelltext per Klick zum Laufen zu bringen. (nur als Vorschlag)

    Gruss
    Henry

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
    1. problematische Seite

      Hallo Henry,

      Btw. @Christian Kruse, das hier ist wieder so ein typisches Beispiel, wo es hilfreich wäre den Quelltext per Klick zum Laufen zu bringen. (nur als Vorschlag)

      Ich sehe keinen Mehrwert darin, Codepen und co. nachzubauen.

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. problematische Seite

        Hallo Matthias,

        Ich sehe keinen Mehrwert darin, Codepen und co. nachzubauen.

        Ist doch kein Nachbauen. Läuft ja nur lokal beim Besucher, ohne Anmeldung, Login, unsäglich viel Scripte wie bei Codepen im Hintergrund, usw... Schlicht ne andere ausführbare Ansicht. Und der Mehrwert, zeigt sich doch gerade hier. Wer hat schon Lust Copy&paste dann noch Möglichkeit finden damit zu experimentieren... simple & effektiv.

        Sowas wie codepen oder beser noch w3schools, ja das wäre natürlich noch schöner, hatte ich vor langer Zeit ja hier auch schon mal angesprochen, aber das da natürlich die Manpower nicht vorhanden ist zu pflegen war ja einleuchtend. Das hier aber ist was völlig anderes.

        Gruss
        Henry

        --
        Meine Meinung zu DSGVO & Co:
        „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
        1. problematische Seite

          Hallo Henry,

          du setzt voraus, dass die Leute vollständig lauffähige Codesnippets posten. Das ist zumeist nicht der Fall, bzw. man muss ohnehin ran und Sachen ändern damit es läuft.

          Das war hier auch der Fall. Ich hab ein Fiddle draus gemacht und musste zumindest mal die URLs ändern damit die Bilder kamen.

          Ob es sinnvoll ist, aus dem Forum heraus auf ein leeres Frickl zu verlinken? Da haben wir ja schon das nachgebaute codeFiddle, äh, den jsPen. Nur müsste man dann auch aus dem Frickl heraus die Möglichkeit haben, den dortigen Inhalt zu exportieren und in einem Posting unterzubringen - dem Vorschlag, beliebige Frickls speichern zu können, würde ich nur ungern folgen wollen. Weiß nicht, ob das wirklich sinnvoll ist.

          Rolf

          --
          sumpsi - posui - obstruxi
          1. problematische Seite

            Hi,

            du setzt voraus, dass die Leute vollständig lauffähige Codesnippets posten. Das ist zumeist nicht der Fall, bzw. man muss ohnehin ran und Sachen ändern damit es läuft.

            Eher einen Button "Mach gefälligst ein Codepen für Dein Problem" neben den Buttons für Bold, Italic, Strike, ...

            (CodePen natürlich verlinkt, gerne auch noch Alternativen erwähnen/verlinken).

            Denn eigentlich ist es ja Aufgabe des Fragestellers, das zur Verfügung zu stellen.

            cu,
            Andreas a/k/a MudGuard

          2. problematische Seite

            Hallo Rolf,

            du setzt voraus, dass die Leute vollständig lauffähige Codesnippets posten. Das ist zumeist nicht der Fall, bzw. man muss ohnehin ran und Sachen ändern damit es läuft.

            Nein setze ich nicht voraus. Viele Sachen die gefragt werden erzeugen zwar kein sauberes HTML, trotzdem ist dadurch zu erkennen was gemeint ist.

            Bsp. <h1>text</h1> Wie kann ich eine Hintergrundfarbe einsetzen?

            Da brauchts kein Grundgerüst, damit der Browser das trotzdem darstellt.

            Das war hier auch der Fall. Ich hab ein Fiddle draus gemacht und musste zumindest mal die URLs ändern damit die Bilder kamen.

            Siehst du, dass musstest du erst machen. Wäre aber auch so möglich gewesen: (bitte das hier mal in die Adresszeile einfügen)

            data:text/html,<body oninput="i.srcdoc=h.value" onload="h.value=window.atob(h.value);i.srcdoc=h.value"><style>textarea,iframe{width:40vw;height:80vh;margin:10;border:3px dotted black;}body, html{margin:2%;width:100%;}textarea{width:33.33%;font-size:18}</style><h1>Hier Text oder HTML eingeben</h1><textarea placeholder=HTML id=h>PCFET0NUWVBFIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQo8aGVhZD4NCiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+DQogICAgPHRpdGxlPmRyb2huZTwvdGl0bGU+DQogICAgPHN0eWxlPg0KICAgICAgICBodG1sIHsNCiAgICAgICAgICAgIGhlaWdodDogMTAwJTsNCg0KICAgICAgICB9DQogICAgICAgIGJvZHkgew0KICAgICAgICAgICAgcGFkZGluZzogMDsNCiAgICAgICAgICAgIG1hcmdpbjogMDsNCiAgICAgICAgICAgIGhlaWdodDogMTAwJTsNCiAgICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47DQogICAgICAgICAgICBkaXNwbGF5OiBmbGV4Ow0KICAgICAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsNCiAgICAgICAgfQ0KDQogICAgICAgIC5jYW52YXMgew0KICAgICAgICAgICAgd2lkdGg6IDEwMCU7DQogICAgICAgICAgICBoZWlnaHQ6IDEwMCU7DQogICAgICAgICAgICBiYWNrZ3JvdW5kOiB1cmwoIlNvbGFycGFyay1PYmVybGF1ZGEuanBnIikgbm8tcmVwZWF0IGNlbnRlcjsNCiAgICAgICAgICAgIGJhY2tncm91bmQtc2l6ZTogY292ZXI7DQoNCiAgICAgICAgfQ0KDQogICAgICAgIC5zZWFyY2hsaWdodCB7DQogICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgICAgICAgICB6LWluZGV4OiAxMDA7DQogICAgICAgICAgICBoZWlnaHQ6IDgwMHB4Ow0KICAgICAgICAgICAgd2lkdGg6IDgwMHB4Ow0KICAgICAgICAgICAgYm9yZGVyLXdpZHRoOiAxMDB2aCAxMDB2dzsNCiAgICAgICAgICAgIGJvcmRlci1zdHlsZTogc29saWQ7DQogICAgICAgICAgICBib3JkZXItY29sb3I6ICMwMDA7DQogICAgICAgICAgICB0b3A6IC0xMDB2aDsNCiAgICAgICAgICAgIGxlZnQ6IC0xMDB2dzsNCiAgICAgICAgICAgIGJhY2tncm91bmQ6ICMwMDA7DQogICAgICAgICAgICAtbW96LWJveC1zaXppbmc6IGNvbnRlbnQtYm94Ow0KICAgICAgICAgICAgLXdlYmtpdC1ib3gtc2l6aW5nOiBjb250ZW50LWJveDsNCiAgICAgICAgICAgIC1tcy1ib3gtc2l6aW5nOiBjb250ZW50LWJveDsNCiAgICAgICAgICAgIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Ow0KDQoNCg0KICAgICAgICB9DQogICAgICAgIC5zZWFyY2hsaWdodC5vbiB7DQogICAgICAgICAgICBiYWNrZ3JvdW5kOiAtbW96LXJhZGlhbC1ncmFkaWVudChjZW50ZXIsIGVsbGlwc2UgY292ZXIsICByZ2JhKDAsMCwwLDApIDAlLCByZ2JhKDAsMCwwLDApIDUwJSwgcmdiYSgwLDAsMCwxKSA2MCUsIHJnYmEoMCwwLDAsMSkgMTAwJSk7IC8qIEZGMy42KyAqLw0KICAgICAgICAgICAgYmFja2dyb3VuZDogLXdlYmtpdC1yYWRpYWwtZ3JhZGllbnQoY2VudGVyLCBlbGxpcHNlIGNvdmVyLCAgcmdiYSgwLDAsMCwwKSAwJSxyZ2JhKDAsMCwwLDApIDUwJSxyZ2JhKDAsMCwwLDEpIDYwJSxyZ2JhKDAsMCwwLDEpIDEwMCUpOyAvKiBDaHJvbWUxMCssU2FmYXJpNS4xKyAqLw0KICAgICAgICAgICAgYmFja2dyb3VuZDogLW8tcmFkaWFsLWdyYWRpZW50KGNlbnRlciwgZWxsaXBzZSBjb3ZlciwgIHJnYmEoMCwwLDAsMCkgMCUscmdiYSgwLDAsMCwwKSA1MCUscmdiYSgwLDAsMCwxKSA2MCUscmdiYSgwLDAsMCwxKSAxMDAlKTsgLyogT3BlcmEgMTIrICovDQogICAgICAgICAgICBiYWNrZ3JvdW5kOiAtbXMtcmFkaWFsLWdyYWRpZW50KGNlbnRlciwgZWxsaXBzZSBjb3ZlciwgIHJnYmEoMCwwLDAsMCkgMCUscmdiYSgwLDAsMCwwKSA1MCUscmdiYSgwLDAsMCwxKSA2MCUscmdiYSgwLDAsMCwxKSAxMDAlKTsgLyogSUUxMCsgKi8NCiAgICAgICAgICAgIGJhY2tncm91bmQ6IHJhZGlhbC1ncmFkaWVudChlbGxpcHNlIGF0IGNlbnRlciwgIHJnYmEoMCwwLDAsMCkgMCUscmdiYSgwLDAsMCwwKSA1MCUscmdiYSgwLDAsMCwxKSA2MCUscmdiYSgwLDAsMCwxKSAxMDAlKTsgLyogVzNDICovDQogICAgICAgIH0NCiAgICAgICAgLmNlbnRlciB7DQogICAgICAgICAgICBkaXNwbGF5OiBibG9jazsNCiAgICAgICAgICAgIG1hcmdpbjogMCBhdXRvOw0KDQogICAgICAgIH0NCiAgICAgICAgLmJpbGQgew0KICAgICAgICAgICAgZGlzcGxheTogZmxleDsNCiAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICAgICAgICAgIGhlaWdodDogMTAwJTsNCg0KICAgICAgICB9DQogICAgICAgIC5laW5zIHsNCiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IGFxdWE7DQogICAgICAgICAgICB3aWR0aDogMTAwJTsNCiAgICAgICAgICAgIGhlaWdodDogMzAwcHg7DQoNCiAgICAgICAgfQ0KICAgICAgICAuendlaSB7DQogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVldmlvbGV0Ow0KICAgICAgICAgICAgaGVpZ2h0OiAzMDBweDsNCg0KICAgICAgICAgICAgYm90dG9tOiAwOw0KICAgICAgICAgICAgd2lkdGg6IDEwMCU7DQoNCiAgICAgICAgfQ0KICAgIDwvc3R5bGU+DQo8L2hlYWQ+DQoNCjxib2R5Pg0KDQogICAgPGRpdiBjbGFzcz0iZWlucyI+PC9kaXY+DQogICAgPGRpdiBjbGFzcz0iY2FudmFzIj4NCiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImJpbGQiPjxpbWcgc3JjPSJkcm9obmUxLnBuZyIgYWx0PSIiIGNsYXNzPSJjZW50ZXIiPjwvZGl2Pg0KICAgIDwvZGl2Pg0KICAgIDxkaXYgY2xhc3M9Inp3ZWkiPjwvZGl2Pg0KPGRpdiBjbGFzcz0ic2VhcmNobGlnaHQiPjwvZGl2Pg0KDQo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMy4yLjEvanF1ZXJ5Lm1pbi5qcyI+PC9zY3JpcHQ+DQo8c2NyaXB0Pg0KICAgICQoJy5zZWFyY2hsaWdodCcpDQogICAgICAgIC5vbignbW91c2Vtb3ZlJywgZnVuY3Rpb24oZXZlbnQpIHsNCiAgICAgICAgICAgICQodGhpcykuYWRkQ2xhc3MoJ29uJykuY3NzKHsnbWFyZ2luLWxlZnQnOiBldmVudC5wYWdlWCAtIDQwMCwgJ21hcmdpbi10b3AnOiBldmVudC5wYWdlWSAtIDQwMH0pOw0KICAgICAgICB9KQ0KICAgICAgICAub24oJ21vdXNlb3V0JywgZnVuY3Rpb24oZXZlbnQpIHsNCiAgICAgICAgICAgICQodGhpcykucmVtb3ZlQ2xhc3MoJ29uJyk7DQogICAgICAgIH0pDQoNCjwvc2NyaXB0Pg0KPC9ib2R5Pg0KPC9odG1sPg==</textarea><iframe id=i></iframe>
            

            Gruss
            Henry

            --
            Meine Meinung zu DSGVO & Co:
            „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“