Beiträge von Lupus_III

Lupus_III · 28. Oktober 2023

Hallo zusammen,

ich baue mir gerade zum Üben ein Testimonial "Was sagen unsere Kunden über uns"! Leider funktioniert irgendwie das JS nicht, wie ich es will. Kann mal jemand drüberschauen und mir auf die Sprünge helfen?

Hier kommt der Code:

HTML

HTML
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Font awesome cnd link-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <!-- custom css file link-->
    <link rel="stylesheet" href="testi.css/testimonial.css">

    <title>Testimonial Slider Using HTML  CSS  Vanilla Javascript</title>

    
</head>
<body>
    <div class="container">
        <div class="slide-container active">
           <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/mann.jpg" alt="">
                    <div class="user-info">
                        <h3>John Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>   
                        </div>
                    </div>
                </div>
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem repudiandae esse officiis ad quaerat harum?
                    </p>
           </div>
        <div class="slide-container">
           <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/frau.jpg" alt="">
                    <div class="user-info">
                        <h3>Jean Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>   
                        </div>
                    </div>
                </div>
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem repudiandae esse officiis ad quaerat harum?
                    </p>
            </div> 
        </div>
        <div class="slide-container">
            <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/mann.jpg" alt="">
                    <div class="user-info">
                        <h3>Martin Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>   
                        </div>
                    </div>
                </div>
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem repudiandae esse officiis ad quaerat harum?
                    </p>
            </div> 
        </div>
        <div class="slide-container">
            <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/frau.jpg" alt="">
                    <div class="user-info">
                        <h3>Valentina Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>   
                        </div>
                    </div>
                </div>
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem repudiandae esse officiis ad quaerat harum?
                    </p>
            </div> 
        </div>
        <div id="next" class="fas fa-chevron-right" onclick="next()"></div>
        <div id="prev" class="fas fa-chevron-left" onclick="prev()"></div>
    </div>

   <script src="js/testi.js"></script>
</body>
</html>

Alles anzeigen

Code

CSS
*{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 70px;
    background-color: #3498db;
}
.container{
    position: relative;
    perspective: 1000px;
}
.container .slide-container .slide{
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 5px 10px #333 ;
    width: 450px;
    padding: 20px;
    margin: 10px;
    position: relative;
    transform-style: preserve-3d;
}
.container .slide-container .slide .icon{
    position: absolute;
    top: 10px; right: 15px;
    font-size: 90px;
    color: #3498db;
}
.container .slide-container .slide .user{
    display: flex;
    align-items: center;
}
.container .slide-container .slide img{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}
.container .slide-container .slide .user .user-info h3{
    color: #333;
    font-size: 20px;
}
.container .slide-container .slide .user .user-info .stars i{
    color: #3498db;
    font-size: 15px;
}
.container .slide-container .slide .text{
    color: #333;
    font-size: 14px;
    padding-top: 15px;
    font-style: italic;
}
.container .slide-container{
    display: none;
}
.container .slide-container.active{
    display: block;
}
.container #next,
.container #prev{
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 5px 10px #3337;
}
.container #next{
    right: -90px;
}
.container #prev{
    left: -60px;
}
.container #next:hover,
.container #prev:hover{
    background-color: #333;
    color: #fff;
}

Alles anzeigen

Code

JS
let slides = document.querySelectorAll('.slide-container');
let index = 0;

function next(){
    slides[index].classList.remove('active');
    index (index + 1) % slides.length;
    slides[index].classList.add('active');
}

function prev(){
    slides[index].classList.remove('active');
    index (index - 1 + slides.length) % slides.length;
    slides[index].classList.add('active');
}

Alles anzeigen

Lupus_III · 28. Oktober 2023

Und hier kannst du dich auch austoben!

Lupus_III · 27. Oktober 2023

lichen Dank!

Lupus_III · 27. Oktober 2023

Super, danke! Noch schlanker! Weißt Du, wo man eine Auflistung der Zeichen wie "\1F44D" finden kann?

