zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Accordion / Felder Anordnung, Steuerung funktioniert nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 05.02.2020, 11:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.058
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Du hast auch ein komisches Konstrukt mit floats.
Auch weiß ich noch immer nicht was du eigentlich bezwecken willst mit der Darstellung, aber wenn ich raten darf: Warum floats? Das ist so letztes Jahrtausend. Heutzutage kannst du auch gerne flexbox dafür verwenden. (Grid wenn es über mehrere Zeilen gehen soll)

Bezüglich deiner Frage zum debuggen: Drücke F12 im Chrome/Firefox und du hast alles was du zum debuggen einer Seite brauchst.

Edit: Falls du flexbox verwendest kannst du dir die ganze Sache mit der Berechnung auch sparen, dann wird die Breite unter den verfügbaren Elementen aufgeteilt.

Geändert von cloned (05.02.2020 um 13:16 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 05.02.2020, 13:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Auch weiß ich noch immer nicht was du eigentlich bezwecken willst mit der Darstellung
Die Liste nicht vertikal sondern horizontal darzustellen. Ich habe zunächst gedacht ich mach das ganz simpel mit dem jquery ui accordion, daher ist auch der Code:

jQuery Simple Horizontal Accordion « Design Chemical – jQuery, Wordpress, Tutorials & Plugins

P.S.: Ich hab gedacht ich kann auch die Steuerung mit jqery ui realisieren.

Geändert von Iago2 (05.02.2020 um 14:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 05.02.2020, 14:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.058
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Keine Ahnung wieso du dafür ein fast 10 Jahre altes tutorial ausgrabst, aber zeitgemäß ist das auf keinen Fall mehr.
Für eine Darstellung ist CSS verantwortlich.
Falls du Logik brauchst wie mit buttons dann ist JS notwendig.
Mit Zitat antworten
  #14 (permalink)  
Alt 06.02.2020, 11:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Also gut. Auf jeden Fall stimmt die Logik ja.

Was wird mit $this.toggleClass('active'); getoggelt?

Dies hier
#accordion li.active { width: 450px; }

Die Klasse heisst ja aber .active, dewegen ja auch:

var totalActiveElements = $('.active').length;
UND
$('.active').each(function(e) {...}
Mit Zitat antworten
  #15 (permalink)  
Alt 06.02.2020, 13:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.058
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

toggleClass heißt dass die der Funktion mitgegebene Klasse getoggled wird, also in dem Fall "active". Gibt es die Klasse wird sie hinzugefügt, ansonsten entfernt.

Die Klasse heißt nicht ".active", der Punkt vor active sagt CSS lediglich dass es sich um einen Klassennamen handelt. Der Name der Klasse ist nur "active".
Mit Zitat antworten
  #16 (permalink)  
Alt 07.02.2020, 02:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

O.k.,
Beim klicken wird active an- und ausgeschaltet. In totalActiveElements (streng genommen: int totalActiveElements) wird die Anzahl der aktiven gespeichert, dann der Wert für die Sichbarkeit errechnet.
data('for') verknüft die aktiven Buttons mit den Listenfeldern, In der Schleife werden die width-Werte der Listenfelder dann vergeben. (ID durch die Verknüpfung errechnet)


Was micht stört ist dieser CSS Eintrag:
HTML-Code:
#accordion li.active {
			width: 450px;
			}
wenn active "an" ist, dann müssten doch immer diese 450px erscheinen?

Auch irritierend ist:

HTML-Code:
$accordion.find('li').css('width', '0px');
Warum werden hier erstmal alle Breiten der Listen auf 0px gesetzt bevor die Schleife startet?

Geändert von Iago2 (07.02.2020 um 02:24 Uhr)
Mit Zitat antworten
  #17 (permalink)  
Alt 07.02.2020, 08:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.058
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von Iago2 Beitrag anzeigen
O.k.,
Beim klicken wird active an- und ausgeschaltet. In totalActiveElements (streng genommen: int totalActiveElements) wird die Anzahl der aktiven gespeichert, dann der Wert für die Sichbarkeit errechnet.
data('for') verknüft die aktiven Buttons mit den Listenfeldern, In der Schleife werden die width-Werte der Listenfelder dann vergeben. (ID durch die Verknüpfung errechnet)
Genau, soweit richtig, abgesehen davon das JS streng genommen kein int kennt. Zumindest nicht so wie man es von zB Java gewohnt ist.


Zitat:
Zitat von Iago2 Beitrag anzeigen
Was micht stört ist dieser CSS Eintrag:
HTML-Code:
#accordion li.active {
			width: 450px;
			}
wenn active "an" ist, dann müssten doch immer diese 450px erscheinen?

Hier bitte aufpassen, das gilt nur für li-Elemente die im accordion sind.
In meinem JS setze ich die Klasse aber nur auf die buttons.
Dein CSS habe ich nicht angepasst, da es mir nur um die Logik ging.



Zitat:
Zitat von Iago2 Beitrag anzeigen
Auch irritierend ist:

HTML-Code:
$accordion.find('li').css('width', '0px');
Warum werden hier erstmal alle Breiten der Listen auf 0px gesetzt bevor die Schleife startet?
Damit dann auch nur die li-Elemente eine Breite bekommen die auch wirklich aktiv sind. Hier gibt es mehrere Wege dies zu lösen, aber mein Denkansatz hier war: Blende zuerst alle Elemente aus und dann zeige wirklich nur die Elemente, wo der button auch wirklich aktiv ist.


Und wie weiter oben schon gesagt: Wenn du auf modernes CSS setzt brauchst du all diese Berechnungen nicht, dann passt der Browser die Elemente so an, wie du sie brauchst. Aber da ich (immer noch nicht) weiß, was du genau erreichen willst, habe ich mich nur auf die generelle JS Logik konzentriert.
Mit Zitat antworten
  #18 (permalink)  
Alt 07.02.2020, 10:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Aber da ich (immer noch nicht) weiß, was du genau erreichen willst, habe ich mich nur auf die generelle JS Logik konzentriert.
Ich will JS sehr gut beherrschen, aber ich komm natürlich nicht um CSS drumrum.

Geändert von Iago2 (07.02.2020 um 10:21 Uhr)
Mit Zitat antworten
  #19 (permalink)  
Alt 09.02.2020, 12:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Falls du flexbox verwendest kannst du dir die ganze Sache mit der Berechnung auch sparen, dann wird die Breite unter den verfügbaren Elementen aufgeteilt.
Um die Breiten zu verändern gibt es bei flexbox: flex-grow, felx-shrink und flex-basis, was sich ähnlich wie width verhält.
Ich habe mit flexbox leider kein Beispiel gefunden, wo ich die Steuerung der container wie hier mit JS (Beispiel von #cloned) realisiert umsetzen.

Hat jemand eine Tip, wie ich das CSS hier anpassen kann, mit oder ohne flexbox?

Vielen Dank,

Geändert von Iago2 (09.02.2020 um 12:32 Uhr)
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 10.02.2020, 08:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.058
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Um das mit flexbox umzusetzen reicht folgender Aufbau:

Code:
<div class="container">
 <div> item 1 </div>
 <div> item 2 </div>
 <div> item 3 </div>
 <div> item 4 </div>
</div>
CSS:

Code:
.container {
  width: 400px; /*Das nur als Beispielbreite, kann natürlich auch weggelassen werden wenn es über die gesamte Breite gehen soll*/
  display: flex;
}

.container  > div {
  flex-grow: 1;
}
Du kannst nach belieben einzelne Unterelemente von <div class="container"> ausblenden, die restlichen Elemente teilen sich den Platz auf.
Sprich du brauchst, wenn das dein Ziel ist, nur die benötigten Elemente ein- und ausblenden.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Felder Anordnung Problem radon CSS 1 19.11.2006 18:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:52 Uhr.