3D Tag Cloud With Javascript and Css
Tag clouds come in many shapes and forms, but in my opinion the nicest tag clouds are the ones shaped as a ball with animated effects when you move over them. With a sort of 3d effect.
Most of these tag clouds are flash based and not suited for sites that have to be accessible. So when I had to program a 3d cloud for a customer, and the site had to be accessible, I had to find another solution.
When accessibility is a must JavaScript can be a solution. The first script found on the internet used canvas, but this is a problem for browser that cannot display canvas elements. After searching more I finally found a JQuery plugin offering the desired effect with nothing more then CSS and JavaScript. So I implemented it, and the result was very satisfying.
The tag cloud created is now visible on the website of one of our customers. When deactivating JavaScript the tag cloud stays correctly visible and when activating CSS it is shows as a list (because it is created with ul and li html elements).
Although the script used is pretty easy to install, the real challenge was to create the correct PHP script to create the list items and to set their starting position. With some work, testing and modifying the CSS the tag cloud got created correctly.
After creating the correct HTML the JQuery plugin has to be setup by inserting the JavaScript file. Since this file contains already the $(document).ready event to start it after the DOM is loaded, there's not anything more to do then just testing.
The tag cloud is used on the website of the DPZ of Zaragoza, Spain. The cloud and the source of the script is visible on, for example, http://cultura.dpz.es/id/365.
It is possible to modify the script by changing some intervals, but the principal customizing is done with CSS. The JavaScript options used for the website mentioned before are:
var containerWidth = 207;
var containerHeight = 156;
var marge = 20;
var minimumRed = 34;
var minimumGreen = 63;
var minimumBlue = 71;
var maximumRed = 92;
var maximumGreen = 180;
var maximumBlue = 203;
var minimumFont = 1;
var maximumFont = 2;
The PHP script is not accessible, but if somebody wants to take a look at it you can contact me at the company I work at. The link to this company is in my bio.
Most of these tag clouds are flash based and not suited for sites that have to be accessible. So when I had to program a 3d cloud for a customer, and the site had to be accessible, I had to find another solution.
When accessibility is a must JavaScript can be a solution. The first script found on the internet used canvas, but this is a problem for browser that cannot display canvas elements. After searching more I finally found a JQuery plugin offering the desired effect with nothing more then CSS and JavaScript. So I implemented it, and the result was very satisfying.
The tag cloud created is now visible on the website of one of our customers. When deactivating JavaScript the tag cloud stays correctly visible and when activating CSS it is shows as a list (because it is created with ul and li html elements).
Although the script used is pretty easy to install, the real challenge was to create the correct PHP script to create the list items and to set their starting position. With some work, testing and modifying the CSS the tag cloud got created correctly.
After creating the correct HTML the JQuery plugin has to be setup by inserting the JavaScript file. Since this file contains already the $(document).ready event to start it after the DOM is loaded, there's not anything more to do then just testing.
The tag cloud is used on the website of the DPZ of Zaragoza, Spain. The cloud and the source of the script is visible on, for example, http://cultura.dpz.es/id/365.
It is possible to modify the script by changing some intervals, but the principal customizing is done with CSS. The JavaScript options used for the website mentioned before are:
var containerWidth = 207;
var containerHeight = 156;
var marge = 20;
var minimumRed = 34;
var minimumGreen = 63;
var minimumBlue = 71;
var maximumRed = 92;
var maximumGreen = 180;
var maximumBlue = 203;
var minimumFont = 1;
var maximumFont = 2;
The PHP script is not accessible, but if somebody wants to take a look at it you can contact me at the company I work at. The link to this company is in my bio.
Source...