Beiträge von Lupus_III

Lupus_III · 13. Januar 2022

Vielleicht hilft dir dieser Link weiter => https://www.w3schools.com/php/php_includes.asp

Schau Dir mal Example 2 an.

Lupus_III · 21. November 2021

Seit kurzem wird mir die Aktualisierung meines Betriebssystem Win 10 auf Win 11 als Systemnachricht angeboten. Hat jemand damit schon Erfahrung gemacht? Ist es sinnvoll schon jetzt umzusteigen oder angesichts von Bugs bei früheren Versionen noch etwas zu warten?

Lupus_III · 3. November 2021

Hallo zusammen,

ich bin die Tage auf eine Anleitung für ein Accordion gestoßen, für das man nur CSS Code braucht. Vielleicht ist jemand auch auf der Suche nach so einer (einfachen) Möglichkeit.

HTML

HTML
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Accordion ohne JS</title>
</head>
<body>
    <div class="list">

        <div class="accordion">
            <input type="checkbox" id="accordion-1">
            <label for="accordion-1">
                1. Thema- Lesen -Sie weiter ...
                <img src="arrow.svg">
            </label>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    
        <div class="accordion">
            <input type="checkbox" id="accordion-2">
            <label for="accordion-2">
                2. Thema- Lesen -Sie weiter ...
                <img src="arrow.svg">    
            </label>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    
        <div class="accordion">
            <input type="checkbox" id="accordion-3">
            <label for="accordion-3">
                3. Thema- Lesen -Sie weiter ...
                <img src="arrow.svg">
            </label>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    
    </div>
</body>
</html>

Alles anzeigen

Code

CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap');
body,
html 
{
    align-items: center;
    background-color: lightgoldenrodyellow;
    display: flex;
    font-family: 'Roboto';
    font-size: 10px;
    height: 100%;
    justify-content: center;
    align-items: flex-start;
    margin: 5rem 0 0 0;
    padding: 0;
    width: 100%;
}

*
{
    box-sizing: border-box;
}


.list
{
    width: 100%;
    max-width: 40rem;
}

.accordion
{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 0 2rem 0;
} 
input 
{
   position: absolut; 
   z-index: -1;
   opacity: 0;
}
/* Wenn .accordion = checked, gibt es im DOM auf der Siblingsebene ein Label?
Wenn ja, hat dieses Label ein img? Wenn ja, dann dreh diese img um 180 Grad */
.accordion input:checked ~ label img{
    transform: translate(0, -50%) rotate(180deg);
}
/* Wenn .accordion = checked, gibt es im DOM auf der Siblingsebene ein .content?
 Wenn ja, dann zeige ihn mit den folgenden Befhelen an */
.accordion input:checked ~ .content{
    height: auto;
    opacity: 1;
    transform: translate(0, 0);
}

label
{
    width: 100%;
    background-color: skyblue;
    font-size: 2rem;
    padding: 2rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 150ms;
    position: relative;
    z-index: 2;
}

label:hover
{
    transform: scale(1.02);
}                

img
{
    width: 1.5rem;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translate(0, -50%);
    transition: 350ms all;
}
    

.content
{
    color: #000;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0 0 1rem 1rem;
    font-size: 1.6rem;
    position: relative;
    z-index: 1;
    transform: translate(0, -20%);
    height: 0;
    opacity: 0;
    transition: 350ms all;
    overflow: hidden;
}
    

p
{
    padding: 2rem;
    margin: 0;
}

Alles anzeigen

Die arrow.svg müßt Ihr Euch unter dem folgenden Link downloaden => https://www.flaticon.com/free-icons/arrow

Lupus_III · 17. Oktober 2021

Ich frage mich ob man das nicht auch mit media queries über CSS steuern kann. Bei kleinen Bildschirmen Video display none? Bei großen Bildschirmen Foto display none?

Lupus_III · 10. Oktober 2021

Vielleicht hilft Dir das weiter - https://xuad.net/artikel/xampp…will-wieder-nicht-starten

Lupus_III · 6. Oktober 2021

m.scatello: Ich habe keine tiefen JS-Kenntnisse. Trotzdem habe ich es mit deiner Hilfe und ein Bisschen probieren hinbekommen. Danke!

Lupus_III · 6. Oktober 2021

Hallo kann mir jemand weiterhelfen. Ich möchte, dass die Weiterleitung https://www.google.de/search auf einen neuen Tab erfolgt. Also wie bei HTML target="_blank". Ich habe keine Idee wie man das macht.

Danke!

Code

<script type="text/javascript">
        function suchen(){
                        var s =document.getElementById("suche").value;
                        window.location = "https://www.google.de/search?q=" + s;
            
        }
        function Event_Key()
        {
            if(event.keyCode == 13)
                {
                    suchen();
                }
        }
        
        </script>

