Tweaked default html template (wth scrollable window)

sracer · Post by **sracer** » 2006-07-08 20:47:36

Hey all, I was looking for a nice html template that was responsive to user commands, small, and easy to tweak. I ended up going back to the default html template.

The downside to the default template is that if you have a long list of movies, you have to scroll down to select the film, and then scroll back up to see the details.

Well, I tweaked the default code slightly to make the left-hand columns scrollable so that the as soon as you click on a title, you can see the details.

Here's what it looks like in action:
http://percontifamily.com/tcperconti/DVDCollection/

here's the zip of the modified templates for anyone interested:
http://percontifamily.com/tcperconti/sr ... plate2.zip

(NOTE: Although this works with MS IE and Maxthon browsers, FireFox will not scroll the left-hand column. I'm working on fixing that.)

Post by **antp** » 2006-07-09 18:23:46

There is another example of a framed-template provided with AMC but that does not have a scroll problem like the one that you mentionned: template3.zip

Joopbraakhekke · Post by **Joopbraakhekke** » 2006-09-06 01:26:37

Yes...That's indeed template3.zip...

I already use it a long time now and I'm still glad with it! Ofcourse I tweaked it a little bit and with javascript I made it even possible to sort the colums

Grtz!

My movies:
http://xs2www.xs4all.nl/movies

RW · Post by RW » 2006-10-02 07:49:52

My movies:
http://xs2www.xs4all.nl/movies

that's a great layout...are you sharing this template Joopbraakhekke?

weazle · Post by **weazle** » 2006-10-18 15:54:03

Yes Joopbraakhekke, your template really does look cool, sorting in such a fast way is exactly what I'm looking for.
Hope you will share it with us.

zugzug · Post by **zugzug** » 2006-10-21 14:49:21

Look's good sracer! Any luck on the scrolling problem with Firefox?

uladz · Post by **uladz** » 2006-10-21 17:01:40

I'm looking forward for Joopbraakhekke's template too!

kaas · Post by **kaas** » 2006-11-06 07:58:21

Joopbraakhekke didn't post the template yet, so here's the template (I made some modifications, now you'll see a tooltip with the dvd cover when you stay on a link).. it's in Dutch, so you'll have to translate it yourself if you want to.
The tooltip modification slows down FireFox a bit, if you want to delete this modification just delete the following text in kaastemplate full.html on line 218:

Code: Select all

onmouseover="return escape('<img src=\'$$ITEM_PICTUREFILENAME\'>')

To download the template click here

You can find an example here

weazle · Post by **weazle** » 2006-11-06 12:24:01

Thx Kaas for adding your template.

Really thankfull for it, but still missing some of the things I like about Joopbraakhekke's template.
-sorting on the column header (like genre)
-movie info not on the right frame but in a different file.

Do you think you could make it like that?

Greetings Weazle

P.S. In both IE and Firefox the tooltip isnt working here.

kaas · Post by **kaas** » 2006-11-06 14:29:51

weazle wrote:Thx Kaas for adding your template.

Really thankfull for it, but still missing some of the things I like about Joopbraakhekke's template.
-sorting on the column header (like genre)
-movie info not on the right frame but in a different file.

Do you think you could make it like that?

Greetings Weazle

P.S. In both IE and Firefox the tooltip isnt working here.

Thank you

The template already contains 'sorting on the column header' (same script as in Joopbraakhekke's template). The movie info is in a different file now, but that file opens in the right frame. What is your idea of displaying movie info?
Maybe you forgot to copy all the files in the rarfile to your pc. For the tooltip script 'wz_tooltip.js' is needed, and for the sorting 'sorttable.js', you can find these files in the archive.

weazle · Post by **weazle** » 2006-11-06 21:07:18

You're totally right, I forgot to copy the JS files to the directory to where I exported the files.

So the sorting now works perfect here.
And I found out why the movie info wasnt opening in the right frame. I was exporting as index.html instead of films.html.

So now it totally works fine here and exactly as I hoped for, guess I was a bit too fast with my other post.

Thx again.

kaas · Post by **kaas** » 2006-11-07 12:45:41

weazle wrote:You're totally right, I forgot to copy the JS files to the directory to where I exported the files.

So the sorting now works perfect here.
And I found out why the movie info wasnt opening in the right frame. I was exporting as index.html instead of films.html.

So now it totally works fine here and exactly as I hoped for, guess I was a bit too fast with my other post.

Thx again.

I think it's more my fault because I didn't explain anything about the template :P But I'm happy to hear that it works fine

Joopbraakhekke · Post by **Joopbraakhekke** » 2006-11-13 23:47:18

Hi all,

Sorry for not visiting such a long time! I didn't have a lot of spare time last months... And I was most of the time in other countries instead of behind my good old pc!

Well I see that Kaas already posted my tweaked template! Thx, Kaas and no offence at all ...

It's really cool that others like this template

And also your tooltip is very nice!

Well cyaz soon..

RW · Post by RW » 2006-11-17 09:08:15

thanks kass (and Joop)...lots of great karma to you both

Thermal Ions · Post by **Thermal Ions** » 2006-12-08 18:51:01

kaas wrote:Joopbraakhekke didn't post the template yet, so here's the template (I made some modifications, now you'll see a tooltip with the dvd cover when you stay on a link).. it's in Dutch, so you'll have to translate it yourself if you want to.

I've done a very quick and dirty translation to English for those who want it. Also made a couple of quick changes:

When exporting select both full and individual files together and use the default filename "movies.html"
Weblink now displays the actual link in full, not just the text Moviemeter (with the link behind it)
Comments now display (were broken)
Shortcut key for searching changed to Alt-Q due to previous key Alt-S playing havoc with Roboform and possibly certain search bars

Hope this helps out those not comfortable in translating the template themselves. All cred goes to Kaas, Joop and any others involved in actually creating the template of course.

http://www.yourfilehost.com/media.php?cat=other&file=kaastemplate_EN_.rar
or
http://www.filefactory.com/file/8aec18/
__________________________
Cheers.....Thermal

taz37m · Post by **taz37m** » 2006-12-18 01:13:10

Hello, very nice web template you got here. I have a problem tho. I cannot get my right side to work on this. it says The requested URL dvd_572.html was not found on this server. 572 is a picture not a html. Any help please. I'm not sure what I'm doing wrong.
Thanks Taz

taz37m · Post by **taz37m** » 2006-12-18 04:01:55

Ah got it, I'm just stupid.
Thanks Taz

taz37m · Post by **taz37m** » 2006-12-18 21:02:49

Sup sup.
I added to the left side a date added column is there anyway for me to sort that column like newest dates? I'm not sure how to code that, any help would be appreciated. Thanks Taz

Thermal Ions · Post by **Thermal Ions** » 2006-12-20 03:38:38

If you have added the column correctly, then the existing javascript will perform the sorting without adjustment. I ran a test adding in the Date Added field (2 lines as noted below in the kaastemplate full.html) and it works fine for me.

Code: Select all

<!--  EXAMPLE FORM OF FIND-IN-PAGE SEARCH USING SUBMIT (ALLOWING 'ENTER/RETURN' KEY PRESS EVENT) -->
<DIV ALIGN="center"><form name="form1" onSubmit="search(document.form1, frametosearch); return false"> <input type="text" name="findthis" size="30" title="Press Alt-Q to find the next matching movie title"> <input type="submit" value="Search List" ACCESSKEY="q"></form>
  </DIV><BR>
  <td nowrap >Title</td>

  <td nowrap>Nbr</td>
  <td nowrap>Genre</td>
  <td nowrap>Year</td>
<!-- Line added by Thermal Ions 20/12/2006  -->
  <td nowrap>Added</td>
  </tr>$$ITEM_BEGIN

  <tr>
    <td class="lgt"><a href="$$ITEM_FILEINDIV" target="rightfr" class="lgt" onmouseover="return escape('<img src=\'$$ITEM_PICTUREFILENAME\'>')"><b>$$ITEM_ORIGINALTITLE</b></a></td>

  <td class="lgt">$$ITEM_NUMBER</td>
  <td class="lgt">$$ITEM_CATEGORY</td>
  <td class="lgt">$$ITEM_YEAR</td>
<!-- Line added by Thermal Ions 20/12/2006  -->
  <td class="lgt">$$ITEM_DATEADD</td>
  </tr>
  $$ITEM_END

Does this not work for you ?

Cheers...............Thermal

taz37m · Post by **taz37m** » 2006-12-21 05:43:01

Hi Thermal Ions. No that does not put then in the correct order:(
but thanks for replying:) Eg-- 1/19/2006, 1/2/2006, 1/20/2006
Taz