Breadcrumbs

loktoy · Jul 21, 2023

paano kaya to kasi yun breadcrumbs ko is ok nag fufunction sya ng ganito

home>products>privacy>about so ok sya gumagana

ngayon nman kapag pinipindot ko ito tatlo na to
<a class="nav-link" href="/products.html">Products</a>
<a class="nav-link" href="/about.html">About</a>
<a class="nav-link" href="/privacy.html">Privacy</a>
walang lumalabas..

ito po code ko..
<!doctype html>
<html lang="en">
<head>
<title>Home</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="nav nav-tabs nav-stacked">
<a class="nav-link active" href="/">Home</a>
<a class="nav-link" href="/products.html">Products</a>
<a class="nav-link" href="/about.html">About</a>
<a class="nav-link" href="/privacy.html">Privacy</a>
</nav>

<nav class="breadcrumb" data-breadcrumb-label="Home">
</nav>
<h2>Welcome tlaga</h2>


<script>
</script>
<script src="./main.js"></script>


<script src="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>

javascript code

// Previous page button
if (document.querySelector(".btn-go-back")) {
document.querySelector(".btn-go-back").addEventListener('click', () => {
window.history.back();
})
}
// START HERE
// Selecting the breadcrumb container
// This is using a bootstrap class, you can use your custom styles
var crumbContainer = document.querySelector(".breadcrumb");
const indexPageName = 'Home'; // Change this to whatever you want your homapge to be called
const maxCrumbLen = 3; // Change this to your need, shows 3 previous path by default
// Initiates the breadcrumb rendering
initBreadCrumb();
// Change the markup if you want in the createCrumbMarkup function
function initBreadCrumb() {
// Just ignoring home page for the example, You can use add to the homepage if you want
// Remove container from homepage if you don't want breadcrumbs in homepage
if (crumbContainer) {
// Currently using a data from page
let pageName = crumbContainer.dataset.breadcrumbLabel;
// You are Free to use link
// let pageName = location.href;
// Add a return keyword in the next statement to stop rendring crumb in home page
// Remove container from Home page also
if (!pageName || pageName === indexPageName) {
initHomeCrumb();
//return;
}
let crumbList = localStorage.getItem('crumbList');
if (!crumbList) {
initHomeCrumb();
crumbList = localStorage.getItem('crumbList');
}
crumbList = JSON.parse(crumbList)
// Removes the first entry when limit is reached
if (crumbList.length === maxCrumbLen) {
if (crumbList[crumbList.length - 1].label !== pageName) {
crumbList.shift();
}
}
// New Page
if (crumbList[crumbList.length - 1].label !== pageName) {
crumbList.push(createCrumb(pageName));
}
// Rendering
crumbList.forEach((crumb, index) => {
let newCrumb = createCrumbMarkup(crumb, index, crumbList.length);
crumbContainer.append(newCrumb);
});
localStorage.setItem('crumbList', JSON.stringify(crumbList));
} else {
console.error('Crumb container not found');
initHomeCrumb();
}
}
// The markup for the crumb
function createCrumbMarkup(crumb, index = 0, length = 1) {
// You can define your own markup
// Using Bootrap 4 class - Check JQUERY for bootstrap 3
let markup = document.createElement('a');
markup.classList.add('breadcrumb-item');
markup.href = crumb.url;
markup.innerText = crumb.label;
// Sets the current crumb active
if (index === (length - 1)) {
markup.classList.add('active');
markup.removeAttribute('href');
}
return markup;
}
// Crumb Object
function createCrumb(crumbName = "") {
return {
label: crumbName,
url: location.href
}
}
// Start the breadcrumb
function initHomeCrumb() {
// Array to initialize
let list = [createCrumb(indexPageName)];
// Convert to string in order to save the localstorage
list = JSON.stringify(list);
localStorage.setItem('crumbList', list);
localStorage.setItem("prevCrumb", list);
}

🤖 · Jul 21, 2023

Based on the code you provided, there are a few issues that prevent the breadcrumbs from functioning correctly:

1. The data-breadcrumb-label attribute is missing in your HTML code. This attribute is used to specify the label for each page in the breadcrumb. You need to add this attribute to the nav element with the class breadcrumb like this:

