20 September 2009

List Expander

How I implemented it.

I downloaded the files from css global.

Since I was going for an any-blog installation, I tried to install the javascript and css in my Blogger layout–template. I was unable to get the javascript that controls the list expander to work, either in the <head> or in a Html/Javascript gadget. It worked fine after uploading it to my web site, so, I created a site on Google Sites and uploaded the file there.

The css went into the template without difficulty. It can be used:

  • Added as a linked styleshheet:
    • link href='http://sites.google.com/site/sparerep/files/listexpander.css' media='screen' rel='stylesheet' type='text/css'/>
  • Or, added to the existing stylesheet.
  • Or, wrapped in <style> </style> and added to the <head> section as a separate stylesheet.
  • Or, wrapped in <style> </style> and added to the Html gadget containing the list.

The images for the + and - need to be uploaded. The address needs to be added to the styles everyplace that collapsed.gif or expanded.gif appears. The .gif images can be:

  • Uploaded to a blog post and the image address used without the size folder.
  • Uploaded to the Blog account at http://picasaweb.google.com
    • Sign-in using normal blog account info.
    • Create a new album for the upload.
  • To Photobucket or another host.
  • To the Sites site that holds the javascript file. Make sure the site is public.

The list content as it is in the sidebar, is what was provided with the javascript and css files.

0 comments: