de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Add Margin Hover Text auf jeder Website leicht mit Marginotes

Inline-Tooltips sind fantastisch, aber manchmal passen sie einfach nicht zu bestimmten Inhalten. Die meisten Websites lassen an den Rändern entlang des Seitenrumpfs Platz . Dies ist ideal zum Hinzufügen von Tooltip-ähnlichen Inhalten ohne die Tooltips .

Geben Sie Marginotes ein, ein kostenloses quelloffenes jQuery-Plugin, das den Seitenrändern Ihrer Webseite benutzerdefinierte Notizen hinzufügt . Sie können diese Notizen basierend auf Verknüpfungen oder bestimmten Elementen auf der Seite wie Bildern umschalten.

Dieses Plugin ist überraschend einfach einzurichten und enthält ein Standard-Stylesheet für Ihre Randnotizen. Diese erscheinen neben Ihrem Content und werden direkt neben dem Absatzelement auf Ihrer Webseite ausgerichtet.

Die Hover-Notizen werden manuell zu Ihren HTML-Elementen hinzugefügt, indem Sie ein desc Attribut verwenden . Ich habe das in HTML5 noch nie gesehen, daher kann ich nicht sagen, ob es vollständig kompatibel ist. Aber es wird von JavaScript aufgenommen, was alles ist, was Sie wirklich brauchen.

Sie können dieses Attribut auch ändern, wenn Sie die Funktion " marginotes() Sie können es also in " data-desc wenn Sie nach mehr Kompatibilität suchen.

Hier ist die eine Zeile von jQuery, die benötigt wird, um dieses Plugin zum Laufen zu bringen:

 $ ("Selektor"). marginotes () 

Sie sollten "selector" durch Elemente ersetzen, auf die Sie ausgerichtet sind. Wenn sie sich also in Ihrem ".body span" Sie ".body span" . Sie können auch auf Ankerverknüpfungen oder auf bestimmte Klassen, die diesen Elementen hinzugefügt wurden, abzielen .

Innerhalb der Funktion marginotes() können Sie zwei optionale Parameter hinzufügen, um das Randnotizformat zu ändern:

  1. width - Legt die Notenbreite fest (standardmäßig 100px)
  2. field - setzt das HTML content Attribut (standardmäßig "desc" )

Wenn Sie jQuery nicht mögen, können Sie auch das Vanilla Marginotes Plugin ausprobieren . Es läuft auf Vanilla JS, so dass Sie keine Abhängigkeiten haben, um dieselben Funktionen zu erhalten.

Sie können diese Live-Demo auch ausprobieren, wenn Sie es in Aktion sehen wollen. Dies ist definitiv ein einzigartiges Plugin und es ist eine großartige Möglichkeit, um zusätzliche Inhalte auf Ihrer Website hinzuzufügen .

Ein Blick in: Googles neue und verbesserte offizielle Kamera App

Ein Blick in: Googles neue und verbesserte offizielle Kamera App

Für jeden Smartphone-Nutzer, egal auf welchem ​​mobilen Betriebssystem Sie sich befinden, ist die Kamera-App eine der am häufigsten verwendeten Apps. Viele von uns entscheiden sich für Kamera-Apps von Drittanbietern, weil sie solider gebaut sind als die Aktien-Apps. Aber jetzt möchten Android-Nutzer möglicherweise die neue und verbesserte Google Kamera-App ausprobieren, die gerade im Play Store veröffentlicht wurde. Wenn Sie

(Tech- und Design-Tipps)

Freebie: "Modernes Geschäft" Infographic Elemente

Freebie: "Modernes Geschäft" Infographic Elemente

Die Geschäftswelt verändert sich ständig, ebenso die Technologie und die Marketingtechniken. Immer mehr Unternehmen nutzen die Möglichkeiten von Infografiken, um wirklich ihren Zielmarkt zu erreichen.Wenn Sie ein Designer sind, der etwas für Unternehmen in allen Formen und Größen macht, haben Sie wahrscheinlich einige freie Vektoren, PSDs und dergleichen von Freepik bekommen. Immer

(Tech- und Design-Tipps)