HTML:

<nav class="breadcrumb" data-breadcrumb-label="Home">
</nav>

2. The createCrumbMarkup function is not properly handling the case when the current page is the last crumb in the breadcrumb. To fix this, you can add an if condition to check if the current index is the last index and add the active class accordingly.

Here's the updated createCrumbMarkup function:

JavaScript:

function createCrumbMarkup(crumb, index = 0, length = 1) {
    let markup = document.createElement('a');
    markup.classList.add('breadcrumb-item');
    markup.href = crumb.url;
    markup.innerText = crumb.label;
    
    if (index === (length - 1)) {
        markup.classList.add('active');
        markup.removeAttribute('href');
    }
    
    return markup;
}

With these changes, your breadcrumbs should now function correctly.

PHC-Coder · Jul 21, 2023

Nice, napaka detailed ng coding mo TS, keep up the good work, buti andyan si AI magaling mag turo

loktoy · Jul 21, 2023

🤖 said:
Based on the code you provided, there are a few issues that prevent the breadcrumbs from functioning correctly:

1. The data-breadcrumb-label attribute is missing in your HTML code. This attribute is used to specify the label for each page in the breadcrumb. You need to add this attribute to the nav element with the class breadcrumb like this:

HTML:

<nav class="breadcrumb" data-breadcrumb-label="Home"> </nav>

2. The createCrumbMarkup function is not properly handling the case when the current page is the last crumb in the breadcrumb. To fix this, you can add an if condition to check if the current index is the last index and add the active class accordingly.

Here's the updated createCrumbMarkup function:

JavaScript:

function createCrumbMarkup(crumb, index = 0, length = 1) { let markup = document.createElement('a'); markup.classList.add('breadcrumb-item'); markup.href = crumb.url; markup.innerText = crumb.label; if (index === (length - 1)) { markup.classList.add('active'); markup.removeAttribute('href'); } return markup; }

With these changes, your breadcrumbs should now function correctly.

di pa rin po mafix po dapt po kapag pinipindot ko yun privacy may lalabas po dun na page o yun link page po

PHC-Coder said:
Nice, napaka detailed ng coding mo TS, keep up the good work, buti andyan si AI magaling mag turo

baka matulongan mo po ako sir di pa rin po kasi nafix e

🤖 · Jul 21, 2023

loktoy said:
di pa rin po mafix po dapt po kapag pinipindot ko yun privacy may lalabas po dun na page o yun link page po

Apologies for the confusion. To fix the issue, you need to modify the code in the createCrumb function to include the correct URL for each page in the breadcrumb. Currently, the URL is set to location.href, which will always be the current page URL.

Here's the updated createCrumb function:

JavaScript:

function createCrumb(crumbName = "") {
    let url = "";
    switch (crumbName) {
        case "Products":
            url = "/products.html";
            break;
        case "About":
            url = "/about.html";
            break;
        case "Privacy":
            url = "/privacy.html";
            break;
        default:
            url = "/";
            break;
    }
    return {
        label: crumbName,
        url: url
    }
}

This code sets the correct URL for each page in the breadcrumb based on the label. Now, when you click on the "Privacy" link, it should take you to the corresponding privacy page.

I hope this resolves the issue. Let me know if you have any further questions!

PHC-Coder · Jul 21, 2023

TS try mo ibaba yung main js mo sa ibaba nung 3 js


<script>
</script>


<script src="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="./main.js"></script>

loktoy · Jul 21, 2023

PHC-Coder said:
TS try mo ibaba yung main js mo sa ibaba nung 3 js


<script>
</script>


<script src="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="You do not have permission to view the full content of this post. Log in or register now."
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="./main.js"></script>

ayaw sir kapag pinipindot ko yun navigation ko na privacy o product di sya nalabas lagi sinasabi

File not found

PHC-Coder · Jul 21, 2023

loktoy said:
ayaw sir kapag pinipindot ko yun navigation ko na privacy o product di sya nalabas lagi sinasabi

File not found

TS san nakalagay yung main.js mo?

PHC-Coder said:
TS san nakalagay yung main.js mo?

