Fandom


  • Hallo zusammen,

    ich stehe vor einem Problem, das eigentlich recht simpel klingt: Wie verlinkt man div-Container, so dass die ganze Box klickbar ist?

    Was ich bisher erfolglos probiert habe:

    1. [[Linkziel|<div style="...">Blablabla</div>]]
    2. <a href="http://..."><div style="...">Blablabla</div></a>
    

    Das Linkziel/die URL soll über Vorlagenparameter übergeben bzw. über String- und Parser-Functions erzeugt werden, daher kann es nicht auf eine CSS- oder JS-Seite ausgelagert werden.

    Hat jemand eine Idee?

    Gruß
    AGENTGREEN2000 22:16, 3. Okt. 2016 (UTC)

      Lade Editor…
    • Ich verstehe dein Problem nicht ganz, aber sollte nicht

      <div style="...">[[Linkziel|Blabla]]</div>
      

      funktionieren?

      LG DarkBarbarian.pngBarbar (talk)

        Lade Editor…
    • Javascript, Eventlistener auf die ganze Box. Das Linkziel kannst du als data-href-Attribut ins div tun.

        Lade Editor…
    • PedroM sagte: Javascript, Eventlistener auf die ganze Box. Das Linkziel kannst du als data-href-Attribut ins div tun.

      So wie unten? Kann man dann beliebige URLs für data-href einsetzen? (Hab keine Ahnung von JS, sorry...)

      $('.klasseDerDivBox').click(function() {
           window.location.href = $(this).attr('data-href');
      });



      DarkBarbarian sagte: Ich verstehe dein Problem nicht ganz, aber sollte nicht

      <div style="...">[[Linkziel|Blabla]]</div>
      

      funktionieren?

      Wenn ich es so mache, ist nur der Link in der div-Box klickbar. Ich möchte aber, dass man die ganze Box anklicken kann.

      Beispiel:

      <div style="height:50px; width:100px; text-align:center; vertical-align:middle; border:1px solid;">[[Linkziel|Blabla]]</div>

      Dieser Code führt zu:

        Lade Editor…
    • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <div class="wds-button wds-is-secondary agentgreen-div">{{w:Lorem}}</div>

      Du könntest auch einen der neuen wds-buttons benutzen und ihn an deine Bedürfnisse per CSS anpassen.

        Lade Editor…
    • Auch keine schlechte Idee. Ich werde mal sehen, ob sich das für meine Zwecke eignet.

      Wäre die JS-Methode in #4 denn trotzdem so richtig?

        Lade Editor…
    • Warum arbeitest du nicht mit einem ganz normalen internen Anker? Hierfür braucht die div-Box nur eine ID und die ID muss dann als Anker in den Link:

      [[#div-box|<div style="...">Blablabla</div>]]
      <div id="div-box" style="...">Blablabla</div>
      
        Lade Editor…
    • Agent Zuri sagte: Warum arbeitest du nicht mit einem ganz normalen internen Anker? Hierfür braucht die div-Box nur eine ID und die ID muss dann als Anker in den Link:

      [[#div-box|<div style="...">Blablabla</div>]]
      <div id="div-box" style="...">Blablabla</div>
      

      Das verstehe ich nicht, sorry. Kannst du mir mal ein konkretes Beispiel geben, am besten so dass die div-Box auf eine externe Seite verlinkt?

        Lade Editor…
    • Agent Zuri sagte: Warum arbeitest du nicht mit einem ganz normalen internen Anker? Hierfür braucht die div-Box nur eine ID und die ID muss dann als Anker in den Link:

      [[#div-box|<div style="...">Blablabla</div>]]
      <div id="div-box" style="...">Blablabla</div>
      

      Er will nicht wirklich ne Box verlinken, sondern eine komplette Box zum Link machen.

        Lade Editor…
    • Das kann er ja nach wie vor machen. Dafür bedarf es nur eines Absatzes, damit er den Code trotzdem parsed:

      [[Linkziel|
      <div style="...">Blablabla</div>
      ]]
      
        Lade Editor…
    • Agent Zuri sagte:

      [[Linkziel|
      <div style="...">Blablabla</div>
      ]]
      

      Wie AgentGreen2000 schon schrieb: Das funktioniert nicht. Der Inhalt wird zwar komplett als Link angezeigt, aber es ist keine DIV-Box mehr, sondern ein Textlink. Siehe:

      <div style="...">Blablabla</div>

      Das mit dem <a href="..."><div></div></a> funktioniert auch nicht, da sämtliche Links von Wikia heraus gefiltert und entfernt werden. (Es wäre übrigens die richtige Methode).

      PedroMs Vorschlag und dein, AG2000, erster Code ist möglich, verlangt jedoch JavaScript:

      Artikel:

      <div class="klasseDerDivBox" data-href="http...">Inhalt</div>

      MediaWiki:Common.js

      $('.klasseDerDivBox').click(function() {
           location.href = $(this).attr('data-href');
      });

      Von mir kann ich dir noch eine unschöne, dafür JS-freie-Version anbieten: Du machst deine normale DIV-Box und legst ein transparentes Image über das komplette DIV. Leider unterstützt Wikia keine prozentualen Angaben in Bildern, weshalb du das über CSS regeln müsstest (oder eine unschöne Vorlage):

      Vorlage:Inhübsch

      <div style="position:absolute; top:0; left:0; width:{{{2|100%}}}; height:{{{3|100%}}};">[[Datei:Transparent.png|2000x2000px|link={{{1|}}}</div>

      Artikel

      <div style="position:relative; overflow:hidden; width:300px; height: 400px;">{{Inhübsch|Link}}Blablabla</div>

      Meine Methode ist wirklich old-school und sollte so nicht verwendet werden. (Zumal sie sehr strenge Anforderungen hat: Die Div-Box ist starr, da sie sonst durch das Bild auf 2000x2000px aufgebläht wird). Sie wird für ein seltsames Bild in der Mobilen-Version sorgen und dort ggf. nicht funktionieren. Ähnliches gilt für die JavaScript-Geschichte, denn JS wird mobil nicht unterstützt. Am Besten fährst du mit AmonFatalis-Vorschlag. Dies ist im schlimmsten Fall ein Textlink und damit überall kompatibel.

        Lade Editor…
    • Funktionieren tut es schon. Es ist immer noch eine Textbox, sieht aber wie ein Link aus. Das kannst du mit CSS leicht wieder fixen. Die Funktionalität besteht ja dennoch:

      HTML:

      <a href="#section" class="linkedBox">
      	<div style="border:1px solid red;">
      		Lorem ipsum ahmet sun
      	</div>
      </a>

      CSS:

      a.linkedBox > div {
          color: initial;
      }
       
      a.linkedBox {
          text-decoration: none;
      }
        Lade Editor…
    • Agent Zuri schrieb:
      HTML:

      <a href="#section" class="linkedBox">
      	<div style="border:1px solid red;">
      		Lorem ipsum ahmet sun
      	</div>
      </a>

      Ergibt:
      <a href="#section" class="linkedBox">

      Lorem ipsum ahmet sun

      </a>

      Nein, mag der Parser nicht. Die "<" bzw ">" werden in HTML-Zeichen umgewandelt &lt; respektive &gt; .
      Dein Ergebnis wirft jetzt zwar die DIV-Box aus, jedoch wird es nicht funktionieren, außer er schreibt ein Script, mit dem der Artikelraum nach den Zeichen abgesucht und diese ersetzt werden. (Kann zu Folgefehlern führen, weshalb das Script entsprechend eingeschränkt werden sollte auf eine Klasse z.B.)

      Edit: Es wird nicht funktionieren, da das <a>-Tag mit den "ersatz"-HTML-Zeichen geschrieben ist und vom Browser als Text und nicht als Code interpretiert wird.

        Lade Editor…
    • Oh, mist^^ Das passiert beim Copy&Paste. Ich meinte, der vorherige Code passe:


      HTML:

      <div class="linkedBox">
      [[Linkziel|
      <div style="border:1px solid red;">Lorem ipsum ahmet sun</div>
      ]]
      </div>

      CSS:

      .linkedBox > a > div {
          color: initial;
      }
       
      .linkedBox > a {
          text-decoration: none;
      }
        Lade Editor…
    • Das ist das selbe Spiel, nur dass diesmal die "<" / ">" vom DIV ausgetauscht werden.

      Dein Beispiel ergibt:

      (Das ist übrigens der Grund, warum der Code als Text dasteht und nicht in HTML-Elemente umgewandelt wird)

        Lade Editor…
    • Um es nochmal komplizierter zu machen - ich dachte, ich hätte es schon erwähnt: das Ganze soll auch mit externen Links klappen.

      Das war auch das Problem mit der Idee von Amon:

      [http://example.com
      <div class="wds-button wds-is-secondary">Button</div>]

      ...führt zu:

      [http://example.com

      Button
      ]

      Gibt es irgendeinen Trick, um das zu vermeiden? (Das überhaupt der Button angezeigt wird, liegt tatsächlich an dem Zeilenumbruch.)

      Bleiben also noch die Variante mit dem transparenten Bild und die JS-Lösung. Erstere scheidet für mich schon mal aus, da die div-Box nicht starr sein sollte (sondern variabel, denn für Elternelement gilt display: flex;) und das in der mobilen Ansicht sicher ziemlich verwegen aussieht. Die JS-Lösung ist ebenfalls wegen der fehlenden Funktionalität in der mobilen Ansicht nicht optimal, aber scheint mir momentan die einzige realistische Lösung zu sein.

      Danke schon mal für eure Hilfe bis hierher. :)

        Lade Editor…
    • 20M61 sagte:
      Das ist das selbe Spiel, nur dass diesmal die "<" / ">" vom DIV ausgetauscht werden.

      Dein Beispiel ergibt:

      (Das ist übrigens der Grund, warum der Code als Text dasteht und nicht in HTML-Elemente umgewandelt wird)

      Bei mir funktioniert es. Sieh mal hier ;)

      Kann das an unterschiedlichen Wikiversionen liegen?

        Lade Editor…
    • Bei mir funktioniert das auch, allerdings nur mit Ankerlinks. Mit Links zu anderen Seiten im Wiki klappt es nicht, mit externen Links erst recht nicht. Komisch. :/

        Lade Editor…
    • Das schaue ich mir mal an ;-)

        Lade Editor…
    • Die Lösung von AmonFatalis ist eigentlich auch in dem Fall dieselbe:

      <!-- Inner-Fandom -->
      <div class="wds-button wds-is-secondary agentgreen-div">[[Link|{{w:Lorem}}]]</div> 
      <!-- Extern -->
      <div class="wds-button wds-is-secondary agentgreen-div">[http://extern.de {{w:Lorem}}]</div>

      Wie er schon sagte: Es ist ein Textlink (und damit auch als bislang einzige Version vollkompatibel).

      Das mit den Ankern ist ne merkwürdige Sache. Habe selbst auch noch bisschen dran rum gespielt: Wenn man ":" oder "/" mit in den Link einpflegen will, werden diese vom Parser aussortiert. Auch Vorlagenverwirrung (alles in einzelne Vorlagen packen und darauf hoffen, dass der Parser an irgend einer Stelle etwas Teil-fertig hat, was er noch nicht fertig haben sollte) klappt nicht.

      Am Ende bleibt die Frage, wofür du die Buttons jetzt wirklich brauchst. Wenn sie eine Funktionalität haben sollen (also deine Seite ohne diese nicht mehr richtig funktionieren würde), dann empfehle ich dringend auf die Textlinks auszuweichen. Diese sind erprobt und nur wenn man daneben klickt (also neben den Text) funktionieren sie nicht. - Allerdings werden sie ggf. anders auf den mobilen Geräten dargestellt (haben ja nur ein CSS-Erscheinungsbild. Würde das vorher testen, bevor ich mein Design umwerfe). Für meine Zwecke würde der Textlink ausreichen, da mein Finger so breit ist, dass ich da immer auf nen Teil vom Text klicke. Für die Desktop-Variante würde ich dann ein JavaScript wählen, welches den ganzen Button klickbar macht (was ähnliches, wie du oben schon vorgeschlagen hast). Dann kann die Maus auch mal daneben zeigen.

      UPDATE: Fandom untersagt nun den Gebrauch von a-Tags. Sie werden mit einem Hinweis, dass es für Spam (Weiterleitung zu externen Seiten) missbraucht werden kann, unterbunden.

      Der Text, die du speichern willst, wurde vom Spamschutzfilter blockiert. Das liegt wahrscheinlich an einem Link auf eine externe Seite.
      Der folgende Text wurde vom Spamfilter gefunden: </a> (Block #18461)
      
        Lade Editor…
    • Ein Fandom-Benutzer
        Lade Editor…
Diesem Beitrag zustimmen
Beitrag zugestimmt!
Leute, die dieser Nachricht zustimmten anzeigen
Nutzung von Community-Inhalten gemäß CC-BY-SA , sofern nicht anders angegeben.