There are currently two different javascript includes available for displaying personalized movie lists on web pages, such as weblogs:

• watchscript: displays the list of movies that are on your watch list.
• ratescript: displays the list of movies that you've rated.

And when you get those lists displaying on your page, here are some tips for adding some style to your lists.

If you really hate reading documentation, you can see the final product in action here, and you can simply copy/paste the source into your pages, and tweak as desired.

watchscript

You may want to show your readers what movies you're interested in renting, or what you're waiting to show up at theaters near you. Here's a simple example:

To include your personalized watch list on your web site, simply copy and paste this line of javascript into your web page:

Be sure to change the variable "yourusername" to your actual cin-o-matic username, to display your personalized movie list.

Customizing Your Watchscript

There are a few variables available to customize your personal watchscript preferences:

• sort: you can sort the list of movies by theatrical release date, alphabetically, or by when they were added to your watch list.
  • &sort=release to sort by theatrical release date (default)
  • &sort=alpha to sort alphabetically
  • &sort=recent to sort by when most recently added to your watch list
• director: You can choose to display the movies' directors. Or not:
  • &dir=n to not display the director (default)
  • &dir=y to display the director
• year: You can choose to display the year the movies were made. Or not:
  • &year=n to not display the year (default)
  • &year=y to display the year
• number of movies displayed: You can choose to display as many (or as few) movies as you'd like:
  • &max=all to display all your watch list movies (default)
  • &max=5 to display 5 movies

An Example

To display a list of 5 watchlist movies, sorted by when they were added to the watch list, and displaying both the director and year, it would look something like this:

... using the following javascript include:

ratescript

You may want to show your readers what movies you've seen, and what you thought of them. Here's a simple example:

To include your personalized ratings list on your web site, simply copy and paste this line of javascript into your web page:

Customizing Your Ratescript

There are a few variables available to customize your personal ratescript preferences:

• sort: you can sort the list of movies by theatrical release date, alphabetically, or by when they were added to your watch list.
  • &sort=release to sort by theatrical release date (default)
  • &sort=alpha to sort alphabetically
  • &sort=recent to sort by when most recently added to your watch list
• director: You can choose to display the movies' directors. Or not:
  • &dir=n to not display the director (default)
  • &dir=y to display the director
• year: You can choose to display the year the movies were made. Or not:
  • &year=n to not display the year (default)
  • &year=y to display the year
• number of movies displayed: You can choose to display as many (or as few) movies as you'd like:
  • &max=all to display all your watch list movies (default)
  • &max=5 to display 5 movies
• rating display: you can choose to display your movies' ratings either at the beginning, or at the end of a line.
  • &ratingfirst=y to display your rating at the beginning (default)
  • &ratingfirst=n to display your rating at the end

An Example

To display a list of 5 movies you've rated, sorted by when they were rated, with the rating at the end, and displaying neither the director and year, it would look something like this:

... using the following javascript include:

styling your lists

Cin-O-Matic provides you with a very plain and simple HTML list. It's entirely up to you how you'd like that to look. To see the source code you're including on your web page, simply copy and paste the javascript source into a browser and view the source:

An Example

Again, it's entirely up to you how you'd like your lists to look, and with CSS there are countless ways of styling the data. Styling lists is an art. For more information on techniques, please see A List Apart's "Taming Lists" article, or browse a Google search. Here is one approach that works:

1. Wrap the Cin-O-Matic javascript include inside a DIV tag, and assign the DIV an ID. Something like this:
   <div id="ratescript">
   <script language="JavaScript" src="http://www.cin-o-matic.com/ratescript.php?ID=yourusername&sort=recent&dir=y&year=y&max=5">
   </script>
   </div>
2. Then, in your stylesheet, or right in the page where you're displaying the list, apply a style to the standard unordered list that's now inside the assigned DIV. Something like this:

   div#ratelist ul {
   	margin: 0;
   	padding: 0; 
   	list-style-type: none;
   	}
   
   div#ratelist li {
   	margin: 0; 
   	padding: 0; 
   	line-height: 1.4em; 
   	}
   

   This particular approach removes the bulleted list format, left-aligns the list, removes any spacing above and below the list, and provides nice spacing between list items, like this:
   For watchscript, you can keep it simple and apply only those styles.
   
   
3. In the case of the ratescript, there is an additional piece of data -- your rating -- that you may want to apply styling to. In the Cin-O-Matic javascript include ratescript, each one of your numerical scores is wrapped inside a SPAN tag with the rating value, like so:
   <span class="r1">1</span>
   <span class="r2">2</span>
   <span class="r3">3</span>
   ... and so on.
   By styling the contents of the SPAN tag, you can add some, um, style to your numerical scores, to match the style of your web site or weblog. Here is an approach that matches the cin-o-matic.com color scheme:

   div#ratelist span { 
   	font-size: 10px; 
   	font-weight: bold; 
   	border: solid 1px #000; 
   	padding: 0 2px; 
   	}
   
   div#ratelist span.r0, span.r1, span.r2, span.r3, span.r4 { 
   	background: #ffaf00; 
   	}
   
   div#ratelist span.r5, span.r6 { 
   	background: #ff0; 
   	}
   
   div#ratelist span.r7, span.r8, span.r9, span.r10 { 
   	background: #b7ea00; 
   	}
   

   ... which will produce a display like this:
   

If you have any problems getting your lists working, please send an email to editor at cin-o-matic.com. Thanks.