Hover zeigt div nicht an bzw. wenn dann falsch formatiert

[Foxbone]

Mal eine Frage. Warum sollen im 3. Link alle anderen Links erscheinen? Macht irgendwie aus meiner Sicht kein Sinn. Vielleicht kannst Du uns/ mir diese Frage beantworten.

Da ich eine Map erstellen möchte und der Link dann für eine Gruppe von Hoovers dient ... bsp. Ein Bild mit 5 Autos und 5 Fahrrädern und bei Link 3 zeigt es die 5 Autos und bei Link 4 die 5 Fahrräder oder was auch immer an.

 

[Aaron3219]

Na dann sorgen wir mal dafür, dass du das script verstehst, indem wir es Zeile für Zeile durchgehen ;)
Doch vorher kurz zu Screenshot 1. Der Grund, warum der rote Container zu kurz ist ist, weil ich (um die buttons nebeneinander zu positionieren) alles mit float: left; gesetzt habe (der float sorgt dafür, dass die Elemente um das gefloatete Element herumfließt, also ignoriert wird). Dies lässt sich einfach beheben.
Durch das einfügen von einem display: inline; ist der Fehler schnell behoben.
Wichtig:
Du musst es sowohl in das style-Element von Link 3, als auch dem div, welcher die Elemente aus 1 anzeigt einfügen. Ansonsten rutscht es nämlich in die nächste Reihe. Also etwa so:

<button onmouseover="Element()" onmouseout="hide()" class="button" id="link3" style="float: left; display: inline;">Link3</button>    
<div style="display: inline;" id="element2" class="hovgroup2 hovgroup3">
</div>

So nun zum anstrengenden Teil, dem Javascript. Zeile für Zeile:

function Element() {
                var eins = document.getElementById("element1");
                var zwei = eins.cloneNode(true);
                zwei.id = "test";
                document.getElementById("element2").appendChild(zwei);
}

function hide() {                      
                var element = document.getElementById("test");
                element.remove(element);                      
}

Das ist der gesamte Code, welchen wir nun Stück für Stück durchgehen.

function Element() {   
          hier das Script     
}

Also du erstellst eine neue Funktion, indem du "function NameDerFunktion() {}" schreibst. Der Name der Funktion wird später im button abgerufen:
<button ---hier--->>>onmouseover="Element()" onmouseout="hide()"<<----hier---- class="button" id="link3" style="float: left;">Link3</button>

<--------------Nächste Zeile------------------>

var eins = document.getElementById("element1");

Also ich erstelle eine VARIABLE, indem ich "var NameDerVariable = " schreibe.
Ich kann z.B. "var blabla = '5';" schreiben. Wenn ich nun "document.write( blabla );", dann wird in diesem Falle eine 5 auf das document gedruckt.
"document.getElementById("element1");" dieser Teil macht folgendes:
Wir suchen eine id namens "element1" in unserem Document (also in dem Falle unserem html Code) und weisen sie der variable "eins" zu.

<--------------Nächste Zeile------------------>

var zwei = eins.cloneNode(true);

Also wir erstellen noch eine variable. Dieses mal nennen wir sie "zwei". Variable "zwei" macht folgendes:
Wir Klonen die Variable "eins", indem wir "cloneNode" auf true setzen. Wir machen dies für variable "eins" geltend, indem wir "eins." davor schreiben.

<--------------Nächste Zeile------------------>

zwei.id = "test";

Wir haben ein "zwei." davor stehen. Also gilt das Nachfolgende für Variable "zwei". In dieser Zeile ändern wir die ID die im html Code steht (in diesem Falle zu "test") Also steht im html Code dann <div ID="test">.

<--------------Nächste Zeile------------------>

document.getElementById("element2").appendChild(zwei);

Nun fügen wir alles zusammen. Wir suchen in unserem Document nach der ID "element2" (ID "element2" ist der Teil unseres Codes, wo alles reingeklont werden soll) und fügen nun variable "zwei" hinzu. Das machen wir, indem wir appendChild verwenden. Es wird also als "child" von "element2" dargestellt.

<div id="element2">
Alles was hier drin steht, ist ein Child von "element2"
</div>

Funktion "Element()" ist hiermit abgeschlossen.

Nächste Funktion:
Wir öffnen unsere Funktion "hide()" ganz normal mit function hide() {}

Wir erstellen danach die Variable "element", welche nach der ID "test" in unserem Document sucht.

"element.remove(element);"
Mit "element." machen wir alles für die Variable "element" geltend. Danach entfernen wir mit "remove()" etwas. In diesem Falle entfernen wir die Variable "element".
Fertig.

So, nun erklär ich dir noch ganz genau was passiert:
Wir erstellen klonen ja erst ALLES, was die ID "element1" hat. Das bedeutet unser Code sieht so aus.

<div class="hovgroup3" id="hovele1">                      
          Das hier wird geklont!!!
          <div id="element1">
                   <button class="geheim text">Ich bin der Link 1-1</button>
                   <button class="geheim text">Ich bin der Link 1-2</button>
                   <button class="geheim text">Ich bin der Link 1-3</button>
          </div>                      
</div>

<button onmouseover="Element()" onmouseout="hide()" class="button" id="link3" style="float: left; display: inline;">Link3</button>     
<div style="display: inline;" id="element2" class="hovgroup2 hovgroup3"> 
Und hier eingefügt:
        <div id="element1">
                   <button class="geheim text">Ich bin der Link 1-1</button>
                   <button class="geheim text">Ich bin der Link 1-2</button>
                   <button class="geheim text">Ich bin der Link 1-3</button>
        </div>         
</div>

Jetzt habe ich ein Problem. Denn wenn ich nun das geklonte entfernen müsste, würde ich ja auch das obere löschen, da es die selbe ID ist. Ich muss die ID also erst ändern.
Folgendes passiert. Es wird ganz normal geklont. Aber WÄHREND des klonens ändere ich die ID des geklonten mithilfe von "zwei.id = "test";". Jetzt sieht der Code so aus:

<div class="hovgroup3" id="hovele1">                      
          Das hier wird geklont!!!
          <div id="element1">
                   <button class="geheim text">Ich bin der Link 1-1</button>
                   <button class="geheim text">Ich bin der Link 1-2</button>
                   <button class="geheim text">Ich bin der Link 1-3</button>
          </div>                      
</div>

<button onmouseover="Element()" onmouseout="hide()" class="button" id="link3" style="float: left; display: inline;">Link3</button>     
<div style="display: inline;" id="element2" class="hovgroup2 hovgroup3"> 
Und hier eingefügt:
        <div id="test"><-----------------Änderung der ID
                   <button class="geheim text">Ich bin der Link 1-1</button>
                   <button class="geheim text">Ich bin der Link 1-2</button>
                   <button class="geheim text">Ich bin der Link 1-3</button>
        </div>         
</div>

Nun kann ich in der funtion hide() alles wieder entfernen, sofern es die ID "test" hat.
Also mit
"var element = document.getElementById("test");" die ID "test" auf variable "zwei" festlegen.
Danach Variable "zwei" mit "remove" entfernen.

Fertig.
Ich hoffe du hast das Script nun verstanden. Wie dir (hoffentlich) aufgefallen sein müsste, musst du den Code NICHT ändern. Das einzige was du machen musst ist bei deinen zukünftigen Buttons die IDs richtig zuweisen.
Kopiere einfach das Script nochmal und ändere die IDs nach belieben.
So und jetzt ist es deine Aufgabe, irgendwie die Buttons von Link 2 zu implementieren!
Guck dir einfach den Aufbau von Link 1 an.

Okay zu den anderen Problemen:
Stell diese erstmal in den Hintergrund und bearbeite eine zur Zeit. Wenn du das alles verstanden hast, gucken wir uns die Feinheiten an.

(Das ist übrigens mit Abstand der längste Post den ich JEMALS verfasst habe)

 

[Tronjer]

Das ist übrigens mit Abstand der längste Post den ich JEMALS verfasst habe

Ich merke schon, du bist hier richtig engagiert. Deshalb ein Tipp:

