Nice tag cloud with Javascript and Css
Nice tag cloud with Javascript and Css
Article by Proy Bede
Tag clouds come in tons of shapes and forms, but in my judgment the best tag clouds are the ones shaped as a balloon with animated effects when you hover over them. With a kind of 3d effect.
Most of these tag clouds are flash based and not suited for pages that have to be accessible. So when I had to program a 3d cloud for a customer, and the page had to be accessible, I had to obtain another solution.
When accessibility is a precondition JavaScript can be a solution. The first script found on the w3 used canvas, but this is a trouble for browsers that cannot display canvas elements. After seeking more I finaly found a JQuery plugin offering the needed effect with nothing more then CSS and JavaScript. So I implemented it, and the returns was very satisfactory.
The tag cloud made is at the present visible on the page of one of our customers. When deactivating JavaScript the tag cloud stays correctly seeable and when de-activating CSS it is shows as a list (because it is made with ul and li html elements).
Though the script I used is pretty untroublesome to install, the real challenge was to create the correct PHP script to create the list items and to set their start position. With some work, experimenting and modifying the CSS the tag cloud got created correctly.
After creating the flawless HTML the JQuery plugin has to be setup by inserting (in the HEAD) the JavaScript file. Since this file contains already the $ (document).ready event to start it after the page is loaded, there’s not anything more to do then just testing.
The tag cloud is implemented on the web of the DPZ of Zaragoza, Spain. The cloud and the source of the script is in view on, for example, http:// cultura.dpz.es/id/365.
It is an option to modify the script by changing several intervals, but the foremost customizing is done with CSS. The JavaScript options used for the web page mentioned before are:var containerWidth = 207;var containerHeight = 157;var marge = 20;var minimumRed = 34;var minimumGreen = 63;var minimumBlue = 71;var maximumRed = 92;var maximumGreen = 181;var maximumBlue = 201;var minimumFont = 1;var maximumFont = 2;
The PHP script is not public, but if somebody wants to take a study at it you can contact me at the enterprise I work at. The link to this business is in my bio.
About the Author
I work at: ProyectosBDS, “diseño web Zaragoza“. We also position internet sites in search engines: “Posicionamiento web Zaragoza”
Article Marketing Automation by Article Marketing Robot
