Javascript Dynamic Breadcrumbs - Client Side

Question

Hello I am trying to implement dynamic Javascript breadcrumbs entirely client side.

I have been restricted from using server side languages for various reasons.

I have made some progress using these two threads:

1) jQuery generate breadcrumbs from url?

However I am still unable to successfully apply this code I am not used to working with Javascript and as such my experience is a limitation so please consider that in solutions.

Cheers.

This is what I have tried:

$(document).on("pageshow", "#breadcrumb", function breadCrumb(){

var here = location.href.split('/').slice(3);

var parts = [{ "text": 'Home', "link": '/' }];

for( var i = 0; i < here.length; i++ )
{
    var part = here[i];
    var text = part.toUpperCase();
    var link = '/' + here.slice( 0, i + 1 ).join('/');
    parts.push({ "text": text, "link": link });
}
});

I do not know how to convert back to HTML and put onto webpage.

This is what I am asking for help with.

I would consider using http://benalman.com/projects/jquery-hashchange-plugin/ — Jonathan de M., Jun 14 '13 at 03:01
What exact code have you tried and what exact problems did you have with it and what exactly are you asking for help with? — jfriend00, Jun 14 '13 at 03:23

score 0 · Accepted Answer · answered Jun 14 '13 at 05:12

0

See if this helps you out

document.getElementById('ID').innerHTML = '<span>' + part[i] + '</span>';

Where the ID is above replace with a ID of a element within your rendered page. Ie: something along the lines of

<div id='breadcrumbs'></div>

answered Jun 14 '13 at 05:12

Starboy

1,635
3
19
27

Javascript Dynamic Breadcrumbs - Client Side

1 Answers1