Beiträge von Sempervivum

Mal hier lesen:

https://wiki.selfhtml.org/wiki/JavaScrip…ement/scrollTop

und am besten jQuery verwenden, dann braucht man sich um die Browser-Kompatibilität keine Gedanken zu machen.

Ja, das geht auch, aber das Ergebnis ist unterschiedlich:

eq() liefert ein jQuery-Objekt, das man mit jQuery bearbeiten kann, z. B.

$('[name="ww"]')eq(1).html('<p>hallo</p>');

Die beiden aus deinem letzten Posting liefern jeweils ein DOM-Element, das Du mit einfachem Javascript bearbeiten kannst, z. B.:

$('#elternid')[0].style.backgroundColor = "red";

Zitat

es gibtssseitenda kommt der name x 2 mal oder öffters vor ,und dann den 2ten ansprechen.

Dann den Code aus meinem "Edit" in #181 verwenden.

Wie man es umgeht, weiß ich nicht. Man sollte es auch nicht versuchen, um Ärger mit Google aus dem Weg zu gehen.

Was Google betrifft, bieten sie jedoch an, eine Suche auf der eigenen Homepage einzubetten:

https://developers.google.com/custom-search/…al/introduction

$('[name="ww"]').html('<p>hallo</p>');

Ja, das ist richtig.

Zitat

was mache ich den wenn ich 2 mal oder mehrmal den gleichen namen habe??

In diesem Fall genau so. jQuery legt automatisch eine Schleife an und führt die Aktion, in diesem Fall das HTML setzen, für alle Element durch, auf die der Selektor passt. Beachte jedoch, dass das nur bei Radiobuttons sinnvoll ist oder wenn man ein Array von Formularelementen anlegt. Sonst kann man die Elemente nicht unterscheiden, analog zu mehrfachen IDs.

Edit: Oder möchtest Du ein einzelnes Element aus dem Set ansprechen? Dann geht es mit eq():

$('[name="ww"]')eq(1).html('<p>hallo</p>');

Ja, damit bin ich auch schon konfroniert worden. Der Grund ist, dass Javascript die Funktion im globalen Skope sucht, wenn sie in dieser Form inline notiert wird. Bei jsfiddle ist sie jedoch in einer Funktion gekapselt, z. B. im onload-Event, je nach Einstellung, so dass sie im globalen Scope nicht sichtbar ist. Abhilfe, indem der Listener nicht inline sondern mit addEventListener() oder äquivalent bei jQuery registriert wird.

das ein Computer mehrere millionen rechnungen die Sekunde macht?

Das bezieht sich auf Machinenbefehle. Wenn Du eine Befehlszeile in einer Hochsprache siehst, muss die geparst und in Maschinenbefehle umgesetzt werden. Und dabei können sehr viel mehr Befehle heraus kommen. Vor allem das Parsing von HTML ist aufwändig, siehe hier:

http://www.webdeveloper.com/forum/showthre…-way-to-do-this

aber das ist bei dem Problem in diesem Thread wohl weniger relevant.

scss ist ebenfalls ein Precompiler und das CSS muss kompiliert werden. Ich habe um diese ganzen Precompiler bisher einen Bogen gemacht. Sie haben insofern eine Berechtigung, weil die Möglichkeiten von CSS sehr begrenzt sind, es gibt z. B. keine Variablen, keine Funktionen und Rechenoperationen nur in sehr eingeschränkter Form (calc).

Nein, nicht beim Fiddle sondern bei Codepen im CSS-Fenster. Ich habe es getestet und mit dem kompilierten CSS läuft auch das Fiddle.

Zitat

ich weiss sowieso nicht wie das geht,kann mir dabei einer helfen.

Lies zunächst mal die Beschreibung bei Selfhtml und wenn Du dann noch Fragen hast, melde dich wieder.

https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage

Das CSS in dem Codepen verwendet Less und muss kompiliert werden. Wähle in dem Auswahlmenü rechts oben im CSS-Fenster "View compiled CSS" dann wird das CSS kompiliert und Du kannst es verwenden.

Dazu musst Du den Zustand im Local- oder Sessionstorage speichern und beim Laden wieder einlesen.

Bei Checkboxes ist es relativ einfach, wenn man den Checkbox-Hack anwendet: Einer Checkbox kann man ein Label zuordnen. Die Checkbox wird unsichtbar gemacht. Klick auf das Label steuert den Zustand der Checkbox. Zustand der Checkbox steuert das Aussehen des Labels.

https://jsfiddle.net/Sempervivum/3dyrdo07/1/

