Hlp to do something else

Mara · **on:** May 18, 2007, 01:51:24 AM

I have a idea for icon view of the items but there is a problem.
see this basic tpl.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="/img/style.css" rel="stylesheet" type="text/css">
  </style>
  <title>%folder%</title>
</head>
<body>
<div id=body>
%folder-comment%
%files%
</div>
</body>
</html>


[login-link]
<a href="~login" class=button><img src="/~img27" /> LOGIN</a>

[loggedin]
<span class=button><img src="/~img27" /> user: %user%</span>

[upload-link]
<a href="~upload" class=button><img src="/~img32" /> UPLOAD</a>

[up]
<a class=big href=".."><img src="/~img14" /> UP</a>

[nofiles]
<div class=big>No file</div>

[files]
<div align="left" valign="top">
  <table border="0" >
    <td>
%list%
    </td>

  </table>
</div>






[file]
<td  valign="top">
  <table width="60">
<tr>
      <td align="center">
      <a href="%item-url%"><img border="0" src="/~img_file" width="32" height="32"></a></td>
</tr>
    <tr>
     <td align="center"> <a href="%item-url%">%item-name%</a></td>
</tr>
</table>
</td>

[folder]
<td  valign="top">
  <table width="60">
<tr>
      <td align="center" >
         <a href="%item-url%"><img border="0" src="/img/folder_green.JPG" width="32" height="32"></a>
      </td>
</tr>
    <tr>
      <td  align="center"><a href="%item-url%">%item-name%</a></td>
</tr>
</table>
</td>


[link]
<tr><td>%new% <a href="%item-url%"><img src="/~img_link" /> <b>%item-name%</b></a>%comment%<td colspan=3 align=center><i>link</i>

the "style.css" :

Code: [Select]

[style]
body, th { font-family:tahoma, verdana, arial, helvetica, sans; font-weight:normal; font-size:9pt; }
body { margin:0; background:url('/img/bg1.gif'); padding:10px; }
p { margin:0 }
a { text-decoration:none;  background-color:Transparent; color:#05F; }
a:visited { color:#55F; }
a:hover { background-color:#EEF; }
img { border-style:none }
td { font-size:10pt; background:#FFF; border:1px solid #BBF }
td img { vertical-align:top }
th, th a, th a:visited { color:#555; font-size:13pt; font-weight:bold; padding-bottom:0; }
#foldercomment { font-size:10pt; color:#888; background:#EEE; padding:3px; border:1px solid #DDD; border-bottom:3px solid #DDD; margin-top:2px; }
#tools { text-align:right; font-size: 8pt; }
#folder, .big { font-size:14pt; font-weight:bold;  }
#folderlabel, #folderstats, #footer { font-size: 8pt; }
#FileList	{position: absolute; left: 30%; width: 70%; height: 100%} 
#body {
  border-bottom: 4px solid #BBF;
     border-top: 4px solid #BBF;
    border-left: 1px dotted #BBF;
   border-right: 1px dotted #BBF;
  background:url('/img/search_row_back.gif');
  padding:15px;
  margin:15px;
}
.comment { font-size:7pt; color:#888; background:#EEE; padding:3px; border:1px solid #DDD; margin-top:2px; }
.button { float:right; padding:5px; padding-top:7px; margin:15px; border:2px solid black; background:white; font-size:8pt; font-weight:bold; }
.button img { vertical-align:text-bottom; }
.flag { font-weight:bold; font-size:8pt; background:white; color:red; text-align:center; border:1px solid red; }

The problem is THE NEW LINE OF THE ICONS ...

TSG · **Reply #1 on:** May 18, 2007, 01:09:08 PM

Giant Eagle has had success with this. The HFS Terayon Template sports a thumbnail view just like that in the image galleries, i think it requires a different filelist... or javascript i cannot remember how he did it. Unsure if it is in the released build... it might be. I'll ask him about it over msn next time i see him, if he doesn't reply here before then.

also...

'Some pics of my temple', I noticed this a long time ago... shouldn't it be 'Some pics of my template'

Anyhoo. It's nice to see you back on the forum

its been a while.

Howcome you don't share your template, its very nice

Giant Eagle · **Reply #2 on:** May 18, 2007, 10:41:23 PM

Yes this is possible using javascript ^^

first, set a viariable inside the head

Code: [Select]

<script type="text/javascript" language="javascript">
var count="0";
</script

the next thing to do is to put some script tags around the %list% thing.

Code: [Select]

<script type="text/javascript">
%list%
count++;
var fillEmpty = "<td width =\"25%\">&nbsp;</td>";
document.write (count=='2'?fillEmpty+fillEmpty+fillEmpty:'');
document.write (count=='3'?fillEmpty+fillEmpty:'');
document.write (count=='4'?fillEmpty:'');
</script>

and the final step, is to put some <Script> inside the [file] and [folder] sections..

This is an example for the [file] section of your template..

Code: [Select]

count++; count=='5'?count='1':'';
document.write (count=='1'?'<tr height="128">':'');
</script>

<td width="25%">
  <table width="60">
<tr>
      <td align="center">
      <a href="%item-url%"><img border="0" src="/~img_file" width="32" height="32"></a></td>
</tr>
    <tr>
     <td align="center"> <a href="%item-url%">%item-name%</a></td>
</tr>
</table>
</td>

<script type="text/javascript">
document.write(count=='4'?'</tr>':'');

What this script actually does:

It creates an image gallery that looks something like this:

Code: [Select]

 ____    ____    ____    ____
|    |  |    |  |    |  |    |
|____|  |____|  |____|  |____|

 ____    ____    ____    ____
|    |  |    |  |    |  |    |
|____|  |____|  |____|  |____|

 ____    ____    ____    ____
|    |  |    |  |    |  |    |
|____|  |____|  |____|  |____|

 ____    ____    ____    ____
|    |  |    |  |    |  |    |
|____|  |____|  |____|  |____|

every file adds 1 point to the counter. when the counter reaches 4, it basically resets itself and creates a new row.

there is, however >_<, 1 negative thing about this script; If the user has javascript disabled, it just shows one big row just like your screenshot. (so the users would have to scroll to the right)

Mara · **Reply #3 on:** May 19, 2007, 01:03:58 AM

10x for the help !!!!

TSG · **Reply #4 on:** May 19, 2007, 05:10:01 AM

we do what we can

nice work Giant Eagle.

Hlp to do something else

Mara

Hlp to do something else

TSG

Re: Hlp to do something else

Giant Eagle

Re: Hlp to do something else

Mara

Re: Hlp to do something else

TSG

Re: Hlp to do something else