Beiträge von Stef

    Hey,


    ich habe ein weiteres Problem. Ich möchte, wenn jemand ne Nachricht sendet, dass dann zu der neuesten Nachricht automatisch gescrollt wird.
    Habe schon sehr lange gesucht und ein paar funktionierende Scripte gefunden aber wenn ich diese meinem Wunsch anpassen möchte, funktioniert es einfach nichtmehr.


    Ich möchte, dass beim Absenden einer Nachricht, klicken/enter drücken auf button, dass dann zu neuesten Nachricht automatisch gescrollt wird.


    Habe es bis jetzt so versucht (dieser Code funtkioniert bei winow.setInterval):


    Code
    document.getElementById("sendmessage").addEventListener("click", autoscroll);
    
            function autoscroll() {
            
                  var chat = document.getElementById('chatraum');
                  chat.scrollTop = elem.scrollHeight;
            
    
        }

    Warum ist das denn so?

    Hey,


    ich verstehe nicht, warum dort nichts ausgegeben wird. Habe auch schon im Internet geschaut kurz. Aber die angewandten Beispiele haben nichts geholfen.


    Ich möchte beim klick auf ein Link die value dieses einen Linkes in einer variable speichern und dann zum Test ausgeben.


    Ich habe es so versucht (jedoch wird nichts ausgegeben):

    HTML
    <a class='sucheKontakte' value='hans@gmx.de'  href="#"><p>hans@gmx.de</p></a>
    <a class='sucheKontakte' value='hans1@gmx.de' href="#"><p>hans1@gmx.de</p></a>
    <a class='sucheKontakte' value='hans2@gmx.de' href="#"><p>hans2@gmx.de</p></a>
    <a class='sucheKontakte' value='hans3@gmx.de' href="#"><p>hans3@gmx.de</p></a>
    
    <div id="hinzugefuegteMembers">
        
    </div>
    JavaScript
    document.getElementsByClassName("sucheKontakte").addEventListener("click", test);
    
            function test(){
                var value = document.getElementsByClassName("sucheKontakte").value;
                document.getElementById("hinzugefuegteMembers").innerHTML = value;
            }


    Stef

    Hey,


    da hast du es falsch verstanden.


    Ich aktualisiere die Seite jede Sekunde,, sodass die Nachrichten auch immer angezeigt werden.


    Und ich sende die Nachrichten, welche in das Inputfeld eingegeben werden mit ajax an die php datei, wo diese Eingabe dann weiterverarbeitet wird. Und am Ende dieses Prozesses möchte ich das Inputfeld wieder leeren.


    Und wenn ich dies so mache :

    JavaScript
    document.form.chatform.value = ' ';

    bekomme ich nur beim Firefox diese Meldung: TypeError: document.form is undefined


    Habe schon nachdem gegoogelt, aber ich finde irgendwie nix für mein Anlass. Bei anderen Browsern funktioniert das.

    Bin wirklich ratlos.


    Ja da stimm ich dir zu. Habe es mal mit den xxxx getestet. Da kommt immernoch der Error.


    EDIT:


    Habe es nun lösen können mit der reset()-Funktion.


    JavaScript
    document.getElementById("chatform").reset();

    Hey,

    dein Code ist sehr veraltet, ist nicht mehr aktuell. Benutze HTML5 und CSS3 dafür.


    Und eine Tabelle als Layout für eine Seite ist absolut alt. Vergiss die Quelle wo du dies her hast. Schau hier: https://www.html-seminar.de/. Hier werden die neusten Webtechniken (HTML5, CSS3, ...) sehr gut erklärt und immer wieder aktualisiert. Mithilfe dieser Seite, habe ich es auch alles gelernt.


    Weiterhin, solltest du das Inline-CSS vergessen. Es sieht einfach unordentlich aus, und wenn man mal was ändern muss, findet man es nicht mehr.


    Bitte poste deinen Code immer in die Code-Tags (</>) im Editormenu.

    Wie man dies machen kann:



    Stef

    Hey,


    folgendes. Ich habe ein input feld. Nun gebe ich da was ein und dies wird dann zeitnah ausgegeben. Die Seite tuh ich mit ajax alle 1 sekunde nach klick auf submit button laden, und somit das neuladen der Seite verhindern. Dazu tuh ich dem input feld wieder eine leere value geben, damit es wieder leer wird.


    Aber wenn ich dies mache kommt von Firefox immer folgendes error: undefined document.form


    So leere ich dann das Input-Feld wieder:

    JavaScript
    document.form.chatform.value = ' ';

    Gibt es denn ne Möglichkeit dies anders zu machen, damit es auch jeder Browser akzeptiert ? Hat jemand damit schon Erfahrungen?


    Stef

    Hey,


    nehme Flexbox. Das ist der einfachste Weg wenn man weiß wie es geht. Ich glaubte erstmals auch nich daran aber dann war ich sprachlos ^^

    Hey.


    Was du machen kannst ist noch ein Option Tag als erstes zu erstellen und diesem die value null geben und was dann sehbar für den User ist z.b. ---- . Und dann den Option Tags immer ne value geben .


    Code
    <select name="year" id="year">
    <option value="" > ---- </option>
    <option value="1999">1999</option>
    
    <!-- und deine weiteren options -->
    </select>

    Hey,


    aso ok Danke.


    Mit dem Padding meinte ich, wenn ich jetzt alles mit flexbox positioniere, dass wenn ich dem submit button padding als % gebe dann der Padding nur nach links und rechts geht und nicht nach oben und unten. Nur bei px Angaben wird padding auf allen Seiten hinzugefügt.

    Hey,


    vielen Dank MrMurphy.


    Ich habe nun bischen mit dem code rumgetestet und habe gemerkt das erst durch folgende Angabe dies mittig positioniert wird:

    CSS
    height: calc(100vh - 0.5rem);

    Warum ist das denn so?


    Und das Problem mit dem Padding besteht ebenso noch. Sollte man wenn die %-Angaben nicht greifen px-Angaben nehmen ?

    Hey,


    ich habe noch ein Problem. Habe das Formular ja mit Flexbox poistioniert. Nun möchte ich wie immer dem submit button padding geben aber was kommt raus ?


    Der padding wird nur rechts und links ausgeführt, oben und unten nicht.


    Warum ist das denn so ?

    Hey,


    ich frage mch wie es geht ein Container im Bildschirm mittig darzustellen und dann zu zentrieren. Habe schon nachgeschaut. Habe da was von display: table-cell; / vertical-align: middle; gelesen. Aber dies funktioniert nicht. Die Darstellung ist mit Flexbox.


    Anbei 2 Bilder (wie es momentan ist, und wie es aussehen soll (so in etwa)).


    Freue mich auf Antworten.


    Ist-Zustand : https://prnt.sc/fz65q8

    Soll-Zustand: https://prnt.sc/fz65zp


    Mein aktueller CSS-Code:


    Stef