Lupus_III · 26. Oktober 2023

Danke Sempervivum für den Fingerzeig.

Ich habe jetzt mal recheriert und rumprobiert. Den Code wie es bei mir richtig angezeigt wird schreibe ich nachfolgend. Vielleicht kann es ja jemand mal brauchen.

HTML

HTML
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=ul, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="check1">1</li>
        <li class="check1">2</li>
        <li class="check1">3</li>
        <li class="check1">4</li>
        <li class="check1">5</li>
    </ul>

    <ul>
        <li class="check2">1</li>
        <li class="check2">2</li>
        <li class="check2">3</li>
        <li class="check2">4</li>
        <li class="check2">5</li>
    </ul>
</body>
</html>

Alles anzeigen

Code

CSS

ul .check1{
   
    list-style-type: "✔";
   
}
ul  .check2{
    list-style-type: "\1F44D";    
}

Lupus_III · 25. Oktober 2023

Hallo zusammen,

ich brauche mal wieder euer Schwarmwissen.

Ich mache gerade eine Webseite mit mehreren Listen. Einige dieser Liste sollen keine Punkte sondern Fontawesome Symbole haben, alle anderen nur Punkte. Ich habe versucht die betreffenden <ul><li> mit einer classe list-style: none; zu kennzeichen. Leider klappt das nicht. Hat jemand eine andere/ bessere Idee?

Code

list-style: none;

Lupus_III · 11. Oktober 2023

Zitat von m.scatello

MrMurphy
Das ist zu 100% wieder ein Thread, wo es nur eine Frage der Zeit ist, bis der Eingangspost kopiert und mit einem Link versehen wird.

Lässt sich gut daran erkennen, dass der User neu ist, der Username mit einer Zahl endet und die Frage auch mehr als merkwürdig ist.

You got bloody right!!!!

Lupus_III · 24. September 2023

Was meinst du mit Datei? HTML, JPG, PNG ... ? Und in welchem (Unter)Ordner liegt die?

Lupus_III · 23. September 2023

Nachdem sich hier niemand gemeldet hat, gehe ich davon aus, dass niemand mit einer solchen oder ähnlichen Aufgabe in seiner beruflichen Laufbahn zu tun hatte. Trotzdem danke!

Lupus_III · 13. September 2023

Hallo zusammen,

unser Turnverein bietet im Laufe der Woche verschiedene Kurse, wie Yoga, Rückenkurs, Mütter mit Baby usw. an. Wir möchten diesen Kurskalender in der Webseite veröffentlichen. Wegen der Kapazitätsplanung sollen sich Vereinmitglieder über diesen Kursplan mit einem Passwort anmelden können.

Die Kurse möchten wir auch an Nichtmitglieder gegen Bezahlung anbieten. Das heißt der Kurskalender müßte eine Funktion der Passworteingabe für Mitglieder haben aber auch die Möglichkeit für Nichtmitglieder die Kurse bei Anmeldung zu bezahlen (Paypal, Giropay ...).

Gibt es dafür ein Tool, das man fertig kaufen kann, oder weiß jemand eine andere Lösung (Webshop?) aus seiner beruflichen Praxis?

Lupus_III · 2. September 2023

Sorry, bei mir war der h3-Tag an der falschen Stelle!

Lupus_III · 2. September 2023

Hallo zusammen,

ich möchte die Beschriftung eines <a>-Tag mit einem h3 gestalten und habe das so gemacht =>

Wir sind Sponsor der XYZ<br> und demTeam-Physio </h3></a>

Der Validator meckert das als Error an. Wie geht es richtig?

Lupus_III · 30. August 2023

Ich frage mich, was so ein Formular soll? Als User würde ich so eine Prozedur ablehnen. Da erwarte ich, dass alle zu befüllenden Felder schon am Anfang erkennbar sind und ich mit der Tab-Taste von Feld zu Feld springen kann und nicht jedes mal auf weiter klicken muss.

