Beiträge von Muecke

    Puu hat schon mal jemand gewagt zu erwähnen das JS echt schwer ist, ... so kommt es mir zumindest vor.


    so richtig bin ich da noch nicht drin, habe es jedoch geschafft den Code etwas zu verstehen, und zu erweitern :-)

    mein eingabe Feld wird jetzt nach dem eintragen immer wider gelehrt. So das nichts altes mehr drin steht.


    sieht da so aus:

    Code
    1. document.getElementById('name_eintragen').addEventListener('click',function(){
    2. Inva = document.getElementById('clone_name');
    3. if(Inva.value.length>=5){
    4. document.getElementById('clone').innerHTML=Inva.value;
    5. }else{
    6. document.getElementById('clone').innerHTML='Dein Text ist zu kurz';
    7. }
    8. document.getElementById('clone_name').value='';
    9. });



    Danke für eure Hilfe.

    Mein Projekt ist nun endlich fertig.


    Gruß Mücke

    Hey,


    Oh ja ich bin noch am lernen, und ich bin echt glücklich das ich das so hin bekommen habe wie es gerade läuft.


    habe mir den Link zu 'EventTarget.addEventListener()' angeschaut.


    Wenn ich das richtig verstanden habe muss ich im HTML Code dann nicht mehr angeben das was gemacht werden soll, sondern habe in der JS Datei stehen welche ID`s etc. überwacht werden sollen und was dann gemacht werden muss soll.

    Das klingt sehr spannend und aufgeräumter für mich da HTML in der HTML Datei ist und JS in der JS Datei so wie CSS in der CSS Datei :-) und es wird nichts vermischt.


    Mal schauen ob ich das Beispiel von oben umgebaut bekomme.

    Jedoch ist JS wie Chinesisch für mich, und ich kann noch nicht mal Englisch. :-(


    Gruß Mücke

    kannst du mal link zu den ganzen Projekt geben.

    https://codepen.io/Muecke/pen/bPjMqa?editors=1010

    Bist du sicher das da nicht irgendwo sonst noch auf das Internet zugegriffen wird ?

    Da min ich mir so ziemlich sicher es ist sehr klein das Projekt.

    Hast du auch mal in der Console geschaut ob da Fehler sind ?

    Was ist die Console ?

    Dann mal nee Frage, warum bindest du das erste Script ein ? Wozu soll das sein ?

    Das Fragt zum Beispiel die Internet Seite ab( sag zumindest auf der schnelle so aus ). Wenn das nicht geht sollte auch schon ein Fehler in der Console sein.


    Nimm das erste Script mal raus , und die anderen beiden brauchen meines wissens kein Internet zugang

    das hatte ich bei dem Beispiel so gefunden um Boxen zu verschieben und zu Kopieren, daher dachte ich das gehört dazu.

    habe es raus genommen, danach läuft es immer noch :-) somit benötigt man das erste nicht :-)


    Edit: Dieses:

    hatte ich zunächst überlesen. Was meinst Du mit "bei mir auf dem Rechner"? Du musst sie dort ablegen, wo auch die HTML-Seite liegt bzw. in einem Unterverzeichnis, d. h. auf dem Pi, und von dort einbinden, also z. B. so:

    <script src='js/jquery.min.js'></script>

    wenn sie in einem Unterverzeichnis "js" liegen.

    Das ist mir jetzt etwas Peinlich, habe das ganze nochmal aus dem Netz Kopiert, sprich den Link aufgemacht und alles raus kopiert und in die Datei auf meinem Rechner eingefügt.


    Dann habe ich die Datei neu eingebunden mit dem richtigen Unterverzeichnis, und siehe an es funktioniert :-)


    Das Pi habe ich leider noch nicht :-( wollte erst schauen ob ich das mit dem Code hin bekomme.



    Gruß Mücke



    Hallo miteinander,


    in einem Projekt habe ich folgenden Code mit eingebunden.

    Code
    1. <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
    2. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    3. <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>


    Mein Problem ist nun, das das Projekt auf einem Raspberry Pi ohne Internet zugriff laufen soll.

    Ich habe den Code der verlinkten Dateien schon kopiert und in neue Dateien geschrieben bei mir auf dem Rechner, doch leider geht meine Seite die ich gebaut habe dann nicht mehr :-(


    Wie kann ich das denn hinbekommen das ich Ohne Internet zugriff dennoch auf die libs nicht verzichten muss?


    Gruß Mücke

    habe es hin bekommen :-)


    HTML:

    Code
    1. <input type="text" name="button1Name" id="clone_name" onclick="this.value=' '" value="Nachname, Vorname">
    2. <a href="#" onClick="clone_eintragen()">Eintragen</a>
    3. <div draggable="true" id="clone" class="vorlage">Max und Moritz - Erster Streich</div>


    JS:

    Code
    1. function clone_eintragen(){
    2. InputText = document.getElementById("clone_name").value;
    3. document.getElementById('clone').innerHTML=InputText;
    4. }

    Hallo miteinander,


    ich möchte mit meinem Link (Javascript) das Textfeld auslesen und an meine ID 'clone' senden, wie mache ich das?


    Aktuell sende ich den Text 'JA' an die ID, doch dafür soll der Inhalt des Input Feldes genommen werden mit der ID 'button1Name'


    Code
    1. <input type="text" name="button1Name" id="button1Name" onclick="this.value=' '" value="Nachname, Vorname">
    2. <a href="javascript:document.getElementById('clone').innerHTML='JA';void(0);">Eintragen</a>
    3. <div draggable="true" id="clone" ondragstart="dragStart(event);" class="vorlage">Max und Moritz - Erster Streich</div>

    Code ist auch hier hinterlegt: https://codepen.io/Muecke/pen/KjrxRq


    Gruß Mücke

    Ich hätte es gern näher erklärt, aber der Zug mit dem Drag&Drop war schon voll abgefahren, da wollte ich mich mit meinen unmaßgeblichen Vorstellung nicht mehr aufdrängen.

    alles klar.

    beim nächsten mal dann ;-)



    Bin gespannt ob ich die zwei offenen Sachen noch hin bekomme.

    Leider verzweifle ich gerade beim Editieren der Box über den Edit Knopf :-(

    Ich habe noch keinen Ansatz gefundenen im Netz :-( dazu ;-(

    ....

    Also beschreib nochmal was da jetzt noch rein muß ?

    ....

    OK. Habe noch einiges hin bekommen mit herum experimentieren.

    das ID Problem der ziel Zelle ist gelöst und das der NeuwnID wenn eine Kopie erstellt wird auch.


    Was noch eingebaut werden muss.


    1. Beim Verschieben der Boxen (solange man die Maus gedrückt hält) soll die Ziel Zelle sich verfärben

    ist im ersten Code drin, habe es aber nicht verstanden wo und wie das geht :-(


    Bevor ich es vergesse der Aktuelle Code:

    https://codepen.io/Muecke/pen/bPjMqa

    Gruß Mücke

    Das ist ja in diesem Forum an der Tagesordnung: Weitschweifigkeit gewinnt, Substanz hat keinen Stellenwert.

    Das wahr keine Absicht, du hast aber schon gesehen das ich dazu geschrieben habe das ich nicht verstanden habe was du mir sagen wolltest? daher konnte ich auch schlecht drauf eingehen.

    Ich habe einen Neuen Code: https://codepen.io/Muecke/pen/bPjMqa



    Was habe ich hin bekommen:

    1. Die Box aus dem Pool wird Kopiert und nicht verschoben

    2. Das ablegen erfolgt bei der Maus und die Box richtet sich nach der Tabelle aus


    Was mich dabei stört

    1. Ich habe im HTML Code doppelt die ID`s [id="ziel"] , wie kann ich das im JS auf eine class umschreiben?

    2. Es wird nicht mehr angezeigt in welcher Zelle abgelegt wird, ist vorher Blau im Hintergrund geworden

    3. Ich kann die Boxen in der Tabelle nicht mehr verschieben, wie kann ich die ID der Kopierten Box so abändern das eine weitere Bedingung ins JS eingebaut werden kann das dann verschoben wird?

    4. Das abändern des Textes geht auch nicht mehr. habe ich mit Absicht raus genommen, da ich nur noch unten im Pool den Text ändern konnte jedoch in der Tabelle dann nicht mehr, und wenn ich ein mal den Text geändert hatte konnte ich die Box nicht mehr verschieben/ Kopien


    Gruß Mücke



    [EDIT]

    3. verschieben in der Tabelle, habe ich zum teil hin bekommen.

    Beim Kopien wird eine Neue ID erstellt.

    nodeCopy.id = "newId";

    Die kann ich abfragen, und sagen das es dann verschoben werden soll, jedoch wenn mehr als 1 mal die selbe Box (normal) in der Tabelle sich befindet ist auch die ID mehrmals vorhanden was zu Fehlern führt beim verschieben des Elementes. Habt Ihr eine Idee wie ich das in den Griff bekommen kann, das die ID sich ändert? ich die dennoch abfragen kann?

    Sorry die Antwort von Sempervivum habe ich gestern übersehen, Sorry.

    Ich verstehe nicht ganz wie das gemeint ist mit den zwei Textfeldern in der Tabelle.


    Ich habe ca. 25 Mitarbeiter die Geräte mit nehmen können, die beiden unteren Boxen sind als Vorlage gedacht, die Vorlage soll jedoch immer vorhanden sein egal wie oft man die in die Tabelle gezogen hat.


    [OR] Codepen

    In zwischen finde ich das echt gut, danke das du mir das gezeigt hast.


    [CSS änderung] Das danke meine ich ernst und nicht Sarkastisch. ich habe mir alles mögliche im Netz zusammen gesucht und zusammen gebaut und verändert.

    Bei dir sieht der HTML und CSS Teil deutlich aufgeräumter aus :-) Danke dafür das habe ich so übernommen.


    [Boxen werden wo anders angelegt]

    Genau das ist eins der Probleme.

    Die Gelbe Box ist so groß wie drei Boxen der Tabelle.

    Beim Ziehen der Gelben Box, egal wo die Maus sich befindet, wird immer die Mitte der Box genommen zum ablegen, das ist im Übrigen in deinem Code auch so. nur das bei dir die Box sich nicht mehr an die Tabelle anpasst. Woran liegt das?



    [die Boxen clonen]

    Ich verstehe den JS Teil überhaupt nicht :-(


    Habe ich das so richtig verstanden?

    Der teil ist dafür da das ich die Boxen überhaupt verschieben kann:

    Code
    1. $('.normal').draggable({
    2. helper: 'clone'
    3. });

    Der Teil ist dafür da, wo ich die Box ablegen kann?

    Code
    1. $('.DD').droppable({
    2. accept: '.normal',
    3. hoverClass: 'hovering',
    4. drop: function(ev, ui) {
    5. ui.draggable.detach();
    6. $(this).append(ui.draggable);
    7. }
    8. });


    Wenn das so ist, dann müsste also in den Teil "$('.DD')" das mit dem clonen hinein?


    Oder habe ich das Falsch verstanden?

    So ich habe den Code jetzt alles in der Codepen hochgeladen.

    Habe auch gesehen das du einiges im CSS geändert hast, danke.


    Ich hoffe das ich das Richtig gemacht habe: https://codepen.io/Muecke/pen/bPjMqa


    Mit deinem Code komme ich nicht ganz klar, er macht eine Kopie, in der DIV 'copybox' Ok, so hatte ich mir die Kopie nicht vorgestellt.


    ich habe noch einen kleinen Text auf der Seite mit eingebaut:

    Pool möglicher Boxen:

    die Orange und Rote Box unter der Tabelle sind Musterboxen, die sollen da immer stehen bleiben.

    Beim verschieben der Orange und Rote Box soll also eine Kopie der jeweiligen Box in die Tabelle erstellt wenden.


    Wenn die Orange und Rote Box schon in der Tabelle ist dann soll keine Kopie mehr entstehen sondern sie soll tatsächlich nur noch verschoben werden.

    Wenn ein Mitarbeiter ein gerät mit nimmt, dann tränt er sich nicht wider aus ! sondern bleibt einfach drin stehen.


    wenn der Mitarbeiter ein anderes gerät mitnehmt, kann er seine Box einfach in der Tabelle verschieben, oder er zieht von den unteren Boxen (außerhalb der Tabelle) einfach eine neue Box in die Tabelle und Trägt sich noch mal ein.

    Also das Codepen ist mir bis jetzt echt neu gewesen :-(

    habe mich jetzt dort Registriert :-)

    Wenn ich in deinem Code was ändre siehst du das dann ?


    Die Daten werden scheinbar zusammen geschrieben da in deinem Code kein Link zu CSS oder JS noch im Code zu finden sind.


    Das die Box dort abgelegt wird wo man mit der Maus los lässt ist richtig das soll sie auch.

    Wenn man die Box verschiebt sieht man auch wo sie abgelegt wird da die Box der Tabelle sich Blau verfärbt.


    Mit Kodieren meine ich.

    Wenn ich von unten die Gelbe oder Rote Box nehme und in die Tabelle Ziehe dann ist die Box unten ja nicht mehr da, ich möchte jedoch das die Box unten nicht verschwindet sondern eine Kopie der Box erstellt wird in der Tabelle wo ich sie los gelassen habe.

    Erst mal vielen lieben dank für deine Links.

    Habe jetzt was zusammen gebaut :-)


    Ich habe noch ein paar Probleme :-(


    1. Beim Verschieben wird immer die Mitte der Box als neuer Pointe genommen, wie kann ich das auf die Linke Obere Ecke der DIV Box setzen?

    2. Beim ersten verschieben der Box soll eine Kopie erstellt werden, wie macht man so etwas?

    3. Den Text ändern in der Box klappt finde ich jedoch etwas Umständlich, hat jemand eine Idee wie man das besser darstellen könnte?

    eventuell kann man das ja per CSS so einstellen das wenn man den Text ändern kann die Hintergrund Farbe sich ändert?


    Habe alle Dateien angehängt, jedoch mit der Endung .txt versehen.


    Gruß Mücke

    Cool, danke die Beispiel werde ich mir anschauen und durcharbeiten, und entsprechend zusammen führen und anpassen auf mich. DANKE.


    Ich habe ca. 25 Geräte die immer für 3 Stunden mit genommen werden und dann wider kommen (in der Regel)

    Jetzt möchte ich das jeder der das gerät mitnehmt sich in eine Liste einträgt, erste Spalte ist der Geräte Name, die Box die man dann in die Liste Kopiert mit seinem Namen bedeutet das man es mit genommen hat in seine Abteilung.

    So hat man schnell und einfach eine übersieht wo welches gerät gerade ist, am ende vom Tag müssen alle Geräte wider zurück gebracht werden.


    Es soll keine Archivierung werden wann wer was mit genommen hat daher auch keine Speicherung der Daten sondern nur ein Übersicht für den Aktuellen Tag.


    ich habe vor einen großen Monitor mit Maus / Tastatur bereit zu stellen so das es jeder nutzen kann.


    ich hoffe das man versteht was ich machen möchte.




    danke für die Beispiele, ich werde das zeitnah durcharbeiten und mich wider melden.

    Ich verstehe es nicht wo ich den Code der auf der Seite Natives Drag & Drop in HTML5 steht denn hin schreiben soll, denn HTML ist es ja nicht und CSS auch nicht :-(


    ich dachte an Drag&Drop da es eine User freundliche Möglichkeit wäre ;-

    habe auch schon dran gedacht, das ganze per PHP zu machen, und beim Anklicken ein entsprechendes Formular aufgehen zu lassen in das man dann seine Daten eintragen kann, zum Speichern. Jedoch ist das finde ich nicht so User Freundlich, jedoch auch möglich :-)


    Übersicht.jpg


    Das ist ja die Seite die ich bisher gebaut habe, die Unteren Boxen ist die Gelbe und Rote Box gemeint.

    Das sollen die Muster Boxen sein die es gibt, die man in die Tabelle Kopien kann so oft man möchte.

    Bei jedem Kopiervorgang soll nach einem Text gefragt werden (Gelb Name) (Rot Bemerkung).

    Wenn die Kopierten Boxen ein mal in der Tabelle sind kann man die verschieben (nickt Kopieren) der Text soll jedoch nicht mehr geändert werden können.


    ps. warum werde ich nicht per Mail benachrichtigt bei antworten?



    Wie gesagt ich tue mich mit dem Beispiel der Webseite schon schwer und bekomme das nicht nach gebaut :-( da ich nicht verstehe wo was hin kommt im Code HTML, HTML5, CSS.

    Hey,


    das mit Google habe ich schon versucht, ich glaube jedoch das ich nach den Falschen Suchbegriffen gesucht habe, zumindest habe ich nichts in dieser Art gefunden :-(.


    Was ich gefunden habe ist das hier: Natives Drag & Drop in HTML5 Nur leider habe ich das nicht mal auf meine DIV Boxen angewendet bekommen :-(.

    ich verstehe nicht was da wo hin geschrieben werden muss / soll :-(.


    wie ich gerne vorgehen würde.


    0. Layout erstellen

    1. die Zwei unteren Div Boxen verschiebbar machen

    2. Die Zwei unteren DIV Boxen Kopien wenn das erste mal verschoben

    3. Die Zwei unteren DIV Boxen beim ersten Verschieben Text abfragen vom User

    4. DIV Boxen in der Tabelle so einstellen das die Zwei Unteren Boxen drüber gelegt werden können.

    5. das verschieben der Zwei Boxen in der Tabelle zulassen ohne Kopien


    Jedoch fehlt mir der Ansatz.

    Was ich verstanden habe ist das es mit DIV Boxen wohl gut gehen soll daher habe ich daraus das Layout erst ein mal gebaut.


    Wenn ich etwas vergessen habe oder die reihen folge ändern sollte bin ich immer offen für vorschlage.


    Kann mir jemand da etwas weiterhelfen?

    Hallo miteinander,


    ich möchte eine Übersicht über den Status von Geräten erstellen, und das am besten mit HTML 5 oder Java Script.

    Leider ist mir beides nicht geläufig :-(


    Ich habe im HTML und mit etwas CSS eine Kleine Übersicht gebaut wie ich mir das vorstelle.


    In Spalte 1: ist immer der Name des Gerätes

    Spalte 2 bis 26: ist der verbleib des Gerätes


    Unter der Tabelle habe ich zwei Elemente:


    Gelb: diese geht immer über 3 Spalten und ist für die Leitgabe gedacht.

    Das soll man per Drag and Drop in die Tabelle Ziehen können, Dabei soll eine Kopie des Elementes erstellt werden, wenn man es dann in der Tabelle hat soll man durch abtippen seinen Namen eintragen können, Wenn das Element schon in der Tabelle steht soll es auch in der Tabelle verschoben werden können hierbei soll keine Kopie entstehen. der Name soll im Nachhinein nicht verändert werden können.


    Rot: Das geht über die Gesamte Tabelle und soll wie beim gelben die selben Funktionen haben, nur das nicht der Name sondern eine Bemerkung eingetragen werden soll.


    Die Daten sollen nicht im Hintergrund gespeichert werden !


    Ist das ein Projekt das ich als Anfänger hin bekomme?

    oder ist das schon eine Nummer zu groß? für mich?


    Kann mir dabei jemand Helfen?

    ist das Schwer zu erstellen? was ich mir vorstelle?


    Gruß Mücke



    PS. HTML und CSS Datei habe ich angehängt.

    Über Feedback würde ich mich sehr freuen.


    Start_html.txt ist die HTML Datei

    design.txt ist die CSS Datei

    Dateien

    • design.txt

      (1,79 kB, 1 Mal heruntergeladen, zuletzt: )
    • Start_html.txt

      (10,11 kB, 1 Mal heruntergeladen, zuletzt: )

    Hallo miteinander,


    ich möchte eine Stoppuhr bauen mit anschließendem Formular so das sich der User eintragen kann die Daten des Users sollen gespeichert werden.

    Das ganze soll auf einem Lokalem Rechner laufen und ich wollte es vermeinten einen Server zu installieren.


    Aus diesem Grund würde ich gerne auf PHP gänzlich verzichten.

    Stoppuhr habe ich fertig Formular steht auch, nur das Speichern und das übernehmen der gestoppten zeit ins Formular ist noch ein Problem für mich.

    Vielleicht habt Ihr eine Idee wie man das machen könnte.


    Im Anhang findet Ihr meine komplette Struktur.


    Mit der Datei index.html startet man alles.

    dann werden sie Seiten wie folgt abgearbeitet.

    - Uhr.html

    - Uhr-Start.html

    - Uhr-Stop.html


    Die zeit soll aus der Seite Uhr-Start.html in das Formular auf der Seite Uhr-Stop.html übernommen werden.

    Das Formular soll dann Gespeichert werden (ich dachte am besten in eine CSV Datei) und dann soll zur Seite Uhr.html zurück gesprungen werden.



    habt Ihr ein Idee wie ich das Ohne PHP hin bekomme? vielleicht gibt es eine Möglichkeit das per Javascript zu machen was ich mir vorstelle? das ist nahezu auf allen Rechnern vorhanden :-)



    gruß Mücke