I have the following code:
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
I tried this in different browsers and the inner-anchor drops out of the outer-anchor in every browser. So it gets rendered as this:
<a id="outer-anchor" href="/test">
text in anchor
</a>
<a id="inner-anchor" href="/test2" style="display:none"></a>
Does someone know why and how to fix this?
Thanks in advance
You can't house anchor tags inside anchor tags.
This would move the childNode out of the outer-anchor to be it's sibling after it, and then hide it nicely;
JSfiddle
HTML
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
</div>
JavaScript
var outer = document.getElementById('outer-anchor');
var inner = outer.nextSibling;
inner.style.display = 'none';
inner.parentNode.removeChild(inner);
outer.parentNode.appendChild(inner);
Output
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">text in anchor</a>
<a id="inner-anchor" href="/test2" style="display: none;"></a>
</div>
parent-placeholder div purely exists to show how to relate to the parent DOM-element where the anchors are in.
Related
My simple jQuery function works fine if I click an anchored link on page-1 (body turns black fine) BUT if I have the same anchored link on another page-2 to link back and anchor to my page-1 the function doesn't work? It goes back to page-1 fine but body on page-1 doesn't turn black as expected?
HTML on page-1:
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
HTML on page-2:
<div id="offcanvas">
<a href="page-1.htm#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
jQuery:
$("#offcanvas a").click(function(){
$('.offcanvas').offcanvas('hide');
$("body").css('background-color', '#000000')
});
Many thanks in advance for your help.
B]
So I manage to find the solution, this works:
$("#offcanvas a").on("click", function() {
if (window.location.hash) {
$("body").css('background-color', 'black');
}
:)
please use below html structure
you have not define id on html structure
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
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.
I have the following:
<a class="clickable_element" href="https://www.mywebsite.com"> ==$0
<div class="content">My Website</div>
</a>
I want to wrap all this in a "h1" tag.
How would I go about doing this using javascript?
You would first have to create the h1 tag, append it to the DOM. Then append the tag to the tag.
Like this
const aTag = document.querySelector('a')
const h1Tag = document.createElement('h1')
document.body.appendChild(h1Tag)
h1Tag.appendChild('aTag')
I am not sure why you want to wrap this with h1 if you can just create a class for the div, but here's the code you can try:
HTML
<h1 id="wrap">
</h1>
JS
document.getElementById("wrap").innerHTML = "<a href='test.html'><div>My Website</div></a>"
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();
I am trying to test a click event for my html
html
<div class="testGroup">
<div ng-repeat="test in tests">
<a ng-click="clickMe(test.id)">{{test.name}}</a>
<a ng-click="clickMe(test.id)">{{test.name}}</a>
<a ng-click="clickMe(test.id)">{{test.name}}</a>
<a ng-click="clickMe(test.id)">{{test.name}}</a>
</div>
</div>
<div class="testGroup">
<div ng-repeat="test in tests">
<a ng-click="clickMe(test.id)">{{test.name}}</a>
<a ng-click="clickMe(test.id)">{{test.name}}</a>
<a ng-click="clickMe(test.id)">{{test.name}}</a>
</div>
</div>
<div class="testGroup">
<div ng-repeat="test in tests">
<a ng-click="clickMe(test.id)">{{test.name}}</a>
<a ng-click="clickMe(test.id)">{{test.name}}</a>
<a ng-click="clickMe(test.id)">{{test.name}}</a>
</div>
</div>
Three divs are identical but I want to select the first testGroup class and click the first a tag. I also want to click the first a tag on the second testGroup class.
In my spec.js
element.all(by.css('.testGroup')).get(0).then(function(elem) {
element(by.repeater('test in tests').row(0)).click();
});
I am getting undefined is not a function error. I think it's because the get(0) is not a promise. How do I trigger click on the first a tag in the first testGroup div and first a tag in second testGroup div? Thanks for the help.
Would something like this work alright?
var testGroupOneTag = $$('.testGroup').get(0).$('[ng-click="clickMe(test.id)"]');
var testGroupTwoTag = $$('.testGroup').get(1).$('[ng-click="clickMe(test.id)"]');
testGroupOneTag.click():
testGroupTwoTag.click():
$$ is short for element.all by css.
There is no then() on an ElementFinder anymore (since 2.0).
Chain element and element.all(), use by.repeater() and column():
var testGroups = element.all('.testGroup');
var testGroupOneTag = testGroups.first().element(by.repeater("test in tests").column("test.name"));
var testGroupTwoTag = testGroups.get(1).element(by.repeater("test in tests").column("test.name"));
testGroupOneTag.click();
testGroupTwoTag.click();