I am currently am trying to get this below function working. I would like to use a relative path in order to add an active class for my different ul li a tag in my dom. The problem I am facing is that despite splitting the URL, it doesn't appear to be checking and comparing right part of the url and href. here is an of my HTML structure:
<div class="parent-bar"> <ul> <li>
<a class="parent-link" href="/dummy-parent-2/">
<div class="wrap">
<span class="text">Parent page 2
</span>
</div> </a> <div id="child-menu-1" class="child-menu">
<ul>
<li>
<a href="/dummy-parent-2/dummy-child-1/" class="child-links">
<div class="wrap">
<span class="text">child page 1
</span>
</div>
</a>
</li>
</ul> </div> </li> </ul> </div>
and here is the jQuery supposed to be tracking the url:
jQuery(function($) {
var path = window.location.href;
path = path.split("/");
$(".parent-link").each(function() {
if (this.href === path[3]) {
$(this).addClass('active');
}
});
if($('.parent-link').hasClass('active')){
$('.child-links').addClass('active');
}
});
The console is not showing any errors. I can see the active class is not added. The reason I am looking to do this is to allow the children of the parent items to be active as well. I will apply the same principle to the children to track the parent's respective URL. if that makes sense.
Any help or insight would be much appreciated.
Related
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
I am creating a Tizen Web App for wearable device and i want to route to a certain point on a separate page but anchor tags don't seem to be working. They route me to the page, but just to the top of the page.
I've tried these 3 options, the first one routes me to the top of the page no matter how far down the tag is and the other two don't work at all.
I've also tried doing it with the second page in a seperate HTML using href="flags.html#A" and this also routed to the top of the page.
I also tried using 'name' instead of 'id' and a 'div' tag in place of an 'a' tag with the same results.
<div class="ui-page ui-page-active" id="main">
<div class="ui-content">
<ul class="ui-listview">
<li><a href="#flags">A
<i>Alfa</i></a></li>
<li><a href="#flags#B">B
<i>Bravo</i></a></li>
<li><a href="#flagsC">C
<i>Charlie</i></a></li>
</ul>
</div>
</div>
<div class="ui-page" id="flags">
<header class="ui-header">
<h2 class="ui-title">Select Flag</h2>
</header>
<div class="ui-content">
<a id="A">A-Alfa</a><br>
<a><b>International Call Signals</b><br>I have a diver down; keep well clear at slow speed</a><br>
<a id="B">B-Bravo</a><br>
<a><b>International Call Signals</b><br></a><br>
<a id="flagsC">C-Charlie</a><br>
<a><b>International Call Signals</b><br>Affirmative</a><br>
</div>
</div>
Any help would be hugely appreciated
Not the cleanest solution but i ended up using a javascript function to achieve my goal.
function loadPage2(flagSelection) {
window.localStorage.setItem("flagSelected", flagSelection);
location.href="flagsPage.html";
}
triggered by;
<li><a onclick=loadPage2("#A");>A
<i>Alfa</i></a></li>
<li><a onclick=loadPage2("#B");>B
<i>Bravo</i></a></li>
<li><a onclick=loadPage2("#C");>C
<i>Charlie</i></a></li>
and on the second page;
var flagSelection = window.localStorage.getItem("flagSelected");
function jumpToFlag() {
location.href="#";
location.href=flagSelection;
}
const load = () => {
console.log("load event detected!");
}
window.onload = jumpToFlag();
We upgraded from Angular 4 to Angular 8.1 and a lot of our drop downs are broken. From what I can tell they all contain these two style classes: the class js-dropdown and js-dropdown-menu. We can't find where these style classes are coming from or how they work. It's hard to search these terms on google because there's no way to have a must-include for hyphens, that I know of. Here's an example of the html:
<div class="select-wrapper" id="searchOption">
<li class="dropdown nav__item is-parent" tabindex="0" style="outline: 0" (blur)="closeDropdown($event)">
<div class="select-dropdown js-dropdown">
<span class="selection">{{ searchType }}</span>
<i class="nav__icon nav__icon--dropdown"></i>
</div>
<ul class="details-search nav__menu js-dropdown-menu">
<li (click)="optionSelected($event, 1)">
<a class="nav__link">Option 1</a>
</li>
<li (click)="optionSelected($event, 2)">
<a class="nav__link">Option 2</a>
</li>
<li (click)="optionSelected($event, 3)">
<a class="nav__link">Option 3</a>
</li>
</ul>
</li>
</div>
Does anyone have any insight to the class js-dropdown and js-dropdown-menu and how to fix them after this upgrade?
Update: so i think i found out where the js-dropdown style class comes from.... it doesn't come from any style... it's just used as a label and component.js looks for that label to show or hide it. The now is that component.js function isn't getting called. Anyone know how to fix this?
$('#app-container').on('click', '.js-dropdown, .js-dropdown-menu > *', function(event){
event.preventDefault();
var that = this;
var parent = $(this).closest('.is-parent');
//is our dropdown open?
if(!parent.hasClass('is-open')){
//... then open it.
parent.addClass('is-open');
//handle clicking away
$(document).one('click', function closeMenu(docEvent){
//if the parent does not contain the clicked element...
if($(parent).has(docEvent.target).length === 0) {
//close it.
parent.removeClass('is-open');
} else {
// else, set up another listener to check the next user click.
$(document).one('click', closeMenu);
}
});
} else {
// ...else we close it.
parent.removeClass('is-open');
}
event.stopPropagation();});
Figured it out. We were not loading a components.js file (as well as other scripts) in the angular.json file. Our previous version of angular did not contain an angular.json file.
I am not able to click on the link nestled inside a list tag.
Here is the HTML code:
<div class="sideBarContent" ng-include="'routes/sidebar/sidebar.tpl.html'">
<div id="innerSidebarContent" ng-controller="SidebarController">
<div>
<ul class="menuItems bounceInDown">
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/">
<li id="menuConfigurator" ui-sref="configurator" ng-click="closeMobileMenu()" href="/configurator/">
<span class="menuIcon regularImage blueHighlight activated icon-selectAndTailor"></span>
<span class="menuIcon icon-selectAndTailor_active activeImage">
<p class="mainMenuLabel multiLine">Select & Tailor Methods</p>
</li>
I tried all these ways to locate the text and click on it:
describe('Test objects in /configurator/ route', function() {
it('Click on select and tailor banner icon', function(){
//element(by.css('ul.menuItems > li[href=/configurator/]')).click();
//element(by.className('menuIcon icon-selectAndTailor_active activeImage')).click();
//element(by.css("li[#id='menuConfigurator' and #href='/configurator/']")).click();
//element(by.id('menuConfigurator')).click();
//element(by.xpath("//div[#class='sideBarContent']/p")).click();
//element(by.css("#menuConfigurator > p")).click();
//element(by.partialLinkText('Select & Tailor Methods')).click();
element(by.linkText("Select & Tailor Methods")).click();
console.log('in the configspec ...');
})});
Can someone help me resolve this?
Just had the same issue.
It turned out that wrapping the list in a < div > block was the problem.
Once the list was moved to be outside any < div > block the < a > tags worked.
li can not have href attribute
Use
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()"></li>
Or
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
Instead of
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
According to html this is not link.
Select it using other selectors:
element(by.className("multiLine")).click();
element(by.css(".mainMenuLabel.multiLine")).click();
element(by.css("[class='mainMenuLabel multiLine']")).click();
element(by.xpath(".//p[#class='mainMenuLabel multiLine']")).click();
It's 3:40AM and I'm going to give up trying for tonight.
The tabs will not update the page outside of the navigation area.
The PanelController looks like this:-
app.controller('PanelController', function($scope) {
$scope.tab = 1;
$scope.selectTab = function(setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function(checkTab) {
return $scope.tab === checkTab;
};
});
and the nav pane looks like this:-
<div class="navbar-collapse collapse" ng-controller="PanelController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active:isSelected(1) }">
<a href ng-click="selectTab(1)">Blog</a>
</li>
<li ng-class="{ active:isSelected(2) }">
<a href ng-click="selectTab(2)">About{{tab}}</a>
</li>
<li ng-class="{ active:isSelected(3) }">
<a href ng-click="selectTab(3)">Contact</a>
</li>
</ul>
</div>
and the placeholder HTML for my two tabs is as follows:-
<div ng-controller="PanelController">
<div ng-show="isSelected(1)">
<p>Hello</p>
</div>
<div ng-show="isSelected(2)">
<p>Please work</p>
</div>
</div>
As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.
I can't see what I'm doing wrong.
I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.
The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope
You would need to use a service or events to have them communicate together