Breadcrumbs geven verkeerde locatie

[antonwas]

Beste lezers,

Ik heb het volgende probleem. Ik wil met JavaScript breadcrumbs maken. Ik heb daarvoor het volgende bekende script van internet geplukt: (omdat ik zelf niet zulke complexe scripts kan lezen)

function breadcrumbs(){
  sURL = new String;
  bits = new Object;
  var x = 0;
  var stop = 0;
  var output = "<a href=\"/\">Home</a> &nbsp;>&nbsp; ";
  sURL = location.href;
  sURL = sURL.slice(8,sURL.length);
  chunkStart = sURL.indexOf("/");
  sURL = sURL.slice(chunkStart+1,sURL.length)
  while(!stop){
    chunkStart = sURL.indexOf("/");
    if (chunkStart != -1){
      bits[x] = sURL.slice(0,chunkStart)
      sURL = sURL.slice(chunkStart+1,sURL.length);
    }else{
      stop = 1;
    }
    x++;
  }
  for(var i in bits){
    output += "<a href=\"";
    for(y=1;y<x-i;y++){
      output += "../";
    }
    output += bits[i] + "/\">" + bits[i] + "</a> &nbsp;>&nbsp; ";
  }
  document.write(output + document.title);
}

en dan de code om het hele verhaal aan te roepen:

<script language="JavaScript">
<!--
breadcrumbs();
 -->
</script>

Mijn probleem is het volgende. Als ik het script invoeg in een bepaalde webpagina, dan gaat de breadcrumbs terug van het bestand naar de locatie waar het opgeslagen staat. Dus gewoon naar de plek op de hardeschijf en niet de plek in de website. Ik kan wel op de verschillende links klikken, maar dan kom ik gewoon in een standaard windows venster en zie ik idd het bestand staan. Ik snap er niets van. Overigens staan wel al de bestanden van de website in 1 map en ze zijn dus niet verdeeld. Ik weet niet of dat wat uitkmaakt, maar dat moet iemand dan maar even haarfijn uitleggen, want ik snap er geen zak van. Anders moet ik alles met de hand gaan invoegen met HTML/CSS. Daar heb ik niet zo'n zin in.

In ieder geval bedankt,

Anton

 

[That Guy]

Eukay.

Even kort gezegt: dit script loopt door je url heeb (bijvoorbeeld: www.mijnpagina.nl/map/nogeenmap/test.html) en gaat erdoorheen. Als het een '/' tegenkomt, weet het dat het de volgende 'breadcrumb' heeft gevonden, en voegt die toe.

