Hello Pigey Test Page Information

A while ago I was travelling on a bus when I saw a woman with a "Hello Kitty" logo with a pink bow. I thought why should boys and men be left out, so I had the idea of a "Hello Pigey" logo with a blue bow. This idea eventually morphed into a possible website for cancer charities, where you can select a particular cancer to which you want to donate to.

In the case of this test application, you click on a radio button on the left, color coded according to the cancer, and the pigeon's eyes blink, a spinning bow comes in from the left of the screen and settles in the same place on the head as the Hello Kitty bow, and a ribbon curles up from the bottom, spins, then settles on the pigeon's chest. The color(s) of the flashing eyes, the bow and the curling ribbon is(are) based on the color(s) selected on the left. Some of the options have more than one color, so all the colors are used, except for the eyes where no more than two are allowed. In addition to the animation a sound file is played with a cooking pigeon. To select a different cancer, click the "Reset" button and the list of radio buttons will reappear.

Please note, however, that the code is not fully debugged, and only works properly, more or less, with Firefox. Other browsers may not show the animations correctly and/or play the sound. The animations make use of SVG's native SMIL, but this is being deprecated and will have to be replaced by other methods.

Note the following additional technical points:

  1. To view the SVG code embedded in the HTML code, simply go back to the previous page and select the view page source option.
  2. css/pigey.css contains the CSS code to style the page.
  3. jQuery is used for the user interface obtained from an external CND link. However, in case for some reason this is not available, the test (!window.jQuery) is made, and if it evaluates to true means the CDN link is not available, and jQuery is inserted into the DOM from the local file js/jquery-1.11.0.js. See the HTML code for the details.
  4. js/pigey.js tests the browser, then downloads the cancer color codes and descriptions from the JSON file json/ribbons.json and inserts the styled colors with the descriptions and radio buttons on the left of the image. When a particular cancer is selected, the corresponding color(s) is(are) used to color the SVG animations.
  5. json/ribbons.json contains an array of cancer names with their descriptions, color codes in hex format, and the color names. This list can be extended or otherwise modifed at any time.
  6. Other than the rollover images for navigating back to the home page, the only image is img/pigeon.jpg, which is a pigeon over which the SVG animation is shown. This was taken from a real picture of a pigeon, then Adobe Fireworks was used to create the image displayed.
  7. audio/304002_SOUNDS__pi.mp3 is an audio file of a cooking pigeon that was downloaded. The file plays for quite a long time, so jQuery is used to play only the first few seconds.

These notes are subject to be changed at any time.