Beiträge von Jonathan C.

Jonathan C. · 12. April 2020

Zitat von Sempervivum

Ja, dann wäre das Logo von Anfang an etwas nach rechts versetzt und würde sich vom Zentrum aus ausdehnen.

Okay, vielen Dank.

Jonathan C. · 12. April 2020

Zitat von Sempervivum

Wenn ich mir deinen Screenshot oben ansehe, dann ist das Logo ja sicher in einem Container mit den Menüpunkten. Diesem könntest Du display: flex; zuweisen und dann das Logo zentrieren mit align-self: center; für den Container des Logos mit der Klasse "logocool".

Vielen Dank, ich denke, das ist ausreichend. Dankeschön für die Hilfe.

Die Alternative wäre wieder mit scale, oder?

Jonathan C. · 12. April 2020

Ja, ich könnte es ja erst einmal so versuchen und das ganze mal anschauen.

Jonathan C. · 12. April 2020

Tausend Dank! Jetzt funktioniert das wunderbar!

Abschließend habe ich noch eine Kleinigkeit.

Das Logo ploppt jetzt immer so aus der linken oberen Ecke heraus auf. Kann man das irgendwie einstellen, dass das mittig aufploppt?
Das ist jetzt vielleicht ein wenig pingelig. Wenn's nicht geht oder zu umständlich ist, dann auch kein Problem.

Jonathan C. · 12. April 2020

Okay, weil wie gesagt. Jetzt passiert folgendes:

Das Logo ist jetzt bereits vor dem Scroll-Event da und beim Scrollen verschiebt sich lediglich das Menü, aber nicht mehr das Logo.

Jonathan C. · 12. April 2020

Zitat von Sempervivum

Und stört es jetzt, dass das Div auch im unsichtbaren Zustand den Platz einnimmt? Wenn ja, einfach width und height ändern anstatt transform:scale

Ja das stört schon, weil die Menüleiste sonst sinnlos verschoben ist, wenn da gar kein Bild ist.

Hab das jetzt so gemacht:

CSS

.logocool {
         margin-top: -14px;
         height: 0;
         width: 0;
         /* Bild zunaechst unsichtbar machen */
     }
     #upperlogo.visi {
         /* jetzt das Bild sichtbar machen */
         height: 55px;
         width: 57px;
     }

Alles anzeigen

Hab ich das so jetzt richtig verstanden? Ich glaube nicht, weil das Logo ist jetzt einfach von Haus aus riesig und nur das Menü verschiebt sich beim Scrollen nach rechts.

Jonathan C. · 12. April 2020

Zitat von Sempervivum

Da sind wir jetzt mit dem scale u. U. auf falschen Weg, denn dabei ist es so, dass das Element auf wenn es auf 0 herunter skaliert ist, den Platz einnimmt. Lass uns das erstmal zum Laufen bringen und dann sehen wir weiter.

Okay, danke schon mal. Mit deinem Code funktioniert das jetzt zunächst.

Jonathan C. · 12. April 2020

Zitat von Sempervivum

Das ist nicht verwunderlich, denn ich hatte bisher nichts von dem getestet. Werde ich jetzt aber tun ...

Vielen vielen Dank!

Eine Sache noch:

Ich sollte ja das style="display: none;" entfernen. Dies hatte ich drinstehen, damit der Div nur angezeigt wird, wenn das Scroll-Event gestartet ist, da dort sonst ein unschöner freier Platz ist. Jetzt wird der Div aber immer angezeigt. Kann ich den auch einfach über CSS ausblenden?

Jonathan C. · 12. April 2020

Danke, dass du dir Zeit für mein Anliegen nimmst.

Ich habe das jetzt genau so gemacht, wie du es gesagt hast, allerdings funktioniert die Animation beim Scrollen nun gar nicht mehr.

Jonathan C. · 12. April 2020

Danke für deine Antwort.

Ich habe hier einmal einen Screenshot:

html-seminar.de/woltlab/attachment/2318/

Nachdem ich deinen Code eingefügt habe, ist unter der Menüleiste plötzlich ein weißer Abstand.

Zudem erfolgt nun gar keine Animation mehr. Vorher wurde das Bild in dem freien Platz neben "Home" eingeblendet.

Wahrscheinlich habe ich das lediglich falsch verstanden.

Hier noch einmal mein Code:

CSS