Nu, als je m lokaal checkt, zal ie nogsteeds zoeken naar '/'-jes. Echter (iig op Windows machine's) bestaan mappen uit backslaches, '\' dus. En daar is het script niet op gemaakt.


trouwens, niet om vervelend te doen, maar het script is nogal bagger. Ik denk dat het best een stuk optimaler kan. Ga wel even knutselen



:thumb:

 

[That Guy]

Zoiets:[JS]function broodkruimels(url)
{

var regexp, delim = ' -> ';

regexp = /^((http|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+\.[^#?\s]+)(#[\w\-]+)?$/;

if(url.toString().match(regexp))
{
var main, out = '';

main = RegExp.$2 + '://' + RegExp.$3 ;
out += "<a href='" + main + "'>Home</a>";

if(RegExp.$4.length > 1)
{
var path, len, i, fPath = '';

path = RegExp.$4.split('/');
len = path.length-1;

for(i=1;i<len;i++)
{
fPath += path + '/';
out += delim + "<a href='" + main + '/' + fPath + "'>" + path + '</a>';
}
}
if(RegExp.$6.length > 1)
{
out += delim + "<a href='" + main + RegExp.$4 + RegExp.$6 + "'>" + RegExp.$6 + '</a>';
}
}
return out;
}[/JS]
je roept m zo aan:
[JS]document.write(broodkruimels(URL));[/JS]
waar URL de link van je pagina is (dus in het geval van een site, window.location:
[JS]document.write(broodkruimels(window.location));[/JS]
oid.

Om te testen heb ik deze gebruikt:
[JS]document.write(broodkruimels('http://www.site.nl/map/nogmeer/bestand.html'));[/JS]



Oh, nog wat script-noots: ik gebruik een beetje een rare manier van control-structures en variabelen, maar dat vind ik zelf netter. Daarnaast gebruikt het een regex om de url te checken, niet dat dat erg is, maar het kan utieraard ook anders.

Op de 3e regel zie je de delimeter-variabele, deze maakt de 'pijltjes' tussen de links. Deze kan je gewoon veranderen.

Laatste note: het script kan beter (en sneller, vooral die string-toevoeging (+= + +) kan netter, maarja.


:thumb:

 

[antonwas]

Oke het zijn allemaal hele technische zaken waar je over praat. Maar ik moet dus in ieder geval de website gaan structureren in mappen. En is dan ook dat probleem opgelost dat ie een windows venster geeft als je op een breadcrumb klikt?

 

[That Guy]

Wat bedoel je precies met

dat ie een windows venster geeft als je op een breadcrumb klikt

? Als je (iig via mijn script) op een breadcrumb klikt, gaat je 'gewoon' naar die pagina op die locatie. Dus hetzelfe idee als je op deze pagina, bovenaan, dit ziet staan:

Home > Helpmij.nl Forum > Programmeren > Javascript > Breadcrumbs geven verkeerde locatie

aleen dan werkt het met mappen.



:thumb:

 

[antonwas]

Ja ik begrijp nog steeds niet helemaal wat je bedoelt. Ik zal wel ff iets duidelijker zijn. Ik maak gewoon een paar vragen van problemen waar ik tegen aan loop:

1. Moet ik de .html bestanden nu in mappen stoppen of kan ik ze gewoon allemaal bij elkaar in een map zetten?

2. Ik heb je code ingevoegd, maar hij deed het niet. Maar dat komt waarschijnlijk omdat ik iets verkeerds doe. Wil je stap voor stap zeggen waar ik die stukken code moet invoegen (in de body, header, enz.) en of ik evt. nog iets moet aanpassen.

Mischien dat ik op deze manier verder kom, want ik wil het wel voor elkaar krijgen.

 

[That Guy]

1. Jazeker. Het script gaat ervan uit dat je mappen gebruikt. Een voorbeeld van een mappen-indeling:

   /voorbeeld/
         voorbeeld.html
   /overmij/
         overmij.html
   /test/
         test.html
         /map/
               woot.html
               meer.html

   index.html

2. Voeg deze code in je head:
[JS]<script type='text/javascript'>
function broodkruimels(url)
{

var regexp, delim = ' -> ';

regexp = /^((http|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+\.[^#?\s]+)(#[\w\-]+)?$/;

if(url.toString().match(regexp))
{
var main, out = '';

main = RegExp.$2 + '://' + RegExp.$3 ;
out += "<a href='" + main + "'>Home</a>";

if(RegExp.$4.length > 1)
{
var path, len, i, fPath = '';

path = RegExp.$4.split('/');
len = path.length-1;

for(i=1;i<len;i++)
{
fPath += path + '/';
out += delim + "<a href='" + main + '/' + fPath + "'>" + path + '</a>';
}
}
if(RegExp.$6.length > 1)
{
out += delim + "<a href='" + main + RegExp.$4 + RegExp.$6 + "'>" + RegExp.$6 + '</a>';
}
}
return out;
}
</script>[/JS]
en op de plek van waar je de broodkruimels wilt hebben:

<script type='text/javascript'>
   document.write(broodkruimels(window.location));
</script>

dan zou t moeten werken! :thumb:

mocht het nog niet werken, plaats dan even een link naar een online voorbeeldpagina of zet evne je code online