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

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • 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-Quellcode

      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.

      JavaScript-Quellcode

      1. <script
      2. type="text/javascript">$(document).ready(function()
      3. {
      4. if(!$('#myCanvas').tagcanvas({
      5. textColour:
      6. '#5BB032',
      7. outlineColour:
      8. '#FFEE00',
      9. reverse:
      10. true,
      11. depth:
      12. 0.8,
      13. maxSpeed:
      14. 0.05
      15. },'tags'))
      16. {
      17. //
      18. something
      19. went
      20. wrong,
      21. hide
      22. the
      23. canvas
      24. container
      25. $('#myCanvasContainer').hide();
      26. }
      27. });</script>
      Alles anzeigen


      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.

      HTML-Quellcode

      1. <div
      2. id="myCanvasContainer">
      3. <canvas
      4. width="300"
      5. height="300"
      6. id="myCanvas">
      7. <p>Wörterwolke funktioniert nicht auf ihrem Browser</p>
      8. </canvas>
      9. </div>
      10. <div
      11. id="tags">
      12. <ul>
      13. <li>
      14. <a
      15. href="http://www.google.com"
      16. target="_blank">Google</a>
      17. </li>
      18. <li>
      19. <a
      20. href="">Webdesign</a>
      21. </li>
      22. <li>
      23. <a
      24. href="">Web-Visitkarten</a>
      25. </li>
      26. <li>
      27. <a
      28. href="">Mobile Websites</a>
      29. </li>
      30. <li>
      31. <a
      32. href="">Sozial Media</a>
      33. </li>
      34. <li>
      35. <a
      36. href="">HTML5 CSS3</a>
      37. </li>
      38. <li>
      39. <a
      40. href="">Redesign</a>
      41. </li>
      42. <li>
      43. <a
      44. href="">Online Marketing</a>
      45. </li>
      46. <li>
      47. <a
      48. href="">CMS-Systeme</a>
      49. </li>
      50. <li>
      51. <a
      52. href="">Responsive</a>
      53. </li>
      54. </ul>
      55. </div>
      Alles anzeigen


      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-Quellcode

      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 !

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von andy67 ()

    • 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.
    • 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
      Danke für Eure Hilfe! Sal Guri