Lupus_III · 29. August 2023

Sh.......t!!!!! Asche auf mein Haupt. Oft sind es die kleinen Dinge, die dazu führen ob etwas tut oder nicht. Danke Euch allen.

Lupus_III · 29. August 2023

Nein, das ist sicherlich nicht das Problem. Das Video wird mit der classe

.trailer{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1000;
background-color: rgba(0,0,0,0.95);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
}

ausgeblendet und mit der durch das Script eingesetzte Classe bei Click eingeblendet

.trailer.active{
visibility: visible;
opacity: 1;
}

und weil der Trailer einen z-index von 1000 hat, müßte er zu sehen sein. Ist er aber nicht. Warum?

Lupus_III · 29. August 2023

Hallo zusammen, ich wiß nicht, warum das Script nicht funktioniert. Bei click auf "Watch Trailer" soll das verborgene Video erscheinen und bei click auf das Kreuz wieder verschwinden. Im Inspector wird die Class active gesetzt.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="banner">
        <div class="content">
            <img src="assets/bg.png" alt="">
            <h2>Video Popup</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ullam illum itaque sapiente est corrupti voluptas. Consequuntur saepe ex quaerat possimus eligendi voluptates quod tenetur beatae. Aliquid tenetur ipsum fuga!
            </p>
            <a href="#" onclick="toggle();">Watch Trailer</a>        
        </div>
    </div>
    <div class="trailer">
        <video src="assets/trainingskurse.mp4" controls="true"></video>
        <img src="assets/close.png" class="close" onclick="toggle();" >
    </div>
    <script>

function toggle(){
    var trailer= document.querySelector(".trailer")
    
    var video= document.querySelector("video")
    trailer.classList.toggle("aktive");
    video.pause();
    video.currentTime = 0;
}
    </script>
</body>
</html>

Alles anzeigen

