Im trying to click on the first element that look like this:
<div>
<div class="report-name" data-qa="x1x">
<div tabindex="0" class="af-core keyboard-navigation-element gray-link"><a class="af-core link-with-arrow right " target="_blank">boxes</a></div>
</div>
<div class="report-name" data-qa="x2x">
<div tabindex="0" class="af-core keyboard-navigation-element gray-link"><a class="af-core link-with-arrow right " target="_blank">bags</a> </div>
</div>
</div>
i tried this 2 lines of code:
await page.click('div[data-qa="x1x"]');
await page.$x("//a[contains(text(), 'boxes')]");
but I cannot click on it.
Related
I have a navigation that is horizontal. Under every choice I have a div that opens up on click. But the problem is that it binds it's position to the parent navigation button. I want every div that opens on the exact same spot. I want every child div that opens to open from the first element in the navigation bar.
So in this case i want the white open div to bind to "Nyheter" instead. I really can't solve it, I tried set a div element before the navigation that all div that opens binds to in css but it not seems to work.
<div class="Container">
<nav class="NavHorizontal Grid Grid--alignMiddle">
#Navigation.RenderNavigation("master/navigationDesignHeader.cshtml", navigationSettings)
</nav>
</div>
//NavigationDesignheader.cshtml under this line
var elementId = 1;
foreach (var node in nodes)
{
var idElement = "megaMenu" + elementId;
<div class="NavHorizontal-item Grid-cell u-sizeFit" id="#idElement">
<a class="Button Button--tab navigationHeaderLink u-pointer" onclick="toggleMenu('#elementId')">
#node.Name
</a>
#RenderMegaMenu(node.Nodes, node.Link, node.Name)
</div>
elementId++;
}
Megamenu:
<div>
<div id="megaMenuDropdown" class="Container megaMenuDropdown-content displayNone">
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-sizefull u-mt-10">
#nodeName
<div class="megaMenuToggle-closeBars u-pointer" style="float:right">
<span class="megaMenuToggle-closeBar"></span>
<span class="megaMenuToggle-closeBar"></span>
</div>
</div>
</div>
<hr class="colorBlue" />
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in firstColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
#if (moreThanTen)
{
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in secondColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
}
</div>
</div>
</div>
Any suggestions?
I have added a dynamic class called hello to the last question from the form. I am trying to traverse through the DOM to get the grandparent element .question-popup but for some reason it does not work. Ideally once I get to question-popup from hello I want to be able to get to the class="step-through-btn o-wrapper" to change the text of the button the "NEXT STEP".
$(".js-cme-next-question-button").click(function(){
$(".js-test-questions-wrap .c-cme-test:last .o-overlay__question").addClass("hello");
console.log($(".hello").closest(".question-popup"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question-popup">
<div class="test-questions">
<div class="count">counter</div>
<div class="h6 u-text-grey o-overlay__question1 hello"> **hello added dynamically**
<div class="h6 u-text-grey o-overlay__question2">
<div class="h6 u-text-grey o-overlay__question3">
</div>
</div>
<div class="step-through-btn o-wrapper">
Next question
</div>
You can do so with plain javascript. But be warned your html code isn't well structured. But mine is so:
var hello = document.querySelector(".hello");
var parent = hello.closest(".question-popup");
var sibling = parent.nextElementSibling;
var button = sibling.querySelector(".c-button")
button.innerText = "NEXT STEP";
<div class="question-popup">
<div class="test-questions">
<div class="count">counter</div>
<div class="h6 u-text-grey o-overlay__question1 hello"> **hello added dynamically**</div>
<div class="h6 u-text-grey o-overlay__question2"></div>
<div class="h6 u-text-grey o-overlay__question3"></div>
</div>
</div>
<div class="step-through-btn o-wrapper">
Next question
</div>
I want to hide a div element on hover of kendo-menu-item in angular 8.
I want to hide a div whose class is "nav-flyout" on hover of kendo-menu-item "what we do"
Here is the html code
<div class="toolbar navbar" role="banner">
<span><h3>My Project</h3></span>
<div class="spacer"></div>
<kendo-menu class="navbar">
<kendo-menu-item
[cssClass]="'what-we-do'"
text="What We Do"
url="/whatwedo"
></kendo-menu-item>
<kendo-menu-item text="Our Team" url="/ourteam"></kendo-menu-item>
<kendo-menu-item text="Our Work" url="/ourwork"></kendo-menu-item>
<kendo-menu-item text="Resources" url="/resources"></kendo-menu-item>
<kendo-menu-item text="Who Are We" url="/whoarewe"></kendo-menu-item>
</kendo-menu>
<button kendoButton [primary]="true">Let's Talk</button>
<div id="rightSpace"></div>
</div>
<div class="content" role="main"></div>
<div class="mega-nav-contain project-container">
<div id="what-we-do-flyout" class="nav-flyout">
<div class="row-fluid center">
<div class="span4">
<h3 class="loop-title">
<a href="">
<span class="green">Website</span> Design</a>
</h3>
</div>
</div>
</div>
</div>
Any help would be appreciated.
you need to add mouse-eventin kendo-menu-item like:
<kendo-menu-item (mouseover)="yourFun()" text="Our Team" url="/ourteam"></kendo-menu-item>
and in this function yourFun() change display-style , Triggers when cursor is over the mouseover applied element (like hover).
I am trying to add a feature just like stack overflow comments where clicking on the edit link the div transforms to a text box and we get a submit button .
But the problem is i have multiple comments which i am populating via ngFor how do i remove the property readonly from the selected div in which the edit has been clicked .
This is what i have tried.
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div class="well">
<input type=”text” value="{{i.comment}}" [readonly]="false" /><span>
Edited <time>{{today | amDifference: i.createdAt :'minutes'
: false}}</time> before
</span><a><i
class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="edit(index)"></i></a>
</div>
</div>
</div>
</div>
I also i would love to have something like checking time i have already done the backend part of same how to only enable the edit button for the comment where the amDifference is less than 5 mins and then we show a delete option.
You can use ngIf-Else to provide a second template to show like such:
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div *ngIf="i.editMode; else editBlock" class="well">
<!-- Show stuff here -->
<a>
<i class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="i.editMode=true">
</i>
</a>
</div>
<ng-template #editblock>
<div class="well">
<!-- Edit stuff here -->
<input type="button" (click)="i.editMode=false" value="Done"/>
</div>
</ng-template>
</div>
</div>
</div>
I just want to add a tooltip to the element which is clicked.
Tooltip is added to all repeat elements when clicked. Please help me.
<div ng-repeat="item in listOfMenu" class="repeat_container">
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" >
<div class="shadow img_cont">
<img src="{{menu.itemimage}}" class="item_img">
<div ng-repeat="innerItem in menu.pricelist | limitTo:1">
{{innerItem.itemprice}}
</div>
</div>
<div>
{{menu.menuitemname}}
</div>
<div ng-repeat="menu in addToCart" class="add_circle" ng-show="circle">
{{menu.quantity}}
</div>
</div>
</div>
Change the div in:
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" ng-class="{'clicked': menu.clicked}">
In getTool method
menu.clicked = true;
but you should put clicked:false to all others menu in items