The Wish List Widget

today the Wish List Widget has officially been published: visit downintheflood.com or outlawblues.de. one issue that wasn't mentioned in the process are the css style details used to display the Wish List on the right side of the screen, so i just decided to write about them here:

first i would like to display the external stylesheet used to display the Wish List as seen at the above two links:

#wishlist_div              {position:absolute; top:0; right:0;}
#wishlist_img              {font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#CC0000;}
#wishlist_price            {font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#0000FF;}
#wishlist_product          {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#0000FF;}
a#wishlist_ahref:link      {color:#CC0000; font-family:Tahoma, sans-serif, Arial; font-size:11px; text-decoration:none;}
a#wishlist_ahref:hover     {color:#CC0000; font-family:Tahoma, sans-serif, Arial; font-size:11px; text-decoration:underline;}
a#wishlist_ahref:active    {color:#FFFF00; font-family:Tahoma, sans-serif, Arial; font-size:11px; text-decoration:underline;}
a#wishlist_ahref:visited   {color:#FF0000; font-family:Tahoma, sans-serif, Arial; font-size:11px; text-decoration:underline;}

you may notice that the styles all consist of a id for wishlist. this has been done to avoid any conflict with existing CMS styles. in addition to that wishlist links are being referred to with the id wishlist_ahref; similarily the wishlist_div and wishlist_img id's refer to the relevant <div> and <img> elements. there are several more: the following css styles display all the available id's that can be used in conjunction with the Wish List Widget; either from an external css file of from within the html page:

@charset "utf-8";
a#wishlist_ahref:link    { font-weight:bold; text-decoration:none; color:#000066; }
a#wishlist_ahref:visited { font-weight:bold; text-decoration:none; color:#003366; }
a#wishlist_ahref:hover   { text-decoration:underline; color:#AB0000; }
a#wishlist_ahref:active  { text-decoration:underline; color:#CC0000; }
#wishlist_div            { background-color:#339A99; width:355px; font-family:Trebuchet MS, Verdana, Tahoma, sans-serif; font-size:8pt; position:absolute; top:0px; left:0px; }
#wishlist_img            { background-color:#0000FF; padding-top:5px; padding-bottom:3px; padding-left:8px; padding-right:15px; }
#wishlist_list_price     { color:#990000; }
#wishlist_price          { color:#AB0000; font-size:10pt;}
#wishlist_product        { background-color:#CC0000; color:#F6F6F6; font-size:10pt; font-weight:bold; }
#wishlist_table          { background-color:#FFFF80; width:250px; padding:5px; }
#wishlist_td_img         { background-color:#CC00CC; width:150px; padding:5px; text-align:center; }
#wishlist_td_product     { background-color:#FFFFFF; width:150px; padding:0px; }
#wishlist_your_price     { color:#0000FF; }

to see what the colorful layout looks like when the above styles are being used take a look at Mr Rat's Wishlist; if you think that i may have overdone it somewhat on the colors, it is obvious that this has only been done so for demonstration purposes. take special note of the @charset "utf-8"; on the first line of this css style section!

the JavaScript uses PHP in the background to retrieve the Wish List from Amazon's server by making use of Amazon Associates Web Services features. the XML result returned by Amazon is utf-8 encoded, thus the page needs to be utf-8 encoded in order to display special characters properly.

if you use

#wishlist_div              {position:absolute; top:0; left:0;}

from the first css example, instead of

#wishlist_div              {position:absolute; top:0; right:0;}

it will display the Wish List Widget on the left side of the screen instead of the right side;

from the optical point of view it looks better to have the image to the left side when the Widget is displayed on the left side of the screen, and on the right side should the Widget be displayed on the right side of the screen. that's why there is a choice in the setup file to choose between left and right; two separate PHP files are being used to display it so.

some users may have a question about the slot(s); i called them that for lack of a better explanation. it's a kind of a place to fit in. if a growing number of users should implement the Widget on their websites, the demand on one file could slow down the Widget to show up, especially since the information has first to be gathered from Amazon's servers. that's why i have spread the files over altogether 52 directories, 26 on each site mentioned above so people can choose a different site or directory and it will not all come out of one pot. there's no other purpose than that. besides that: Amazon has made it obligatory that one can make only 1 request to their servers per second; that means the request sleeps for a sec before being processed.

i guess that's all that's gotta be said about this project besides what's already been mentioned elsewhere, if so. ... the story continues ...

tom.paine