Ankündigung

Einklappen
Keine Ankündigung bisher.

JavaScript soll css-class ignorieren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • JavaScript soll css-class ignorieren

    Hallo zusammen,

    ich habe ein kleines Fluid-Template, welches 4 Icons und einen Header beinhaltet. Bei Klick auf ein Icon öffnet sich links der Icons eine kleine Infobox. Nur rutscht dann der Header auch mit raus, da er in der (ich weiß nicht wie man das nennt) Main-Class liegt.

    MainID -> sticky-flap
    HeaderClass -> sticky-flap_head
    RowClass (versteckte Infobox) -> sticky-flap_row

    Nun meine Frage, wie kann ich die HeaderClass von einer Javascript funktion ausschließen?

  • #2
    Du meinsto sowas ("css-tooltip")? http://www.ohne-css.gehts-gar.net/demo/0012.html schau mal da das position und z-index an. Das hat aber doch nichts mit JS zu tun .. nur weil es via JS visible gemacht wird. Ansonsten bitte ein Beispiel / Link.

    [MOD: Verschoben von JavaScript ... ]
    The string "()()" is not palindrom but the String "())(" is.

    Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
    PHP.de Wissenssammlung | Kein Support per PN

    Kommentar


    • #3
      Hatte etwas mit .not('.class'); gefunden.

      Also in meinem Beispiel dann var anzusprechendeKlasse = $('#sticky-flap').not('.sticky-flap_head');

      Deswegen dachte ich, dass man das über JS regeln kann.

      Kommentar


      • #4
        Wie schon erwähnt ohne Beispiel halt schwer... Ich kenne es zB so, das das Popup als hidden div vorhanden ist und auf Klick wird es per JS dann halt zu visible. .not() macht laut Doku meines Erachtens was anderes.. -> http://api.jquery.com/not/
        The string "()()" is not palindrom but the String "())(" is.

        Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
        PHP.de Wissenssammlung | Kein Support per PN

        Kommentar


        • #5
          HTML-Code:
          <div id="mainID">
          <div class="headerClass">
          Überschrift
          </div>
          <ul>
          <li class="icon">Icon per Fluid eingebunden<li>
          <li class="icon">Icon per Fluid eingebunden<li>
          <li class="icon">Icon per Fluid eingebunden<li>
          <li class="icon">Icon per Fluid eingebunden<li>
          </ul>
          <div class="innerClass"></div>
          <div class="RowClass">
          Ein Text
          </div>
          
          <div class="RowClass">
          Ein Text
          </div>
          
          <div class="RowClass">
          Ein Text
          </div>
          
          <div class="RowClass">
          Ein Text
          </div>
          </div>

          So bei Klick auf ein Icon öffnet sich der dazugehörige Text (JS-animiert)
          Das Problem ist, dass ich per JS die Breite der innerClass auf bspw. 400 setze und somit auch der Header weiterrutscht.
          Und das möchte ich verhindern

          Kommentar


          • #6
            Hallöchen,

            ohne den vollständigen Code kann dir leider niemand weiterhelfen. Bau ein fiddle zusammen, sodass wir das Problem nachvollziehen können.

            Viele Grüße,
            lotti
            [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

            Kommentar


            • #7
              .not() entfernt schon Elemente aus der Liste. Dies hat aber kein Einfluss auf unterliegende Ebenen im CSS.

              HTML-Code:
              <div>
                  <div class="green">green1</div>
                  <div class="green" id="notgreen">nogreen</div>
                  <div class="green">green2</div>
              </div>
              CSS
              Code:
              .green {color:#000;}
              Code:
              $(".green").not("#notgreen").attr('style','color:green;');
              Ausgabe:

              green1
              notgreen
              green2

              Online: fiddle

              Hier funktioniert das nicht, da per js nur das oberste div angesprochen wird und das Element mit der id="notgreen" nicht in der Liste ist,
              welche mit $(".green") selektiert wurde.
              HTML-Code:
              <div class="green">
                  <div>green1</div>
                  <div id="notgreen">nogreen</div>
                  <div>green2</div>
              </div>
              LG jspit

              Kommentar

              Lädt...
              X