Entfernen von <a>

[mely]

Hallo,

wie erreiche ich, wenn ich eine bestimmte Bildschirmgröße habe, dass dann das <a> um das Bild entfernt wird. <a class="fancybox" rel="group" href="#" title="#"><img src="#" title="#" alt=""/></a> Der Hintergrund, ich möchte dadruch erreichen, dass die Lightbox bei einer kleinen Displaygröße erst gar nicht in Aktion tritt.

Grüße

[Reinhard]

Hi,

wie erreiche ich, wenn ich eine bestimmte Bildschirmgröße habe, dass dann das <a> um das Bild entfernt wird.

Hast du Grundwissen in Javascript?

Dein HTML:

<a href="#" title="#" class="aSelektor">
  <img src="#" title="#" alt="#">
</a>

Das Javascript:

document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth < 1000)
      {
      var a = document.querySelectorAll('a.aSelektor');
      for (var i = 0, l = a.length; i < l; i++)
        a[i].parentNode.replaceChild(a[i].children[0], a[i]);
      }
});

Ich habe einfach mal in der Selektion window.innerWidth < 1000 gewählt. Heißt also, dass bei einer Weite von weniger als 1000px das a entfernt wird. Wenn du eine andere Weite oder gar Höhe im Kopf hast kannst du das ja einfach anpassen.

Reinhard

[Gunnar Bittersmann]

@@Reinhard

Heißt also, dass bei einer Weite von weniger als 1000px das a entfernt wird.

Sinnvoller als die a-Elemente aus dem DOM zu entfernen dürfte sein, einfach die Ausführung des Links zu unterbinden und den Cursor nicht auf "pointer" wechseln zu lassen.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Sinnvoller als die a-Elemente aus dem DOM zu entfernen dürfte sein, einfach die Ausführung des Links zu unterbinden und den Cursor nicht auf "pointer" wechseln zu lassen.

zum Beispiel, indem man einfach die href-Attribute entfernt.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

zum Beispiel, indem man einfach die href-Attribute entfernt.

Und weil die Fancybox möglicherweise doch irgendwas versucht zu tun, entfernt man die class-Attribute gleich mit

document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth < 1000)
      {
      var a = document.querySelectorAll('a.fancybox');
      for (var i = 0, l = a.length; i < l; i++)
        a[i].removeAttribut('class');
        a[i].removeAttribut('href');
      }
});

Bis demnächst
Matthias

[Orlok]

Hallo Matthias

document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth < 1000)
      {
      var a = document.querySelectorAll('a.fancybox');
      for (var i = 0, l = a.length; i < l; i++)
        a[i].removeAttribut('class');
        a[i].removeAttribut('href');
      }
});

Ich kaufe ein paar Klammern und zwei e:

document.addEventListener('DOMContentLoaded', function ( ) {
  if (window.innerWidth < 1000) {
    var a = document.querySelectorAll('a.fancybox');
    var len = a.length, i;
    for (i = 0; i < len; i += 1) {
      a[i].removeAttribute('class');
      a[i].removeAttribute('href');
    }
  }
});

Gruß,

Orlok

[Gunnar Bittersmann]

@@Matthias Apsel

Sinnvoller als die a-Elemente aus dem DOM zu entfernen dürfte sein, einfach die Ausführung des Links zu unterbinden und den Cursor nicht auf "pointer" wechseln zu lassen.

zum Beispiel, indem man einfach die href-Attribute entfernt.

Auch das wäre eine Manipulation des DOMs.

Ich hatte ….addEventListener('click', function () { return false; }) im Sinn.

LLAP 🖖

[Orlok]

Hallo Gunnar

Ich hatte ….addEventListener('click', function () { return false; }) im Sinn.

Oder die etwas modernere und vielleicht etwas selbsterklärendere Variante:

a.addEventListener('click', function (event) {
  event.preventDefault( );
});

Gruß,

Orlok

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich hatte ….addEventListener('click', function () { return false; }) im Sinn.

Da muss man aber JavaScript und CSS anfassen, falls du nicht vorhast, die Änderung von cursor ebenfalls durch JavaScript zu lösen.

Bis demnächst
Matthias

[mely]

Hallo, vielen lieben dank an alle, es hat geklappt ;)

Grüße, mely