Alles anzeigen

Lupus_III · 5. September 2021

Hallo zusammen,

zur Zeit, so meine ich, sind die Fonts Roboto und Poppins für Webseiten gerade in Mode. Welche Fonts benutzt Ihr?

Ich bin gespannt.

Lupus_III · 3. September 2021

Sorry, wenn ich so deutlich werde, aber mich kotzen viele Websites einfach nur noch an. Da werden sämtliche Möglichkeiten, angefangen bei der Grafik über PHP und JS, reingepackt. Alles ist in Bewegung, ständig ein Popup und die Navigation ist nur noch rudimentär vorhanden. Wann kommen wir wieder zurück zu einfacheren Seiten mit schnell erreichbarem Inhalt über eine leicht zu bedienenden Navigation. Weniger ist oft mehr.

Lupus_III · 30. August 2021

Warum machst du zum Lernen nicht einfach diesen kostenlosen Kurs? -> https://www.html-seminar.de/
und dann schau da mal rein -> https://www.w3schools.com/howt…nsive_navbar_dropdown.asp

Lupus_III · 29. August 2021

Oh Mann!!! Danke Basti, das war es.

Lupus_III · 28. August 2021

Ich weiß nicht, warum das script nicht wie gewünscht funktioniert und der Text im Kreis um das Bild läuft. Kann jemand helfen

HTML

HTML
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="circle">
        <div class="logo"></div>
        <div class="text">
            <p>LUPUS-Media - Erich Wolf - Creative Web-Design</p>
        </div>
    </div>
    <script>
        const text =  document.querySelector('.text p');
        text.innerHTML = text.innerText.split("").map(
            (char, i) =>
            <span style="transform:rotate(${i * 8.2}deg)">${char}</span>
        ).join("");
    </script>
</body>
</html>

Alles anzeigen

Code

CSS
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.circle
{
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /*background-color: #ccc;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo
{
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: url(img.jpg);
    background-size: cover;
    filter: brightness(1.5) contrast(1);
}
.text
{
    position: absolute;
    width: 100%;
    height: 100%; 
    animation: rotateText 10s linear infinite;
}
@keyframes rotateText
{
    0%{
       transform: rotate(360deg); 
    }
    100%{
        transform: rotate(0deg); 
    }
}
.text span
{
    position: absolute;
    left: 50%;
    font-size: 1.2em;
    transform-origin: 0 100px;
}

Alles anzeigen

Lupus_III · 21. Juni 2021

Auf den ersten Blick sieht es aus, wie wenn der Container für die Subnavigation nicht genügend Breite hat. Aber ohne Code kann man keine genauere Aussage machen.

Lupus_III · 11. Mai 2021

Zitat von Sempervivum

Der häufige Reload ist zwar nicht optimal und verursacht unnötige Serverlast aber nicht der Grund für das Flackern und das unvollständige Bild.
Auch das PHP ist ein Overkill an Komplexität weil die URL des Bilder ja immer die selbe ist.

Hast du auch Lösungen?

Lupus_III · 11. Mai 2021

Zitat von basti1012
Bei mir wird es richtig angezeigt.
Aber,
Beim 2 Minuten Reload werden Einzel Bilder geladen, die von oben aus immer etwas größer werden , bis das Bild vollständig ist , so wie es 1996 mit isdn mal wahr.

Ist das Bild erst mal da , wird jede Sekunde das Bild neu geladen (Siehe Konsole)
Irgendwie merkwürdig mit den Requesten , vielleicht kann da mal wer anders schauen, ob bei ihm in der Konsole auch so viel los ist auf der Seite.

Edit :
Bei ein
Code
setTimeout( reload, 1210 );
ist das natürlich klar das da soll viele Reloads laufen (ca. 30 MB die Minute).
Alles anzeigen

Wie muss ich den reload einstellen, damit es besser wird? sind 1210 Millisekunden?

Lupus_III · 10. Mai 2021

Zitat von Sempervivum

Bei mir immer noch arges Geflacker ca. alle 2 min

Hast du eine Idee?

Lupus_III · 10. Mai 2021

Ich habe mittlerweile das reload auf 1210 hochgesetzt. Ich denke das war die Lösung.

Lupus_III · 10. Mai 2021

Zitat von prodev

Was meinst du mit "pumpt"??

Schau Dir bitte den Link an.

Lupus_III · 10. Mai 2021

Hallo zusammen,

wir haben in unserem Club eine neue Webcam installiert, die im Abstand von 2 Minuten Fotos (Snap.jpg) zum Webserver hochlädt.

https://www.golfclub-oberrot-frankenberg.de/webcam.html

Die Fotos werden in einer speziellen HTML-Datei (siehe Link) angezeigt. Leider pumpt dabei das Bild so lange, bis es komplett übertragen wurde. Ich kann mir dieses Verhalten nicht erklären.

Kann jemand mal auf die relevanten Dateien schauen und evtl. eine Lösung finden? Danke!

PHP

HTML
<!DOCTYPE html>
<html>
<head>
<title>Webcam Golfclub Oberrot-Frankenberg</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="webcam.css" media="screen">
<script type="text/javascript" src="webcam.js"></script>
</head>
<body>
<h2>Webcam des Golfclubs Oberrot-Frankenberg</h2>
<p>Die von der Webcam erzeugten Bilder werden im Abstand von 2 Minuten erneuert.</p>

<div class="camview"><img src="{__LAST_IMAGE__}" alt="WebCam StopMotion View"><p>{__DATETIME__}</p></div>
<p>Datum der letzten Änderung</p>

</body>
</html>
***************************************************************************************************************
PHP
<?php
date_default_timezone_set( 'Europe/Berlin' );
error_reporting( -1 );
ini_set( 'display_errors', true );


const IMAGES_PATH_NAME = 'images/webcam/WLAN_Cam/Snapshot/';
const IMAGES_PATH = __DIR__ . '/' . IMAGES_PATH_NAME;
const IMAGES_PATTERN = 'Snap.jpg';


$itrImages = new GlobIterator( IMAGES_PATH . IMAGES_PATTERN );


$itrImages->rewind();
$aImages = [];


while ( $itrImages->valid() ) {

    $splFileInfo = $itrImages->current();
    $aImages[$splFileInfo->getCTime()] = [
            'filename' => $splFileInfo->getFileName(),
            'filepath' => IMAGES_PATH_NAME . $splFileInfo->getFileName() . '?v=' . microtime( true ),
            'filecdate' => date( 'd.m.Y H:i:s', $splFileInfo->getCTime() )
        ];

    $itrImages->next();

}


ksort( $aImages );
$aImagesData = array_values( array_reverse($aImages) );


if ( !isset($_GET['reload']) ) {

    echo strtr( file_get_contents(__DIR__ . '/webcam.html'), ['{__LAST_IMAGE__}'=>$aImagesData[0]['filepath'], '{__DATETIME__}'=>$aImagesData[0]['filecdate']]  );
    exit;

}


echo json_encode( $aImagesData[0] );

**************************************************************************************************************************************
JS
window.onload = function() { reload(); }


function reload() {

    var oXmlHttp = new XMLHttpRequest();
    oXmlHttp.onreadystatechange = function () {

            if ( oXmlHttp.readyState !== XMLHttpRequest.DONE )
                return;

            console.log( oXmlHttp.responseText );
            setTimeout( reload, 1200 );

            _response = JSON.parse( oXmlHttp.responseText );
            document.querySelector( '.camview > img' ).setAttribute( 'src', _response.filepath );
            document.querySelector( '.camview > img + p' ).innerHTML = _response.filecdate;

        };

    oXmlHttp.open( 'GET', 'webcam.php?reload=1', true );
    oXmlHttp.send();

}

Alles anzeigen

Lupus_III · 4. Mai 2021

Ich habe den Bildwechsel in meiner Webseite so gelöst,

dann muss man für einen weiteren Bildwechsel keine neue Klasse vergeben:

Code

HTML
<div class="container">
                  <img src="images/erich.JPG" alt="Erich" class="image">
                  <figcaption>Erich Wolf</figcaption> 
                  <div class="overlay">
                    <div><img src="images/erich2.JPG" alt="Erich" class="image"></div>
                    <figcaption>Erich Wolf</figcaption> 
                  </div>
  </div>

CSS
/* ################################################################ */
/* Fade in Overlay IMG */
/* ################################################################ */
 
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

Alles anzeigen

Beiträge von Lupus_III

Navigationsleiste auf allen Einzel-Seiten, grundsätzliche Vorgehensweise bei Erstellung und Pflege ?

Windows 11

Accordion nur mit CSS

Video für mobile Geräte ausblenden und mit Media Square gegen Standbild tauschen

Apache wird plötzlich heruntergefahren

Weiterleitung auf neue Webseite

Weiterleitung auf neue Webseite

Welchen Font nehmt ihr?

Das Web heute

Dropdown Menü mit submenü funktioniert nicht 😭

Text läuft nicht im Kreis um meine Foto

Text läuft nicht im Kreis um meine Foto

Dropdown-Menü Breite

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Mehrere Bildwechsel nebeneinander