Als Entwickler arbeitet man mit Daten und nicht mit Nodes. Letzteres übernehmen moderne JavaScript-Frameworks. Für obige Aufgabe braucht man mit Angular lediglich ein paar Status-Variablen auf true oder false zu setzen, um dynamisch DOM-Elemente einzufügen oder zu removen.

 

[Aaron3219]

Warte mal mir ist gearde eine Idee gekommen. Ich muss das Ding ja gar nicht wieder entfernen. Ich könnte auch eine ähnliche Funktion für das Klonen machen. Z.B replaceChild oder halt Klonen und die Funktion schon beim Laden der Seite in den body tag implementieren. So habe ich weniger Code und nur 1 Funtion, wobei ich mir dann auch das ändern der ID und so spare! Was hälst du davon @Tronjer

Ja ich mach das mal später und probier das aus

 

[Foxbone]

(Das ist übrigens mit Abstand der längste Post den ich JEMALS verfasst habe)

@Aaron3219: Erstmal ein rießen Danke schön für die Mühe, das ist echt unbezahlbar und wenn man solche aktiven User wie dich sieht, ist es echt toll Hilfe zu bekommen.:)

Eigentlich hättest Du ein Bierchen oder ein Essen dafür verdient ....

Mir wäre zwar eine reine HTML/CSS Lösung lieber gewesen, aber scheinbar hat mich mein Wissensstand nicht getäuscht, dass man irgendwann an die Grenzen kommt und dann kein Weg mehr an JavaScript vorbeigeht.
Blöd nur dann, wenn man es noch weniger kann als schon HTML, aber man kann ja dran arbeiten ;)

Nun werde ich wohl einige Zeit brauchen, um das zu verarbeiten und auszuprobieren, jetzt beginnt die Arbeit erst
Sobald ich es getestet habe gebe ich Feedback !

 

[Foxbone]

@Aaron3219:
1. leider hat das mit dem display:inline nicht geklappt ... sieht genau so aus wie vorher, das rote DIV ist zu kurz

2. Ein Problem auf das Du leider noch nicht eingegangen bist .... die Hoovers werden immernoch rechts neben dem Link 3 angezeigt .... es ist für mich aber zwingend erforderlich, dass die Hoovers auf der Position von denen der Links 1 und 2 ist ... wie bekomme ich das hin ????

3. Wenn Du eine Lösung für 2. hast, wäre das JS genau in dieser Art nicht mehr nutzbar oder ?

 

[Foxbone]

Ich merke schon, du bist hier richtig engagiert. Deshalb ein Tipp:

Als Entwickler arbeitet man mit Daten und nicht mit Nodes. Letzteres übernehmen moderne JavaScript-Frameworks. Für obige Aufgabe braucht man mit Angular lediglich ein paar Status-Variablen auf true oder false zu setzen, um dynamisch DOM-Elemente einzufügen oder zu removen.

Hättest Du einen konkreten Vorschlag, mit dem du helfen könntest ?

 

[Aaron3219]

Hättest Du einen konkreten Vorschlag, mit dem du helfen könntest ?

Ja habe ich. Ich sitze schon dran! Gib mir ne Stunde.
Achso zu den anderen Problemen. Ich mache erstmal das Problem mit dem Anzeigen, also dass sie überhaupt angezeigt werden. Danach widme ich mich dem Problem, dass sie an der Stelle von Link1 und so angezeigt werden. Danach dem anderen Kram. Erst das schwere, dann das leichte. Ich kann nicht alles gleichzeitig machen

 

[Aaron3219]

Aber warte mal...
Ich habe mir deinen Post von gestern angeschaut, wo du mittlerweile Link 4 eingefügt hast.
Wenn ich das richtig sehe, willst du, dass auf Link1-4+5 ALLE Dinge nochmal aufploppen?
Wenn ich auf Link 4 gehe, soll z.B. nicht nur in Link 4, sondern auch noch in Link 3 und so was aufploppen richtig?
Ich bin nämlich davon ausgegangen, dass du im letzten Link ALLES aus den anderen Reihen in einer Reihe aufgelistet haben willst!

Gibt es ne Möglichkeit, dich über Discord oder Teamspeak zu erreichen? Dann könntest du mir das vllt. ein bisschen mehr verständlich machen!