// Klasse des eigentlichen Bildes .upperlogo ist der div //
    .logocool {
        margin-top: 6px;
        height: 55px;
        width: 57px;
        -webkit-transition: -webkit-transform 0.7s;
        transition: transform 0.7s;
    }
    #upperlogo.hidden {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
    }

Alles anzeigen

JavaScript

if(window.matchMedia('(min-width: 769px)').matches){
        if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                document.getElementById("upperlogo").classList.add("hidden");
            } else {
                document.getElementById("upperlogo").classList.remove("hidden");
            }
        }
    }

PHP

<div class="logocool" id = "upperlogo" style="display: none;">
        <img src="https://teamforum.eu/ws/images/styleLogo-e38c8ee46e8cf41b83497ce240d4503b1dc86a7e.png"  alt="" >
</div>

Danke im Voraus.

Jonathan C. · 12. April 2020

Danke erst einmal für deine schnelle Antwort.

Zitat von Sempervivum

Am besten geht so etwas, wenn man es durch Hinzufügen und Löschen einer Klasse macht, dann kannst Du beliebige CSS-Regeln steuern, ohne im JS etwa ändern zu müssen.

https://wiki.selfhtml.org/wiki…ipt/DOM/Element/classList

Habe ich richtig verstanden, dass ich dann immer anstatt document.getElementById("upperlogo").style.display = "flex" die add bzw. remove-Funktion ausführen soll?

Und habe ich richtig verstanden, dass ich dann zwei Klassen benötigt, also eine für add und eine für remove?

Ich verstehe nämlich leider nicht, wie ich das jetzt genau verwirklichen kann. Bin da leider ein Anfänger.

Könntest du mir das vielleicht noch einmal genauer erklären, insofern das den zeitlichen Rahmen nicht sprengen würde?

Jonathan C. · 12. April 2020

Hallo,

ich habe eine Menüleiste, in der beim Scrollen ab einem gewissen Punkt ein Logo (Bild) eingeblendet wird.

Dies funktioniert so weit alles.

Nun möchte ich aber, dass beim Einblenden ein CSS-Effekt auftritt, und zwar, dass das Bild dann mit einem "Größerwerden" eingeblendet wird, also dass es nicht einfach sofort da ist.

Wenn die Javascript-Animation wieder deaktiviert ist, soll das Logo mit einem "Kleinerwerden" ausgeblendet werden.

Ich habe dies bereits mit "transition" in der CSS-Klasse getestet, allerdings hat dies nicht funktioniert.

Was muss ich da tun? Bitte um Hilfe.

Liebe Grüße und Danke im Voraus

Jonathan C.

Mein Code:

JavaScript

<script>
    window.onscroll = function() {scrollFunction()};

    var element = document.getElementById("pageHeaderFacade");

    if(window.matchMedia('(min-width: 769px)').matches){

        document.getElementById("upperlogo").style.display = "flex";
    }

    function scrollFunction() {
    if(window.matchMedia('(min-width: 769px)').matches){
        if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                document.getElementById("upperlogo").style.display = "flex"
            } else {
                document.getElementById("upperlogo").style.display = "none"
            }
        }
    }
</script>

Alles anzeigen

Jonathan C. · 11. April 2020

Hallo zusammen,

ich habe mir ein Menü erstellt. Beim Scrollen wird im Menü ab einem bestimmten Punkt ein Bild eingeblendet. Dies funktioniert auch so weit.

Nun habe ich dazu allerdings 3 Probleme bzw. Fragen.

1. Wenn ich die Seite neu lade, ist das Bild automatisch eingeblendet. Dies soll allerdings erst beim Scrollen passieren und nicht bereits davor. Wie kann ich das beheben?

2. Die JavaScript-Animation soll nur am PC bzw. Tablet (screen-md-up) erfolgen und nicht am Handy. Wie kann ich das verwirklichen?

3. Momentan habe ich in meinem Code einfach nur eine Zahl (250 siehe Code) angegeben, ab der die Animation erfolgen soll. Wie kann ich hierfür eine PHP-Klasse angeben? Ich möchte, dass die Animation erst erfolgt, wenn eine bestimmte PHP-Klasse erreicht ist, da mir gesagt wurde, dass meine Lösung programmiertechnisch sehr unschön ist.

Mein Code:

JavaScript

