My Template (so far)
Posted: 2002-08-01 01:46:10
Just downloaded this awesome program yesterday and am loving it. thought I'd start giving back straight away. I based the template on the default one so it looks basically the same, however I made the pictures stay the same size (90x140) the pictures are the link to the website (imdb in my case). if you click the title the table expands to reveal actors, director and producer (easily changed). If there is no picture or link then it's not displayed (nopic.gif displayed instead). and at the start of each letter (ie first movie that starts with letter) a alphabet and 0-9 are printed with links to the first movie of that letter/number. I'm still working on it, but I thought I might see what you guys think. It seems a little slow at the moment due to the amount of scripts it has to run but I'm working on that too.
Code: Select all
<html>
<title>Twink's Movie List</title>
<script language="javascript">
function dToggle(x){
if (x.style.display==""){
x.style.display="none";
}
else{
x.style.display="";
}
}
var lastm = " "
function lastmovie(x){
var oldlastm = lastm;
lastm = x;
return oldlastm;
}
function newletter(x){
var last = lastmovie(x);
if(x.charAt(0)!=last.charAt(0)){
document.write("<a name='",x.charAt(0),"'>");
writeletters();
}
}
function writeletters(){
var alphabet = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
document.write("<td colspan='7'><center>");
for(var a=0;a<36;a++){
document.write("<a href ='#",alphabet[a],"'>",alphabet[a],"</a> ");
}
document.write("</center></td><tr>");
}
</script>
<head>
<style TYPE="text/css">
text,body,p,div,span,th,td,ul,li { FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; color: black; background: white; }
HR { color: black; }
A:link { COLOR: #003399; background: white; }
A:visited { COLOR: #003399; background: white; }
A:hover { COLOR: #CC0000; background: white; }
A:active { COLOR: #CC0000; background: white; }
td.blk { color: white; background: black; border: solid; border-color: black; }
table.blk { color: white; background: black; border: solid; border-color: black; border-width: thin; }
table.lgt { color: black; background: white; border: solid; border-width: thin; border-color: #F5F5F5; }
td.lgt { color: black; background: white; border: solid; border-width: thin; border-color: #F5F5F5; }
p.title { font-size: 18pt; font-weight: bold; }
</style></head><body>
<p>Last updated on $$DATE<BR>
Total: $$TOTALMOVIES movies<br>
</p>
<div id="list" >
<table class="blk" border="1" cellspacing="0" cellpadding="5"><tr>
<thead>
<td class="blk" nowrap>Number</td>
<td class="blk" nowrap>Title</td>
<td class="blk" nowrap>Lent To</td>
<td class="blk" nowrap>Length</td>
<td class="blk" nowrap>Source</td>
<td class="blk" nowrap>Format</td>
</thead>
<tbody>
</tr>$$ITEM_BEGIN<tr>
<script>
newletter("$$ITEM_ORIGINALTITLE")
</script>
<td rowspan="2" class="lgt"><strong>$$ITEM_NUMBER</strong> $$ITEM_APPRECIATION<br>
<script>
if("$$ITEM_URL"!="")document.write("<a href = $$ITEM_URL>");
if("$$ITEM_PICTUREFILENAME"!=""){
document.write("<img src='$$ITEM_PICTUREFILENAME' width='98' height='140'>");
}else{
document.write("<img src='nopic.gif' width='98' height='140'>");
}
if("$$ITEM_URL"!="")document.write("</a>");
</script>
</td>
<td class="lgt" style="cursor:hand;" onclick="dToggle(List0_Detail[$$ITEM_NUMBER-1]);">
<strong>$$ITEM_ORIGINALTITLE </strong>
</td>
<td class="lgt">$$ITEM_BORROWER </td>
<td class="lgt">$$ITEM_LENGTH Minutes</td>
<td class="lgt">$$ITEM_SOURCE </td>
<td class="lgt">$$ITEM_VIDEOFORMAT </td>
</tr>
<tr>
<td colspan="6" class="lgt">$$ITEM_DESCRIPTION </td>
</tr>
<tr id="List0_Detail" style="display:'none';">
<td rowspan="1" class="lgt">
<strong>
Director:<br>Producer:<br>Actors:
</strong>
</td>
<td colspan="6" class="lgt">
$$ITEM_DIRECTOR <br>
$$ITEM_PRODUCER <br>
$$ITEM_ACTORS <br>
</td>
</tr>
<tr><td colspan="7" class="blk"></td>
</tr>$$ITEM_END
</tbody>
</table>
</div>
</body></html>
