Beiträge von Lupus_III

Lupus_III

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

Lupus_III

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

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

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

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

Zitat von Sempervivum

Bei mir immer noch arges Geflacker ca. alle 2 min

Hast du eine Idee?

Lupus_III

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

Lupus_III

Zitat von prodev

Was meinst du mit "pumpt"??

Schau Dir bitte den Link an.

Lupus_III

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

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

Lupus_III

Damit du über die Möglichkeiten von WP besser informiert bist und dir evtl. schon mal eine Musterseite anlegen kannst, empfehle ich dir dieses Tutorial

Lupus_III

Zitat von Zolf

Aber ich habe jetzt eine Möglichkeit gefunden und eine Lsung gefunden.

Dürfen wir die auch erfahren?

Lupus_III

Suchen > Ersetzen!?

Lupus_III

Hallo zusammen,

ich teste gerade wie ich einen Stundenplan responsive gestalten kann und habe dazu die DIV's mit Flexbox gestaltet. Leider funktioniert der Befehl für die Media Queries nicht. Aber warum? Wie kann ich jedem zweiten Child einen farbigen Background geben.

Den Code habe ich beigefügt.

HTML

HTML

<!DOCTYPE html>
<html lang="den">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Stundenplan</title>
</head>
<body>
    <div class="wrapper">        
            <div class="flexbox-row">
                <div class="flex-item">
                   <p>Montag</p> 
                </div>
                <div class=".flex-item:nth-child(1)">
                    <p>07:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(2)">
                    <p>08:00  <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(3)">
                    <p>09:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(4)">
                    <p>10:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(5)">
                    <p>11:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(6)">
                    <p>12:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(7)">
                    <p>13:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(8)">
                    <p>14:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(9)">
                    <p>15:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(10)">
                    <p>16:00 <br> Workout</p>
                </div>                 
            </div>
            <div class="flexbox-row">
                <div class="flex-item">
                   <p>Dienstag</p> 
                </div>
                <div class=".flex-item:nth-child(1)">
                    <p>07:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(2)">
                    <p>08:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(3)">
                    <p>09:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(4)">
                    <p>10:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(5)">
                    <p>11:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(6)">
                    <p>12:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(7)">
                    <p>13:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(8)">
                    <p>14:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(9)">
                    <p>15:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(10)">
                    <p>16:00 <br> Workout</p>
                </div>
                 
            </div> 
            <div class="flexbox-row">
                <div class="flex-item">
                   <p>Mittwoch</p> 
                </div>
                <div class=".flex-item:nth-child(1)">
                    <p>07:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(2)">
                    <p>08:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(3)">
                    <p>09:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(4)">
                    <p>10:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(5)">
                    <p>11:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(6)">
                    <p>12:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(7)">
                    <p>13:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(8)">
                    <p>14:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(9)">
                    <p>15:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(10)">
                    <p>16:00 <br> Workout</p>
                </div>                 
            </div>              
       
    </div>
</body>
</html>

CSS

.wrapper{
    width:90%;
    margin: 0 auto;
}
.flexbox-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
    align-content: center;
}

.flexbox-item {
    flex: 0 1 auto;
    background-color: lightblue;
}

.flex-item:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;

}

.flex-item:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(3) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(4) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(5) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(6) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(7) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(8) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(9) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(10) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}


/* Media Queries */

@media (max-device-width: 800px) { /* Breite entspricht genau 800 Pixel */ 
    .wrapper{
        width: 100%;       
    }
    .flexbox-row {
        display: flex;
        flex-direction: column;
        padding: 0 2%;      
    } 

}

Alles anzeigen

Lupus_III

Ich habe im Web diese Anleitung gefunden, die das Laden von JS durch SVG-Dateien ersetzt. Vielleicht ist das die Lösung deines Problems?

Web Icons with No External Libraries! (No More Font Awesome)

Lupus_III

Die Klasse panel und das Tag <p> wird nicht angesprochen.

Lupus_III

Schau mal hier - https://wiki.selfhtml.org/wiki/CSS/Tutor…tung/text-align

Lupus_III

Zitat von m.scatello

Wenn du weißt, das diese Systeme Käse sind, warum empfiehlst du sie dann trotzdem noch? Ich würde diese nicht im geringsten erwähnen.

Gute Frage, nächste Frage!

Lupus_III

Zitat von m.scatello

Baukastensysteme sind nie die bessere Wahl. Man ist relativ stark eingeschränkt, die Seite wird zu 90% mit JavaScript erzeugt und wenn man mal den Hoster wechseln will, dann fängt man wieder von vorne an, denn die Seite zu einem anderen Hoster mitnehmen geht nicht. Für mich sind Baukastensysteme der letzte Mist.

Das unterschreibe ich dir voll. Es gibt aber immer noch Unbelehrbare!

Lupus_III

Ich habe vor ein paar Wochen begonnen mich mit WP ernsthaft zu beschäftigen. Vorher habe ich überwiegend mit HTML, CSS und JS codiert. Angeregt hat mich dabei das YouTube Tutorial von "samira websiteleichtgemacht" -

Externer Inhalt youtu.be

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

-.

Ich habe auch schon einen Umzug von Localserver (xampp) auf Webserver problemlos durchgeführt. Geholfen hat mir dabei das:

Externer Inhalt youtu.be

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Hilfreich war mir bei der Handhabung von WP meine Vorkenntnisse über HTML und CSS. Für einen Anfänger sind mache Teile nicht ganz leicht zu verstehen. Ich hätte auch Probleme damit, die Handhabung einem Kunden, der von Webseiten machen keine Ahnung hat, dauerhaft näher zu bringen. Man kann davon ausgehen, dass beim ersten Problem der Anruf nach Hilfe kommt. Wenn ein Kunde aus Kostengründen alles selbst machen will, dann sind Baukästen die bessere Wahl.

Beiträge von Lupus_III

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

Wie hatte ich das mal gemacht-html indexseite Provider?

Gleichnamige CSS-Class unterschiedlich formatieren

Gleichnamige CSS-Class unterschiedlich formatieren

Media Queries funktionieren nicht in Tabelle - Flexbox

Script für Fontawesome-Kit nur einmal für die Seite laden

Akkordion Code

Einfaches Div mit zwei Sätzen immer mittig auf der Seite anzeigen lassen?

Welches CMS ?

Welches CMS ?

Welches CMS ?