What's new

Repost ulit breadcrumb

L

loktoy

Eternal Poster
Joined
Oct 20, 2014
Posts
1,166
Solutions
2
Reaction
103
Points
496
Age
30
pahelp po kasi po di sya natutuloy sa mga link or page di po nadidisplay yun output ko... breadcrumb ko ok naman nag fufunction goods naman problima ko is yun link o page ko di nag oouput,, pero kapag tinatanggal ko yun breadcrumb ko javascript nagdidisplay yun link o page pero kapag binabalik ko yun javascript ng breadcrum di na nman sya ang didisplay yun link o page...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X_UA-Compatible" content ="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- <link href="../css/style.css" rel="stylesheet"> -->
<script src="../js/bootstrap.bundle.js"></script>
</head>
<body class="m-0 border-0 bd-example m-0 border-0 ">
<!-- Example Code -->
<nav class="navbar navbar-expand-sm p-0 fixed-top " style="background:gray;">
<div class="container" id="">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler" style="height:25px; width:35px;"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
<span class="navbar-toggler-icon" style="height:10px; width:15px;" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" name="navlist" id="">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="../user/dashboard.php">Home</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
Tracking
</a>
<ul class="dropdown-menu" >
<li><a class="dropdown-item" href="#">DTS</a></li>
<li><a class="dropdown-item" href="../user/voucher.php">LDDAP_ADA</a></li>
<!-- <li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="../user/voucher.php">LDDAP-ADA</a>
</li> -->
</ul>
</li>
<li class="nav-item">
<a class="nav-link" id="test" href="../user/voucher.php">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../user/voucher.php">About</a>
</li>
</ul>
<form class="d-flex" role="search">
<input
class="form-control me-2" style="height:30px;"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success pt-1 me-3" style="height:30px;" type="submit">
<h6>Search</h6>
</button>
</form>
<div class="dropdown" id="idnav">
<a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="../img/eslava.jpg" alt="" width="50" height="45" class=" p-1 me-2 rounded-5">
<strong><?php echo $username; ?></strong>
</a>
<ul class="dropdown-menu text-small shadow" id="idnav">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Edit Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="../login.php">Sign out</a></li>
</ul>
</div>
</div>
</div>
</nav >
<!-- End Nav -->
<!-- Start breadcrumb -->
<div class="pt-5 mt-3" id="brredcrumb">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ul class="breadcrumb" id="brdcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</a></li>
</ul>
</nav>
</div>
<script>
// Get the breadcrumb element
var breadcrumb = document.getElementById("brdcrumb");

// Get all the links inside the navbar
var links = document.querySelectorAll(".navbar-nav a");

// Iterate over each link
for (var i = 0; i < links.length; i++) {
// Add a click event listener to each link
links.addEventListener("click", function(e) {
e.preventDefault();

// Get the text of the clicked link
var currentPage = this.textContent;

// Create a new list item for the breadcrumb
var li = document.createElement("li");
li.setAttribute("class", "breadcrumb-item active");
li.setAttribute("aria-current", "page");
li.innerText = currentPage;

// Append the new list item to the breadcrumb
document.getElementsByTagName("li").innerText =currentPage;
breadcrumb.appendChild(li);

// Get the previous list item in the breadcrumb
var previousElmt = li.previousElementSibling;

// Update the previous list item to be a link
previousElmt.innerHTML = "<a href='#'>" + previousElmt.innerText + "</a>";
previousElmt.classList.remove("active");
previousElmt.removeAttribute("aria-current");

// Clear the breadcrumb after the clicked link
var nxtsblinings = [];
function sibling() {
var nxtsiblingElmt = this.nextElementSibling;
nxtsblinings.push(nxtsiblingElmt);
while (true) {
if (nxtsiblingElmt.nextElementSibling == null) {
break;
} else {
nxtsiblingElmt = nxtsiblingElmt.nextElementSibling;
nxtsblinings.push(nxtsiblingElmt);
}
}
for (var i = 0; i < nxtsblinings.length; i++) {
nxtsblinings.removeAttribute("aria-current");
nxtsblinings.classList.remove("active");
nxtsblinings.remove();
}
this.innerHTML = this.innerText;
this.classList.add("active");
this.setAttribute("arial-current", "page");
this.removeEventListener("click", sibling);
}

// Add a click event listener to the previous list item
previousElmt.addEventListener("click", sibling);
});
}
</script>
 
Based on your code, it seems that you are trying to implement a breadcrumb functionality using JavaScript. However, you mentioned that when you include the JavaScript code for the breadcrumb, the links or pages are not displaying. To troubleshoot the issue, here are a few suggestions:

1. Check the Console for Errors: Open the developer tools in your browser and check if there are any JavaScript errors displayed in the console. Errors in your JavaScript code could prevent the links or pages from displaying properly.

2. Verify the File Paths: Make sure that the file paths for your CSS and JavaScript files are correct. If the paths are incorrect, the browser may not be able to load the files, which could affect the display of the links or pages.

3. Check for Any Conflicting JavaScript Code: Review your JavaScript code to see if there are any conflicts with other JavaScript code on the page. Conflicts can occur if multiple scripts try to modify the same elements or variables. Try removing any other JavaScript code on the page (except for the breadcrumb code) to see if that resolves the issue.

4. Debug the JavaScript Code: Insert console.log statements in your JavaScript code to check if the code is executing as expected. For example, you can add console.log("Clicked link: " + currentPage); to verify if the click event is triggered and if the current page value is being captured correctly.

5. Simplify the JavaScript Code: If the issue persists, consider simplifying your JavaScript code to isolate the problem. Start with a basic version of the breadcrumb code and gradually add additional functionality to identify the specific part causing the issue.

By following these steps, you should be able to identify and resolve the issue with your breadcrumb functionality.
 

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 1
    Replies
  • 400
    Views
  • 2
    Participants
Last reply from:
🤖

New Topics

Popular On This Forum

Online statistics

Members online
1,067
Guests online
5,458
Total visitors
6,525
Back
Top