<script>
    window.onscroll = function() {scrollFunction()};
    var element = document.getElementById("pageHeaderFacade");
    if(window.outerWidth<769){
        document.getElementById("upperlogo").hidden = true;
    }
    function scrollFunction() {
    if(window.outerWidth>=769){
        if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                document.getElementById("upperlogo").hidden = false;
            } else {
                document.getElementById("upperlogo").hidden = true;
            }
        }
    }  
</script>

Alles anzeigen

PHP

<div class="logocool" id = "upperlogo">
                   <img src="https://teamforum.eu/ws/images/styleLogo-e38c8ee46e8cf41b83497ce240d4503b1dc86a7e.png" alt="" height="55px" width="55px">
</div>

Ich bitte um Hilfe, da ich nach stundenlangem Rumprobieren leider keine Lösung gefunden habe.

Vielen Dank im Voraus und noch einen schönen Abend.

Liebe Grüße

Jonathan C.

Jonathan C. · 30. März 2018

Danke schonmal.

Das Problem ist, dass durch PHP ja nur die Bannliste synchronisiert wird.

Das heißt, wenn in der TeamSpeak-Bann liste ein Bann verschwindet, da er abgelaufen ist, steht er ja auch in PHP nicht mehr da.

Aber ich möchte ja, dass alle Banns, die jemals durchgeführt werden, dennoch auffindbar sind.

Verstehst du , was ich meine?

Jonathan C. · 28. März 2018

Ich habe es jetzt doch gefunden.

@Steff:
Ich weiß allerdings was ich hiermit jetzt machen soll.

https://docs.planetteamspeak.c…b5aa86e66524a8ef23a4a0a21

Jonathan C. · 28. März 2018

Zitat von Stef

Hey,

schau mal hier: https://docs.planetteamspeak.com/ts3/php/framework/

Vielen Dank schon einmal.

Bedauerlicherweise habe ich dort nichts zum Thema Bannliste gefunden. :o

Jonathan C. · 26. März 2018

Hey,

ich würde gerne alle Banns, welche auf meinem TeamSpeak-Server ausgeführt wurden, in einer Datenbank speichern.
Da TeamSpeak-Banns, wenn sie abgelaufen sind, aus dem Protokoll gelöscht werden, ich aber alle Banns, welche jemals durchgeführt wurden, sehen möchte, benötige ich ein kleines Webinterface, in dem alle Banns (Datenbankeinträge) angezeigt werden.
Hat jemand von euch eine Idee, wie ich dies umsetzen kann?
Vor allem die Verbindung von TeamSpeak zu Datenbank.

Danke im Voraus.

MfG

Jonathan C. · 8. März 2018

Zitat von basti1012
background-color: opacity; = kenne ich nicht

list-style-type: none; = bin ich mir nicht sicher ,aber ich mache es ohne type

font-family: 'Roboto';, sans-serif; = ";" zuviel
Code
hr {
  width: 30px;
  height: 3px;
  background: #494949;
  border: 0;
  margin: 0 auto 40px auto;
}
Könnte man auch mit border-bottom erreichen,ist aber nicht wichtig.

-o.transition: all 300ms = Punkt muß "-" sein
overflow::hidden = doppelpunkt zuviel

Alles flüchtigkeits Fehler ,passiert halt .

Hier habe ich alle Fehler raus gemacht,auch die der Valiator angezeigt hat .

http://sebastian1012.bplaced.n…te/joooonahan-layout.html

Aber mach das Bild kleiner ,das ist einfach zu GROSSSSS
Alles anzeigen

Vielen Vielen Dank.

Jonathan C. · 8. März 2018

Zitat von Sempervivum

Gängiges Problem: Steht das CSS in einer externen Datei gilt deren Verzeichnis als Basis für Bildpfade etc.

D. h. die URL müsste laufen:

background-image: url("../img/landing.jpg");

Vielen Dank, es funktioniert.

Ich frage mich nur, warum es beim Logo auch ohne ../ klappt.

EDIT: hat sich geklärt

Jonathan C. · 8. März 2018

Habe die Seite mal hochgeladen:

http://teamforum.eu/demo/flatly/

Danke schonmal!

Beiträge von Jonathan C.

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

[Anfänger] Hilfe bei Neuladen und Bildschirmgrößen

TeamSpeak-Banns in Webinterface

TeamSpeak-Banns in Webinterface

TeamSpeak-Banns in Webinterface

TeamSpeak-Banns in Webinterface

Bild wird nicht angezeigt

Bild wird nicht angezeigt

Bild wird nicht angezeigt