Wörterwolke in HTML5 mit jquery für Handy und IE8

  • Ich möchte hier ein Beispiel wiedergeben für eine Wörterwolke in HTML5 die für Handys und Tablets sowie auch für den alten Internet Explorer 8 .


    Dazu verwende ich ein jQuery Skript von Canvas. Hier ist der Link dazu.


    Was wir dazu benötigen ist das Plugin von jQuery (jquery.tagcanvas.min.js) das weiter unten zum Download angeboten wird. Einfach rechte Mousetaste draufklicken und speichern.


    Um es in WSX5 einzubauen muss man es mit folgenden Befehl einbinden. Und zwar unter "1" - Erweitert - Vor dem </head> Tag


    HTML
    1. <script src="js/jquery.tagcanvas.min.js" type="text/javascript"></script>

    .


    Allerdings muss man die Javaskriptdatei per Filezilla händisch auf den Server spielen. In diesem Fall ist es im Ordner "js". Falls ihr es in einem anderen Ordner hineinkopiert muss es beim Pfad geändert werden. "ordner/jquery.tagcanvas.min.js".


    Danach erstellt ihr ein HTML-Objekt auf der gewünschten Seite.


    Unter "2" der ausgewählten Seite geht ihr auf "Eigenschaften der Seite" und gebt folgenden Skriptcode unter "Vor dem </head> Tag" ein.



    Hier könnt ihr die Farbe des Textes und der Hoverumrandung ändern. (textColor: '#111111', oder outlineColor: '#FFFFFF',)


    Wer auf der TagCanvas Seite weiterstöbert und sich ein bisschen mit Javaskript auskennt kann sich andere Dinge hier auch einbauen.


    Danach kommt der HTML Teil der in das HTML-Objekt kommt.



    Bei width="300"
    height="300" könnt ihr die größe der Wörterwolke einstellen. Allerdings müsst ihr auch die Größe des HTML-Objekt abstimmen z.B. 5 px mehr geben.


    Ihr könnt ein <li> bis </li> kopieren und soviele reinstellen wie ihr wollt. Oder rauslöschen. Den Text ändern und auch wie beim ersten Link auf eine externe Seite verlinken.


    Alles funkioniert nur wenn es auf dem Server liegt. (Nicht in der Vorschau).


    Wenn ihr es auch auf dem veralterten Internet Explorer 8 haben wollt, müsst ihr ein zusätzliches Skript mit einbinden und auf den Server spielen, was ihr auch auf der Seite findet und zwar das "excanvas.js" (vorher Entpacken)


    Einfach bei "1" Erweitert vor dem head tag.

    HTML
    1. <script src="js/excanvas.js" type="text/javascript"></script>


    im Ordner "js" hier z.B.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von andy67 ()

  • Hi Andy,


    whow, das nenne ich Service. Damit ersparst du vielen Leuten langes suchen. Ganz herzlichen Dank dafür. Ich denke ich habe schon bald Verwendung dafür. :thumbsup:

  • Leider Funktioniert es bei mir nicht wirklich auser ich hab etwas Übersehen ( wäre nicht das erste mal :rolleyes: )


    Aber nachdem alles eingebaut ist sieht meine HP so aus:


    wörterwolke.jpg


    Hab es erstmal wieder Raus genommen und geh mal auf Fehler suche 8|

    Wer aufhört besser sein zu wollen, hört auf gut zu sein.

  • Sorry es stand ein internes display: none von mir noch drinnen. HAb es bereits gelöscht.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Hab es bereits entdeckt :thumbsup: noch kleine Anpassungen und dann sehe ich mal wie das ausschaut

    Wer aufhört besser sein zu wollen, hört auf gut zu sein.

  • Hallo,
    das ist eine Superbeschreibung, die funktioniert! Danke andy.


    Habe mal mehr über die "Wörterwolke" gelesen und sehe, dass man die Anzeige auch in unterschiedliche Richtung rollen lassen kann, weiß jedoch nicht, wie das in X5 einzubauen ist.
    Bestimmt nicht schwer!?


    TagCanvas cloud shapes