CODEWITHSUNDEEP
jqueryjquery-selectorsbreadcrumbs
thugsb
thugsb

Reputation: 23436

Shorten a breadcrumb with jQuery

I have the following code for my breadcrumbs:

<a name="top"></a>
<a href="/index.html">Home</a>&nbsp;/&nbsp;
<a href="../../../../index.html">Level1</a>&nbsp;/&nbsp;
<a href="../../../index.html">Level2</a>&nbsp;/&nbsp;
<a href="../../index.html">Level3</a>&nbsp;/&nbsp;
<a href="../index.html">Level4</a>&nbsp;/&nbsp;
Page

Which produces: "Home / Level1 / Level2 / Level3 / Level4 / Page". I want to use javascript/jQuery to shorten it to "Home / Level1 [...] Page", with Home, Level1 and the Page always showing, regardless of the number of other pages. But I'm not sure how to grab the stuff inbetween.

The following will only trigger if there's more than Level1, but where do I go from here?

if ($('#wayfinding a').length > 2) {}

Upvotes: 0

Views: 1722

Answers (3)

thugsb
thugsb

Reputation: 23436

This works, although admittedly it's not the prettiest solution:

if ($('#wayfinding a').length > 3) {
    var fullPath = $('#wayfinding').html(), breadcrumbs = fullPath, w = $('#wayfinding a').length;
    for (i=0;i<=w-1;i++) {
        breadcrumbs = breadcrumbs.replace('</a>','QQQQQ');
        if (i==1) { breadcrumbs = breadcrumbs.replace('</a>&nbsp;/&nbsp;','</a>&nbsp;/&nbsp;<span class="hiddenCrumbs">'); }
        if (i==w-2) { breadcrumbs = breadcrumbs.replace('</a>','</a></span>'); }
        if (i==w-1) { breadcrumbs = breadcrumbs.replace(/QQQQQ/g,'</a>'); }
    }
    $('#wayfinding').html(breadcrumbs);
    $('.hiddenCrumbs').html('[...]').click(function() {
        $('#wayfinding').html(fullPath);
    });
}

Upvotes: 0

gbs
gbs

Reputation: 7276

Try this a bit complex but should work:

 <style type="text/css">
    .breadcrums 
    {
        width:500px;
    }
    .breadcrums li
    {
        list-style-type:none;
        display:inline;
    }
    </style>
    <script type="text/javascript">
        $(function () {
        var length =  $('.breadcrums li').length;
        $('.breadcrums li').each(function(n){
                if(n > 2 && n!=length-1){
                $(this).hide();
                }
            });        
        });
    </script>

<ul class="breadcrums">
<li> <a name="top"></a></li>
<li><a href="/index.html">Home</a>&nbsp;/&nbsp;</li>
<li><a href="../../../../index.html">Level1</a>&nbsp;/&nbsp;</li>
<li><a href="../../../index.html">Level2</a>&nbsp;/&nbsp;</li>
<li><a href="../../index.html">Level3</a>&nbsp;/&nbsp;</li>
<li><a href="../index.html">Level4</a>&nbsp;/&nbsp;</li>
<li>Page</li>
</ul>

Update 1: The main reason to enclose the link tag in li is to hide the / separator. Without enclosing it, I am not sure how you would get hold of that text.

Check if this version fit your needs:

<div class="wayfinding">
<a name="top"></a>
<a href="/index.html">Home</a><span>&nbsp;/&nbsp;</span>
<a href="../../../../index.html">Level1</a><span>&nbsp;/&nbsp;</span>
<a href="../../../index.html">Level2 </a><span>&nbsp;/&nbsp;</span>
<a href="../../index.html">Level3 </a><span>&nbsp;/&nbsp;</span>
<a href="../index.html">Level4 </a><span>&nbsp;/&nbsp;</span>
Page
</div>

var length = $('.wayfinding a').length;
            $('.wayfinding a').each(function (n) {
                if (n > 2 && n != length) {
                    $(this).next().hide();
                    $(this).hide();
                }
                if (n == 2) {
                     $(this).next().after('<span>[...]&nbsp;/&nbsp;</span>');
                }
            });

Upvotes: 1

Manfre
Manfre

Reputation: 1245

Can you add selectors or modify the HTML at all? Wrapping each level of breadcrumb would make this much easier to accomplish.

Altered HTML

<div id="wayfinding">
    <a name="top"></a>
    <div class="level"><a href="/index.html">Home</a></div>
    <div class="level"><a href="../../../../index.html">Level1</a>&nbsp;/&nbsp;</div>
    <div class="level"><a href="../../../index.html">Level2</a>&nbsp;/&nbsp;</div>
    <div class="level"><a href="../../index.html">Level3</a>&nbsp;/&nbsp;</div>
    <div class="level"><a href="../index.html">Level4</a>&nbsp;/&nbsp;</div>
    Page
</div>

JS

$('#wayfinding .level:not(:first)').remove();
$('#wayfinding .level:last').after('[...]');

Upvotes: 0

Related Questions