Clippy.js - Karl Klammer & Co auf Webseiten

Die Benutzer der Office Pakete von Microsoft kennen sie sicherlich: die in der Hilfe integrierten Animation Clippy, auch bekannt als Karl Klammer und weitere Charaktere. Seit kurzem kann man diese Animationen mit Hilfe des Projektes Clippy.js auch auf Webseiten einbauen. Das funktioniert recht einfacht, auch bei NPage und sogar dann, wenn man eine Designvorlage benutzt.

Einbauanleitung für Clippy.js

Download / Upload bei NPage

Zunächst muss eine zip-Datei auf den PC geladen werden. Man findet diese Datei auf https://github.com/smore-inc/clippy.js. Dort wird auf den zip-Button geklickt und die Datei auf dem PC abgespeichert.

Diese zip-Datei entpackt man auf dem PC. Die zip-Datei enthält eine ganze Menge Dateien. In diesem Fall werden nur die Dateien

  • clippy.css
  • clippy.min.js

benötigt. Diese muss man bei NPage hochladen. Außerdem wird die jQuery-Bibliothek benötigt. Die findet man beispielsweise auf http://blog.jquery.com/2011/11/03/jquery-1-7-released/. Dort klicked man mit der rechten Maustaste auf die min-Version,speichert die Datei auf dem PC und lädt sie anschließend ebenfalls bei NPage hoch.

Alle drei Dateien landen bei NPage im Verzeichnis HTML-Dateien. Wenn man dort eine Datei anklickt, so wird diese im Quellcode in einem neuen Browser-Tab angezeigt und man findet in Adressefeld des Browsers die Adresse, die etwa so aussieht

http://filex.npage.de/yyyyyy/zz/html/clippy.css

x, y und z sind Zahlenwerte, die bei jedem NPage-Account anders sind.

Code-Schnippsel bei Npage einfügen

Damit Clippy oder eine andere Animation auf einer NPage-Textseite sichtbar ist, müssen einige kleine Codeschnippsel eingefügt werden.

Unter Einstellungen › Homepage-Einstellungen › Header-Bereich fügt man im Feld Eigener, zusätzlicher HTML-Code ein:

<link rel="stylesheet" type="text/css" href="http://filex.npage.de/yyyyyy/zz/html/clippy.css" media="all">

In der Textseite, auf der Clippy angezeigt werden soll schaltet man in den Quellcode-Modus um und fügt ganz am Ende der Seite ein:

<!-- jQuery einbinden -->
<script src="http://filex.npage.de/yyyyyy/zz/html/jquery-1.7.min.js"></script>
<!-- Clippy.js einbinden -->
<script src="http://filex.npage.de/yyyyyy/zz/html/clippy.min.js"></script>
<!-- Initialisierung und Aufruf -->
<script type="text/javascript">
    clippy.load('Merlin', function(agent) {
    // Tu was
    agent.show();
});
</script>

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Link zur aktiven Seite hervorheben (01.07.2013 12:53:00)

Auf vielen Websites wird der Link zur gerade aktiven seite hervorgehoben. NPage unterstützt so etwas leider nicht automatisch. Mein einem kleinen wenig javaScript kann man das aber nachbauen.

Erste Voraussetzung ist, dass man die JavaScript-Bibiothek JQuery bei NPage hochlädt und in die Seite einbindet.

Außerdem benötigt man einen kleinen JavaScript-Schnippsel. Für das von mir verwendete Design Plus 135 sieht der so aus:

$(document).ready(function($){
  var url = window.location.pathname;
  $('.navi_cont a[href="'+url+'"]').addClass('current');
});

Schließlich muss noch etwas CSS-Code eingefügt werden

<style>
  .current, a>.current, a.current   { color:yellow !important}
</style>

Wie bereits beschrieben wurde dieses Patch für die von mir hier verwendete Designvorlage Plus 135 erstellt. Es funktioniert auch mit anderen Designvorlagen, die genauso aufgebaut sind. Siehe dazu diese Übersicht zu den NPage Templates.

Bei allgemeinen Problemen oder Fragen zu anderen Designvorlagen bitte diesen Vorstellungsthread im NPage Forum nutzen.

http://forum.npage.de/vorstellung/29410-designpatch-designvorlagen-anpassen.html


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
Zum Seitenanfang