I'm trying to create a breadcrumb for my web application.
I have the following navigation menu within my .JSP file:
<nav class="nav">
<ul class="wrap">
<li class="menu-nav--home"><span class="icon-home"></span></li>
<ul>
<li>Business</li>
<li>Search</li>
<li>Search Deatils</li>
<li>Change Records</li>
<li>Remove</li>
<li>Order Deatils</li>
<li>Checkout</li>
</ul>
</li>
</ul>
</nav>
..And i have attempted to create a breadcrumb using HTML5 Microdata as per below:
<div class="breadcrumb">
<div class="wrap">
<ol class="menu menu--hor">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/home" itemprop="url">
<span itemprop="title">Home</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/business" itemprop="url">
<span itemprop="title">Business</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/search" itemprop="url">
<span itemprop="title">Search</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/details" itemprop="url">
<span itemprop="title">Details</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/update" itemprop="url">
<span itemprop="title">Update</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/delete" itemprop="url">
<span itemprop="title">Delete</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/order" itemprop="url">
<span itemprop="title">New Order</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/checkout" itemprop="url">
<span itemprop="title">Checkout</span>
</a>
</li>
</ol>
</div>
</div>
My issue is, all items on the breadcrumb are being displayed, when, i only want the current location to be displayed.
Current display:
Home Business Search Details Update Delete New Order Checkout
Preferred Display (when on Checkout page, for example)
Home > Checkout
Any help is appreciated.
Thanks
UPDATE - 24/07/13
So, after a bit of Googling, it was clear some JS was missing, here is a first attempt.
// Bread crumb script /////////////
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+=""+s[i]+" / ";
}
i=s.length-1;
path+=""+s[i]+"";
var url = window.location.protocol + "//" + path;
document.writeln(url);
Which does appear to retrieve the current page/site.. however, does not place it below my Nav menu but rather in a new page that seems to crash my site.
Do it need some form of .append on a new DIV ?
Related
I have a sidebar in my cPanel, And this sidebar has a menu toggle.
for example ==>
When clicking on the 'Account setting' there are some links or options under it.
And this is my code
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-dock-top"></i>
<div data-i18n="Account Settings">Account Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-account-settings-account.html" class="menu-link">
<div data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
Note : I'm working in Angular 14
This question already has answers here:
JavaScript: How to get parent element by selector?
(11 answers)
Closed 1 year ago.
I tried to make a code to remove a li from ul but I would like to be more specific.
I would like to find exact anchor link before removing it along with the li it contains.
In the example below, I want to remove only Another link.
My code so far looks like:
<ul class="working-list">
<li class="work color1">
<a href="?c=Some link 1">
<span class="title">
link 1</span>
</a>
</li>
<li class="work color1">
<a href="?c=someLink2"><span class="title">
Some link 2</span>
</a>
</li>
<li class="work color1">
<a href="?c=anotherLink"><span class="title">
Another link</span>
</a>
</li>
<li class="work color1">
<a href="?c=SmallLink"><span class="title">
Small link</span>
</a>
</li>
</ul>
And the script so far:
let pickEl = document.querySelectorAll('.working-list li');
// let pickA = document.querySelector('a[href=\'?c=anotherLink\']');
console.log(pickEl);
pickEl[3].remove();
What would be the best approach?
You can try using Attribute selectors selector:
let pickEl = document.querySelector('.working-list li a[href="?c=anotherLink"]');
console.log(pickEl);
//remove the parent li
pickEl.closest('li').remove();
<ul class="working-list">
<li class="work color1">
<a href="?c=Some link 1">
<span class="title">link 1</span>
</a>
</li>
<li class="work color1">
<a href="?c=someLink2">
<span class="title">Some link 2</span>
</a>
</li>
<li class="work color1">
<a href="?c=anotherLink">
<span class="title">Another link</span>
</a>
</li>
<li class="work color1">
<a href="?c=SmallLink">
<span class="title">Small link</span>
</a>
</li>
</ul>
You can forEach the pickEl then see textContent like:
let pickEl = document.querySelectorAll('.working-list li');
const deleteText = 'Another link';
pickEl.forEach(el =>{
const a = el.querySelector('a');
if(a.textContent.trim() === deleteText){
el.remove();
}
});
<ul class="working-list">
<li class="work color1">
<a href="?c=Some link 1">
<span class="title">
link 1</span>
</a>
</li>
<li class="work color1">
<a href="?c=someLink2"><span class="title">
Some link 2</span>
</a>
</li>
<li class="work color1">
<a href="?c=anotherLink"><span class="title">
Another link</span>
</a>
</li>
<li class="work color1">
<a href="?c=SmallLink"><span class="title">
Small link</span>
</a>
</li>
</ul>
I have the following HTML:
<div class="pagination pagination-centered">
<ul>
<li class="active">
<a class="page" data-page="1" href="javascript:void(0)">
1 </a>
</li>
<li >
<a class="page" data-page="2" href="javascript:void(0)">
2 </a>
</li>
<li >
<a class="page" data-page="3" href="javascript:void(0)">
3 </a>
</li>
<li >
<a class="page" data-page="4" href="javascript:void(0)">
4 </a>
</li>
<li >
<a class="page" data-page="5" href="javascript:void(0)">
5 </a>
</li>
<li >
<a class="page" data-page="6" href="javascript:void(0)">
6 </a>
</li>
<li >
<a class="page" data-page="7" href="javascript:void(0)">
7 </a>
</li>
<li >
<a class="page" data-page="8" href="javascript:void(0)">
8 </a>
</li>
<li class="threeDots">
<a class="page" data-page="..." href="javascript:void(0)">
... </a>
</li>
<li >
<a class="page" data-page="20" href="javascript:void(0)">
20 </a>
</li>
</ul>
</div>
When I click in this buttons I go to something like this www.example.com/something?page=X (x = number of the button)
I use this:
Document doc = Jsoup.connect("www.example.com/something?page=5").get();
But I get always the first page HTML.
How I can "click" or extract information about this pages? I don't know so much about PHP but I think this page use it to change pages.
Edit:
I'm not using javascript. I'm using a java project that extract information from page using html.
It seems you need to dynamically set the page URL argument. If you use jQuery you should be able to have a click event like this:
Document doc = Jsoup.connect("www.example.com/something?page=" + $(this).data('page')).get();
Only a single digit gets changed for every link, you can use for loop with a variable denoting your page number as follows:
for (int i = 1; i <= 8; i++) {
Document doc = Jsoup.connect("www.example.com/something?page=" + i).get();
/* Your code for each page*/
}
My sidebar menu has the ability to expand and reveal the subsections of a section as shown below. The open section has the open active class and the clicked link has the active class.
All of my links has a different #url.So this will determine the classes.
How can I automatically place the open active and active classes based on the opened link? I can also use PHP.
<ul class="menu-items scroll-content">
<li class="open active">
<a href="javascript:;"><span class="title">first section</span>
<span class="open arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="active">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<span class="arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
Try like this:
HTML:
<ul>
<li class="">
<a href="javascript:;"><span class="title">first section</span>
<ul class="sub-menu">
<li class="">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
JS:
var href = location.pathname+location.hash;
$('.sub-menu > li > a').each(function() {
if ($(this).attr("href") == href) {
$(this).parent('li').addClass('active');
$(this).parent().parent().parent('li').addClass('open active');
}
});
I have an overlay Menu that has 3 dropdowns.
When you click on one of the parent items if it has a dropdown , a class is added to the child to "activate" the dropdown and it expands and shows. Currently it works fine , and on click the class is added and removed if clicked again.
The problem is currently you can have all dropdowns active and open at the same time. What I need to happen is to have only one dropdown be able to be active at a time.
if one dropdown is active , and the user clicks on another , the original active dropdown closes and the newly clicked one becomes active.
Also if the dropdown is active and user clicks on the same parent item again the dropdown closes.
Current HTML
I have excluded all other list items except for the ones that have dropdowns.
<ul class="header__overlay-nav">
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
After Action Review
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Overview
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Review Form
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Performance Card
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Downloads
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
100 Day Challenge App
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Desktop Wallpapers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Screen Savers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Forms
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Inspiration
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Get Your Mojo Working
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links href="#">
Game Changers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Bold Actions - Big Rewards
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Motivational Videos
</a>
</li>
</ul>
</li>
</ul>
Current Jquery
Here is the original Jquery I was using to do a basic toggle of active class, Basically just using the toggleClass on the child UL of the clicked trigger.
Commented out , I previously tried removing all active classes and then instead of toggling the class on click element I was adding, but removing all classes , only to add it to the clicked one made it not possible to close a dropdown by clicking the same trigger again.
var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');
var $overlayClasses = {
// Active css Class for dropdowns in Main Overlay
OverlayDdActive: 'dropdown--overlay-is-active',
ButtonIconIsRotated: 'btn__icon-is-rotated',
};
$overlayDdTrigger.on('click', function() {
if (_isMobile) {
// Attempt to to remove all active classes on UL's prevents dropdown from
// being able to close if the same trigger is clicked twice
// $('ul.dropdown--overlay-is-active').removeClass($overlayClasses.OverlayDdActive);
$(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);
}
});
Thank you for the help in advance, I know there are a lot of questions that relate to this problem on here, I did a lot of searching but could not find any that would help me with this specific case.
i hope this will work plz comment if it cause any problem.
<html>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');
var $overlayClasses = {
OverlayDdActive: 'dropdown--overlay-is-active',
ButtonIconIsRotated: 'btn__icon-is-rotated',
};
$overlayDdTrigger.on('click', function() {
if($(this).find('ul').hasClass('dropdown--overlay-is-active')){
$overlayDdTrigger.find('ul').removeClass($overlayClasses.OverlayDdActive);
$overlayDdTrigger.find('.btn__icon-right').removeClass($overlayClasses.ButtonIconIsRotated);
}else{
$overlayDdTrigger.find('ul').removeClass($overlayClasses.OverlayDdActive);
$overlayDdTrigger.find('.btn__icon-right').removeClass($overlayClasses.ButtonIconIsRotated);
$(this).find('ul').addClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').addClass($overlayClasses.ButtonIconIsRotated);
}
});
</script>
<style>
.dropdown--overlay{
display:none;
}
.dropdown--overlay-is-active{
display: block !important;
}
</style>
<ul class="header__overlay-nav">
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
After Action Review
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Overview
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Review Form
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Performance Card
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Downloads
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
100 Day Challenge App
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Desktop Wallpapers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Screen Savers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Forms
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Inspiration
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Get Your Mojo Working
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links href="#">
Game Changers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Bold Actions - Big Rewards
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Motivational Videos
</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
Figured Out a solution that works as wanted.
$overlayDdTrigger.on('click', function() {
if (_isMobile) {
// Toggle Class On clicked Element
$(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);
// Remove all Active Dropdowns From all Siblings
$(this).siblings().children('ul').removeClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);
}
});