kung same sya ng directory nung ginagawa mong html/php file, then magiging code nya is
<script src="main.js"></script>

loktoy · Jul 21, 2023

loktoy said:
ayaw sir kapag pinipindot ko yun navigation ko na privacy o product di sya nalabas lagi sinasabi

File not found

dito boss ginawa ko
binaba ko

PHC-Coder · Jul 21, 2023

screenshot mo TS yung error para makita ko din

loktoy · Jul 21, 2023

PHC-Coder said:
screenshot mo TS yung error para makita ko din

sir lagay ko po sa pen

PHC-Coder · Jul 21, 2023

loktoy said:
sir lagay ko po sa pen

may file kana ba na?

products.html
about.html
privacy.html

baka wala ka pang file nitong 3 kaya nag ffile not found

loktoy · Jul 21, 2023

PHC-Coder said:
may file kana ba na?

products.html
about.html
privacy.html

baka wala ka pang file nitong 3 kaya nag ffile not found

ayan sir makikita mo sa error na pixt... sa part 1 at part 2 ay binuksan ko mismo yun privacy.html at yun home.html yan gumana po pero nun pinindot ko yuun about.html o privacy.html o home.html sa navigation nya nag error

PHC-Coder · Jul 21, 2023

loktoy said:
ayan sir makikita mo sa error na pixt... sa part 1 at part 2 ay binuksan ko mismo yun privacy.html at yun home.html yan gumana po pero nun pinindot ko yuun about.html o privacy.html o home.html sa navigation nya nag error

View attachment 2706357 View attachment 2706358 View attachment 2706359

Code:

<script>
    $(document).ready(function() {
      // Get the current URL
      const currentURL = window.location.href;
      const url = currentURL.substring(currentURL.lastIndexOf("/") + 1);
      // Check each breadcrumb item
      $('.nav a').each(function() {
        const breadcrumbURL = $(this).attr('href');
        
        // Check if the current URL matches the breadcrumb item's URL
        if (url === breadcrumbURL) {
          $(this).addClass('active');
        }
      });
      alert(url);
    });
    </script>

Change mo din pala TS yung links mo sa breadcrubs mo

ganito

Code:

<nav class="nav nav-tabs nav-stacked">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" href="products.html">Products</a>
<a class="nav-link" href="about.html">About</a>
<a class="nav-link" href="privacy.html">Privacy</a>
</nav>

tagkalin mo lang yung "/"

Pa feedback kung working na

loktoy · Jul 21, 2023

PHC-Coder said:

Code:

<script>
    $(document).ready(function() {
      // Get the current URL
      const currentURL = window.location.href;
      const url = currentURL.substring(currentURL.lastIndexOf("/") + 1);
      // Check each breadcrumb item
      $('.nav a').each(function() {
        const breadcrumbURL = $(this).attr('href');
       
        // Check if the current URL matches the breadcrumb item's URL
        if (url === breadcrumbURL) {
          $(this).addClass('active');
        }
      });
      alert(url);
    });
    </script>

Change mo din pala TS yung links mo sa breadcrubs mo

ganito

Code:

<nav class="nav nav-tabs nav-stacked">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" href="products.html">Products</a>
<a class="nav-link" href="about.html">About</a>
<a class="nav-link" href="privacy.html">Privacy</a>
</nav>

tagkalin mo lang yung "/"

Pa feedback kung working na

sorry sir nadelay po feedback gumana nman sya sir kaso problima is.. ganito sir hal. nasa home ako pipindutin ko yun about.html so gumana sya ngaun icliclick ko yun privacy nag eeror na ulit sya kagay kanina erron pero kapag clinick ko yun home ulit ok na at dumiritso ako sa privacy.html ok na ulit working pero kapag galing ako privacy to about.html nag eerror

Breadcrumbs

Eternal Poster

PHC Robot

Forum Expert

Eternal Poster

PHC Robot

Forum Expert

Eternal Poster

File not found​

Forum Expert

File not found​

Eternal Poster

File not found​

Forum Expert

Eternal Poster

Forum Expert

Eternal Poster

Attachments

Forum Expert

Eternal Poster

Similar threads

Popular Tags

About this Thread

Online statistics

File not found

File not found

File not found