Browsable Folder Tree

[Giant Eagle]

That_Stevens_Guy, Flynsarmy and I have been working on a new feature called the Browsable Folder Tree..

This project was based on a request made by Fabnos in the "Converted Template" topic. It was my idea, TSG made some suggestions and Flynsarmy improved the code

here goes:

If you, for example, browse a folder called /folder1/example foldername 2/example 3/ then its now possible to click on Folder 1 to go there, instead of pressing "Up, one folder" multiple times.

This code is written in JavaScript, but even if the user disabled JS, they wont notice a thing. It replaces the current %folder% with the Folder Links.

The code:

Code: [Select]

function dirLinks() {

var path="%folder%".split("/");;
var pathTree="";
var pathTreeResult="";

for(pta=1;pta<path.length;pta++) {
          pathTree=pathTree+"/"+path[pta];
          pathTreeResult=pathTreeResult +'/<a href="'+pathTree+'" class=\"swapDir\">'+path[pta]+'</a>';
      }
    document.getElementById('swapDir').innerHTML = pathTreeResult;
}

Then, where %folder% is located in your template, replace it with this, this code also allows /Home browsing when js is turned off:

Code: [Select]

Current Directory: /<a href="/" class=swapDir>Home</a><span id=swapDir>%folder%</span>
<script type="text/javascript" language="javascript">dirLinks()</script>
This code is based on the ToG Template

Some CSS which can be easily modified, it will allow the links to act as you want them.

Code: [Select]

a.swapDir:link, a.swapDir:active, a.swapDir:visited {
        color:#fff;font-weight:normal;
}

a.swapDir:hover {
        color:#CAD9EA;
}
This code is also based on the ToG Template

Of course.. This function is also implemented in my template (HFS Terayon v1.2)

To test it on the latest build of the ToG
User: guest Pass: guest

To test it on the latest test build of HFS Terayon - Click here!

[TSG]

No comments?... bugs?... things that we need to know about?

[rejetto]

yes: it's nice

[traxxus]

Then, where %folder% is located in your template, replace it with this, this code also allows /Home browsing when js is turned off:

Code: [Select]

Current Directory: /<a href="/" class=swapDir>Home</a><span id=swapDir>%folder%</span>
<script type="text/javascript" language="javascript">dirLinks()</script>
This code is based on the ToG Template

I dont understand this part.... every %folder" tag ? dont works. Please explain it exactly what i have to do.

[TSG]

It doesn't do every %folder% tag... just the one you want it to do

Notice on most templates how there is a %folder% tag after the words Current Directory: "%folder%" usually somewhere in the main section of the template. And when you browse the template you notice it show the current folder in a line of "Current Directory:/Files/Images/Babes/You get my drift/" well currently this is not a usable part of the navigation of the HFS, so what we have done with this code is allow you to turn the folder tree into a key part of the HFS navigation. it's very useful. We have also included a /Home default which is available even when JavaScript is turned off.

All you have to do locate where that folder tree is created in you template, and replace it with the code you quoted and asked help for.

I hope this helps.

[traxxus]

No, i cant do it... its to hard. I will wait for Terayon 1.2....  

[fabnos]

No, i cant do it... its to hard. I will wait for Terayon 1.2....  

Also I, very waiting 
Ciao
f

[TSG]

Yes Terayon is a little harder to edit lol, i was only talking about it from the ToG point of view, We are one bug away from releasing a clean version of ToG, and as for the Terayon, well thats got a few more bugs left to fix lol. but Giant Eagle is getting there.

I have told GE to post on how to do it for Terayon.

[traxxus]

Ok, i have successfully integrated into the ToG template 

[Salerno]

Well I've been trying to get this working on my own website and I just can't. Could you be a bit more specific as to where exactly each piece of this code needs to be placed (especially the javascript code seeing as I don't have any other JS on my page).
Also, when you say "if Javascript is not enabled they won't notice a thing" does that mean that the tree won't function as intended but will still display as normal text. Or do you mean that it will work just as if the user has Javascript enabled. Stupid questions but if you could give me a straight answer I'd really appreciate it.

[TSG]

We have it set so that when javascript is turned on, the javascript automatically rewrites the %folder% that is inside a span with the 'browseable %folder% tree'. If javascript is turned off, the span will not be re-written so the default folder tree is visible.

Basically yes, without javascript they see the default text version of %folder%.

Put the javascript in the <head> section of your template between <script type="text/javascript"></script>, and put the css in the [style] section or in <style> or an external .css file. And the html part goes in your <body> where your current %folder% tag lies.

<doctype meh...>

<html>
<head>
<meta etc.>
<title etc.>
<script type="text/javascript">
//javascript
</script>

<body>

<!-- the html part.... somewhere-->

</body>
</html>



I will post up the version of this that can use external javascript files whenever i get time, checkout the latest ToG for that version.

[salerno]

THANKYOU!
I really appreciate your post (the edited version ) because it was exactly what I was looking for!
When I responded I was looking at the original post so once again, thanks.

[TSG]

NEW TOG VERSION - even though its about 4 months old now

In the head of your template you have to do this when using external files:
<script type="text/javascript">var Fldr="%folder%";</script>

If you are using the main code in the head of the template, you must put the following above the function:
var Fldr="%folder%";

This is the main code that does the string splitting and stuff...
//Breadcrumbs
function bCrumbs() {
   x="/";
   y=Fldr.split(x);
   bC="";
   for(z=1;z<y.length;z++){
      x=x+y[z]+"/";
      bC=bC+'/<a href="'+x+'" class=swpFt>'+y[z]+'</a>';
   }
   document.getElementById('swpFt').innerHTML = bC;
}

Ok, now we have the main scripts... next we must set up the html...
<div class=dr>
    Current Directory: <a href="/" class=swpFt>Home</a><span id=swpFt>%folder%</span>
    <script type="text/javascript">bCrumbs()</script>
</div>

Done, you now have a bread crumb trial.

You can work out what to do with the css... I cant be bothered writing out some classes to style it... if you require an example i will post that.

Note: <script type="text/javascript">bCrumbs()</script> MUST be placed just after the element that you are changing.
Note: You will notice my version of the code is smaller than what you find on the terayon, i have compressed it a fair bit.

Good Luck 

[Giant Eagle]

This is the main code that does the string splitting and stuff...
//Breadcrumbs
function bCrumbs(Fldr) {
   x="/";
   y=Fldr.split(x);
   bC="";
   for(z=1;z<y.length;z++){
      x=x+y[z]+"/";
      bC=bC+'/<a href="'+x+'" class=swpFt>'+y[z]+'</a>';
   }
   document.getElementById('swpFt').innerHTML = bC;
}

Ok, now we have the main scripts... next we must set up the html...
<div class=dr>
    Current Directory: <a href="/" class=swpFt>Home</a><span id=swpFt>%folder%</span>
    <script type="text/javascript">bCrumbs("%folder%")</script>
</div>

[TSG]

Thanks, thats another way to do it, i was too lazy to change the code.