Code

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
.banner{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner .content{
    max-width: 550px;
}
.banner .content img{
    max-width: 100%;
    margin-bottom: 15px;
}
.banner .content h2{
    color: #fff;
    font-weight: 500;
    font-size: 2em;
}
.banner .content p{
    font-size: 1.2em;
    color: #fff;
    font-weight: 300;
    margin: 15px 0 25px;
}
.banner .content a{
    position: relative;
  text-transform: uppercase;
  background-color: #fff;
  color: #111;
  font-weight: 500;
  letter-spacing: 2px;
  text-decoration: none;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
}
.trailer{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1000;
    background-color: rgba(0,0,0,0.95);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 1;
}
.trailer.active{
    visibility: visible;
    opacity: 0;
}
.trailer video{
    position: relative;
    max-width: 900px;
    outline: none;
}
.close{
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    filter: invert(1);
    max-width: 32px;
    color: #fff;
}
@media (max-width: 991px){
    .trailer video{
        max-width: 90%;
    }    
}

Alles anzeigen

Lupus_III · 27. August 2023

Das war es! Vielen Dank!.

Lupus_III · 27. August 2023

Hallo zusammen, was mache ich falsch? Es werden immer nur die 2. Boxen angezeigt. Ich bin ratlos.

HTML

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Animate on Scroll</title>
    </head>
    <body>
        <h1>Animate on Scroll</h1>
        <br><br>
        <div class="box box-show"><h2>HTML</h2></div>
        <div class="box box-show"><h2>CSS</h2></div>
        <div class="box box-show"><h2>Java</h2></div>
        <div class="box box-show"><h2>JQery</h2></div>
        <div class="box"><h2>Responsive</h2></div>
        <div class="box"><h2>SEO</h2></div>
        <div class="box"><h2>Wordpress</h2></div>
        <div class="box"><h2>Support</h2></div>
        <div class="box"><h2>Res. Support</h2></div>
        <div class="box"><h2>About</h2></div>
        <div class="box"><h2>Mobile</h2></div>
        <div class="box"><h2>Content</h2></div>

       <script>
            const boxes  = document.querySelectorAll('.box')
            window.addEventListener('scroll', checkBoxes)
            checkBoxes()

            function checkBoxes(){
                const triggerBottom = window.innerHeight / 6 * 4
                boxes.forEach(box => {
                    const boxTop = box.getBoundingClientRect().top
                    if(boxTop < triggerBottom){
                        box.classList.add('box-show')
                    } else{
                        box.classList.remove('box-show')
                    }

                })
            }
        </script> 
    </body>
</html>

Alles anzeigen

Code

*{
   box-sizing: border-box; 
}
body{
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    font-weight: 300;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: hidden;
}
h1{
    margin: 10px;
}
.box{
    background-color: #fff;
    border: 2px solid #3b3b3b;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 200px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: rgba(0,0,00.2) 0px 60px 40px -7px;
    transform: translateX(400%);
    transition: transform 0.4s ease;
}
.box:nth-of-type(even){
    transform: translateX(-400%);
}
.box-show{
    transform: translateX(0);
}
.box h2{
    font-size: 22px;
    font-weight: 400;
}

Alles anzeigen

Lupus_III · 15. August 2023

Zitat von Sempervivum
Für dich selber kannst Du problemlos ein Neuladen der Seite am Cache vorbei durch Strg+F5 erzwingen. Bei der Entwicklung reicht das normaler Weise aus.
Wenn Du auch für die Besucher sicher stellen willst, dass sie die neueste Version laden, kannst Du z. B. eine Versionsnummer an die URL hängen, so:
Code
<link rel="stylesheet" href="css/select2.css?version=3">
<script src="js/select2.js?version=4"></script>
Und wenn Du dich in Javascript bewegst und z. B. fetch benutzt, geht das automatisch wenn Du einen Zeitstempel benutzt:
Code
fetch('die-url.php?time=' + Date.now(), {
    // hier ggf. die Optionen
}).then
Gerade hier hat mich der Cache, ebenso wie bei dir, früher zur Verzweiflung gebracht, weil ich über Stunden Fehler im Skript gesucht habe und es lag nur am Cache.

Danke, das werde ich mal ausprobieren. Ich suche manchmal lange nach einem Fehler und stelle dann fest, es liegt am Browsercache!!!!

Lupus_III · 14. August 2023

Hallo zusammen,

ich nutze Google Chrome. Wenn ich geänderte Webseiten auf den Webspace hochlade, sehe ich lange Zeit keine Veränderungen. Selbst dann nicht, wenn ich den Refreshbutton mehrfach drücke. Aus verschiedenen Gründen, z. Bsp. weil ich mich nicht ständig in Foren neu anmelden möchte, kommt ein Löschen des Cache nur als Notlösung in Frage.

Hat jemand eine Idee, wie man das hinkriegen kann?

Beiträge von Lupus_III

Testimonial-Slider

Brauche Hilfe bei der HTML/CSS-Übung

Listenpunkte durch Fontawesome Symbole erstzen

Listenpunkte durch Fontawesome Symbole erstzen

Listenpunkte durch Fontawesome Symbole erstzen

Listenpunkte durch Fontawesome Symbole erstzen

Hilfe bei Bildproblemen

Ich bin mir nicht sicher, wie man eine relative Datei außerhalb eines Ordners hrefft

Kursplan für Verein

Kursplan für Verein

Wie gestalte ich einen <a>-Tag richtig

Wie gestalte ich einen <a>-Tag richtig

Formular/Texteingabe lediglich eine zur Zeit - HTML, PHP, MySQL

Klasse setzen und entfernen per click

Klasse setzen und entfernen per click

Klasse setzen und entfernen per click

Bewegtes scrollen

Bewegtes scrollen

Browsercache bringt mich zur Verzweiflung

Browsercache bringt mich zur Verzweiflung