Bei Selects ist es leider nicht so einfach. Hier ist es eher empfehlenswert, ein Select mit CSS und Javascript neu zu bauen. jQuery-UI hat z. B. so etwas:

https://jqueryui.com/selectmenu/

Anscheinend sind es die String-Operationen, die ihn umbringen, denn ohne die geht es relativ schnell:

<script>
        var siz = 0;
        var data = [];
        var insane = "";
        for(var i = 0; i < 255; i++) {
            for(var i2 = 0; i2 < 255; i2++) {
                for(var i3 = 0; i3 < 255; i3++) {
                    siz = siz + 1;
                    data.push(i);
                    data.push(i2);
                    data.push(i3);
                    data.push(255);
                    //insane += i + " - " + i2 + " - " + i3 + " - " + 255;
                }
            }
        }
        console.log(siz);
        //$("form#main").empty();
        //$("form#main").append("<p>" + data + "</p>");
    </script>

Was ist denn überhaupt der Sinn der Sache? So etwas kann doch kein Mensch lesen.

Auf der Suche nach der richtigen Formel bin ich auf dieses gestoßen:

http://ge-waldbroel.nw.lo-net2.de/jenders/publik…eier_Fall1.html

Mit einen Demo in Javascript.

Das wird dir wahrscheinlich auch kein besseres Ergebnis bringen als mit der jetzigen Animation. Das Problem ist, dass die Seite, wo es eingebettet ist, nicht wirklich responsiv ist:

Zitat

dass die umgebenden Container nicht der Größe des Browserfensters folgen. Deshalb ändert sich die Größe der Animation nicht, denn sie folgt mit einer Breitenangabe von 100% dem umgebenden Container.

Ach so, dann ist es sehr einfach: Du brauchst dem Alert nur ein overflow:hidden zu geben, dann wird der Tropfen außerhalb unsichtbar.

Ah so, jetzt verstehe ich, glaube ich. Du möchtest, dass der Tropfen hinter dem Alert herunter fällt, d. h. er soll vom ganzen Alert verdeckt werden?

Zitat

das er hinter den roten verschwindet und dann weg ist und nicht unter den roten wieder raus kommt.man könnte ober und unterhalbdes alerts ja noch ein div bauen wo der tropfen hinter verschwindet.

Kein Problem, ich hoffe, ich habe dich richtig verstanden:

<div id="alert">
        <div id="kopf">Das ist ein Alert</div>
        <div id="kreis"></div>
        <div id="filler1"></div>
        <div id="inhalt">Dies ist der Inhalt</div>
        <div id="filler2">
            <button id="close">Schliessen</button>
        </div>
        <img id="drop" src="https://www.mediaevent.de/javascript/img/drop.png">
    </div>
    <style>
        #alert {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            width: 50%;
            margin: auto;
            border: 1px solid black;
            height: 50vh;
            background-color: lightgrey;
        }

            #alert > * {
                position: relative;
            }

        #drop {
            position: absolute;
            left: calc(50% - 54px);
            top: 0;
            animation: drop 4s infinite linear;
        }

        #kopf {
            align-self: stretch;
            background-color: blue;
            color: white;
            padding: 5px;
            text-align: center;
            margin-bottom: auto;
            z-index: 5;
        }

        #kreis {
            width: 100%;
            height: 30%;
            background-color: lightgreen;
            background-image: url(http://www.mediaevent.de/javascript/img/circle.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        #inhalt {
            align-self: stretch;
            text-align: center;
            background-color: lightsalmon;
            z-index: 5;
        }

        #filler1, #filler2 {
            background-color: lightgrey;
            flex-grow: 1;
            align-self: stretch;
        }

        #filler2 {
            z-index: 5;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        #close {
            margin-top: auto;
        }

        @keyframes drop {
            0% {
                top: -180px;
                opacity: 1;
            }

            90% {
                top: 100%;
                opacity: 1;
            }

            100% {
                top: 100%;
                opacity: 0;
            }
        }
    </style>

Schau mal, ob dir dies weiter hilft:

https://css-tricks.com/drag-and-drop-file-uploading/

Eigentlich um Dateien hochzuladen, ob es mit dem Drag&Drop einer Email aus Outlook funktioniert, weiß ich nicht. Konne es auch nicht testen, weil ich kein Outlook habe. Mit einer eml-Datei funktioniert es jedoch. Musste den Typ für Ajax auf "text" ändern und auf dem Server war der erste Eintrag in $_FILES leer. Ich hänge meine Testdateien mal an, dann kannst Du versuchen, ob es auch mit Drag&Drop aus Outlook funktioniert.