[4.1] Javascript zuklappfunktion + CSS

My1 · March 16, 2016 at 9:35 AM

die Zuklappfunktion fügt unerwarteterweise an Unterforen die Klasse .wbbLastBoxElement hinzu, was gerade bei styles die einen Höheren Eckenradius haben ziemlich auffallen kann, besonders, wenn man direkt danach wieder aufklappt.

(texte entfernt und etwas zusammengestaucht und ergebnis der extraklasse hervorgehoben)

das ist ausschließlich ein js fehler, da nach einem reload alles passt.

Black Rider · March 16, 2016 at 9:56 AM

Und wo ist da nun der Fehler? Wenn du in deinem Design .wbbLastBoxElement nicht beachtet hast, ist das ein Fehler im Design.

My1 · March 16, 2016 at 10:05 AM

der fehler ist dass LastBox eigentlich nur an das letzte außerste element gehört
und eben das javascript es an eine stelle anfügt an der es vor dem javascript nicht war.

beim laden der page:

HTML

<li class="wbbCategory wbbDepth3 tabularBox tabularBoxTitle wbbCollapsibleCategory" data-depth="3" data-is-open="true" data-board-id="34" id="wcf67">
  <header>
    <h2><span class="collapsibleButton pointer icon icon16 icon-chevron-down"></span><a href=""></a></h2>
  </header>
  <ul>
    <li class="wbbBoardContainer wbbDepth3" data-board-id="26">
      <div class="wbbBoardNode2 wbbBoard box32">
        <span class="icon icon32 icon-folder-close-alt"></span>
        <div>
          <div class="containerHeadline">
            <h3><a href=""></a></h3>
            <p class="wbbBoardDescription"></p>
          </div>
            <div class="wbbStats">
              <dl class="plain statsDataList">
                <dt>Themen</dt>
                <dd>0</dd>
              </dl>
              <dl class="plain statsDataList">
                <dt>Beiträge</dt>
                <dd>0</dd>
              </dl>
            </div>
        </div>
      </div>
    </li>
    <li class="wbbBoardContainer wbbDepth3" data-board-id="25">
      <div class="wbbBoardNode1 wbbBoard box32">
        <span class="icon icon32 icon-folder-close-alt"></span>
        <div>
          <div class="containerHeadline">
            <h3><a href=""></a></h3>
            <p class="wbbBoardDescription"></p>
          </div>
          <div class="wbbStats">
            <dl class="plain statsDataList">
              <dt>Themen</dt>
              <dd>0</dd>
            </dl>
            <dl class="plain statsDataList">
              <dt>Beiträge</dt>
              <dd>0</dd>
            </dl>
          </div>
        </div>
      </div>
    </li>
  </ul>
</li>

Display More

nach zu und wieder aufklappen:

HTML

<li class="wbbCategory wbbDepth3 tabularBox tabularBoxTitle wbbCollapsibleCategory" data-depth="3" data-is-open="true" data-board-id="34" id="wcf67">
  <header>
    <h2><span class="collapsibleButton pointer icon icon16 icon-chevron-down"></span><a href=""></a></h2>
  </header>
	<ul>
    <li class="wbbBoardContainer wbbDepth3" data-board-id="26">
    <div class="wbbBoardNode1 wbbBoard box32">
      <span class="icon icon32 icon-folder-close-alt"></span>
      <div>
        <div class="containerHeadline">
          <h3><a href=""></a></h3>
          <p class="wbbBoardDescription"></p>
        </div>
          <div class="wbbStats">
            <dl class="plain statsDataList">
              <dt>Themen</dt>
              <dd>0</dd>
            </dl>
            <dl class="plain statsDataList">
              <dt>Beiträge</dt>
              <dd>0</dd>
            </dl>
          </div>
        </div>
      </div>
    </li>
    <li class="wbbBoardContainer wbbDepth3 wbbLastBoxElement" data-board-id="25">
      <div class="wbbBoardNode2 wbbBoard box32">
        <span class="icon icon32 icon-folder-close-alt"></span>
        <div>
          <div class="containerHeadline">
            <h3><a href=""></a></h3>
            <p class="wbbBoardDescription"></p>
          </div>
          <div class="wbbStats">
            <dl class="plain statsDataList">
              <dt>Themen</dt>
              <dd>0</dd>
            </dl>
            <dl class="plain statsDataList">
              <dt>Beiträge</dt>
              <dd>0</dd>
            </dl>
          </div>
        </div>
      </div>
    </li>	
  </ul>
</li>

Display More

Zeile 27. Lastboxelement hat da nix verloren.

Ich nutze ja hauptsächlich die Tpls von woltlab und habe halt in den Less variablen den radius aufgrdreht, was zimlich gut bei den meisten sachen geholfen hat.

nach dem wiederaufklappen sollte eigentlich ursprungszustand wiederhergestellt werden.

hier ein kleines video dazu:
https://www.dropbox.com/sc/ui7m96btwox…m6R0-R6bq_nRZWa
zur info: ich habe via firebug sämtliche texte transparent gemacht

the_waiters · March 16, 2016 at 11:35 AM

Ich seh das auch so wie @Black Rider, ich war zufällig gestern an dem Punkt.

Mit hilfe von wbbDepthX, wbbBoardNodeX z.B. kannst du das doch eingrenzen, sodass es richtig erfasst wird

My1 · March 16, 2016 at 11:37 AM

als wenn das javascript nach dem zu und wieder aufklappen klassen hinzufügt die vorher nicht da waren dann ist doch eindeutig was weg. wbblastört ja eigentlich nur an das letzte element for dem border.
es erhalten elemente auch eine lastbox die es eigentlich nicht sollten.
ergo es dürfte nur so ein element lastbox erhalten, dass vor dem Zuklappen eine lastbox drin hatte.
und spaßigerweise verhalten sich die elemente die eine lastbox korrekterweise erhalten haben auch korrekt (das lastbox verschwindet wieder.

Participate now!