I have a piece of code in Jade and I would like to have a menu that is a dropdown list with n elements and one of the elements should be expanded into another dropdown
This is what I have in terms of code
li.nav-item.dropdown
a.nav-link.dropdown-toggle(href="#" id="navbarDropdown" role="button" data-toggle="dropdown")
| Main Title
ul.dropdown-menu
a.dropdown-item(href="/page1.html") Page1
a.dropdown-item(href="/page2.html") Page2
a.dropdown-item(href="/page3.html") Page3
a.nav-link.dropdown-toggle(href="#" id="navbarDropdown" role="button" data-toggle="dropdown")
| Nested Dropdown
ul.dropdown-menu
a.dropdown-item(href="/page4.html") Page4
a.dropdown-item(href="/page5.html") Page5
a.dropdown-item(href="/page6.html") Page6
The main problem is that the element "Nested Dropdown" is not displayed inside the first dropdown menu but I can click on it, and it expands as it should and the sub menu shows Page4, 5 and 6 as intended. An idea on how I should modify the code so that I can see "Nested Dropdown" in the main dropdown?Thanks!
I was able to solve it, not the most elegant solution but it worked for what I needed. Here is how I changed the code
li.nav-item.dropdown
a.nav-link.dropdown-toggle(href="#" id="navbarDropdown" role="button" data-toggle="dropdown")
| Main Title
ul.dropdown-menu
a.dropdown-item(href="/page1.html") Page1
a.dropdown-item(href="/page2.html") Page2
a.dropdown-item(href="/page3.html") Page3
a.dropdown-item(href="#" id="navbarDropdown" role="button" data-toggle="dropdown") Nested Dropdownâ–¼
ul.dropdown-menu
a.dropdown-item(href="/page4.html") Page4
a.dropdown-item(href="/page5.html") Page5
a.dropdown-item(href="/page6.html") Page6
Related
I am working on an application for disabled people in which NVDA screen reader is supposed to read out the current date if the user hit on element(date picker/calendar/cleave) with tab. When Navigating from top to bottom of page NVDA is ignoring aria=current="date" ( doesn't reads out as current date), but reads out the same date when navigating from b0ttom-top of the page.
reference of code snippet:
<tag
attribute1
attribute2
aria-current="date"
>
<input /calendar (could be calendar in place of input)
attribute1
type="date"
aria-current="date"
attribute2
more attributes
>
</tag>
aria-current is supposed to tell you which element within a set of elements is the current one. It has various values with the most common one being "true".
I just tried the various values with NVDA on both Firefox and Chrome and they all seemed to work.
<button>foo</button>
<button aria-current="true">foo</button>
<button aria-current="page">foo</button>
<button aria-current="step">foo</button>
<button aria-current="location">foo</button>
<button aria-current="date">foo</button>
<button aria-current="time">foo</button>
The results from NVDA were:
"foo button"
"foo button, current"
"foo button, current page"
"foo button, current step"
"foo button, current location"
"foo button, current date"
"foo button, current time"
I have a program where I'm going through tabs by clicking input submit buttons by pressing next or previous. My problem is when I click next it go to the next page and I click to reload the page up in the browser box it it basically go the the next page without me pressing next when I just want to reload the page here is my code for my page action for Next.
app_xval = session("app_xval")
if app_xval="X" then
upl.upload
upl.MaxFileSize = 50000000
page_action = upl.form("btnAction")
has_setup = upl.form("has_setup")
end if
if page_action = "Next" then
app_pg = app_pg + 1
session("app_pg") = app_pg
end if
<input type="submit" class="btn btn-sm btn-primary me-2" name="btnAction" value="Next">
I have the following loop which displays images in a gallery:
<a href="#" v-for="(file, index) in files" v-bind:key="file.id" #click="file.selected = !file.selected">
<img :src="file.url" />
<span>{{file.name}}</span>
<i v-show="file.selected" class="fa fa-check-square"></i>
</a>
I would like to be able to select any image by clicking on it.
But nothing happens when I click on the image.
I did it the way I would do it in AngularJs - I modify the item within the loop.
I was expecting that:
- the view (inside of the loop) will be updated
- the change of the item will be taken over into the data array (files)
Ok, that was easy - it did not work the way I wanted, because I did not add a key "selected" to my initial data array.
In AnguarJS this would not matter - the key would just be added, but here the element is not known / watched if it does not exist from the beginning.
If there are no Class or DIV designations for the items within this unordered list, how would you go about using the %this.innerHTML% notation to pull which link was clicked in an Event-Based rule?
< div class="relatedCategories rowBottomSpace" >
< strong class="header black short">Related Categories</strong>
<ul>
<li>
LINK 1
<span>|</span>
</li>
<li>
LINK 2
<span>|</span>
</li>
<li>LINK 3
</li>
</div>
Solution #1: Update your selector to be more specific
This is the solution I mentioned in my comment above. Assumption is that your Condition's Element Tag or Selector is something like div.relatedCategories. If you change it to specifically target links within it: div.relatedCategories a then this will reference the link that was clicked.
Solution #2: Use a custom condition and data element
Let's say for whatever reason(s) you want to keep the original higher level selector:
div.relatedCategories.
Leave it as such, and then under
Rule Conditions > Criteria
choose Data > Custom and then click "Add Criteria".
In the Custom code box, add the following:
var target = (event.target) ? event.target : event.srcElement;
_satellite.setVar('linkTarget',target);
return true;
This will create a data element called linkTarget which will hold an html element object reference to the clicked link. So then you can use %linkTarget.innerHTML% or alternatively, back up in the Custom code box you can set linkTarget to be target.innerHTML and then reference with %linkTarget%.
I have a span:
<span class="ToolbarLinkButton" id="ComparisonReports" onclick="function_which_shows_dropdown_menu">
When I click on it I get drop down menu:
<div id="divPopupTemplateComparisonReports">
<div class="ToolbarButtonMenu">
<div class="ToolbarLinkButton" id="ComparisonReportsView" onclick="some_functions">
But when I try to click on element (id="ComparisonReportsView"), it says that: "Selenium::WebDriver::Error::ElementNotVisibleError: Cannot click on element"
on(Main) do |page|
page.spnComprReptVer_element.fire_event ("onclick")
page.divComprReptView_element.click
sleep 2
end
And when via fire_event it says that step passed but nothing was executed (no menu item clicked).
on(Main) do |page|
page.spnComprReptVer_element.fire_event ("onclick")
page.divComprReptView_element.fire_event ("onclick")
sleep 2
end
How I can click on it somehow other way, or what I can use?
I do not know your definition for divComprReptView_element but I assume it has #when_present just use it and give it a block to execute click(e.g. page.divComprReptView_element.when_present.click).