I am creating a drop-down menu in line with various online tutorials such as:
https://www.codewall.co.uk/create-a-dropdown-navigation-menu-with-details-summary/
However, when I reproduce this code (including copy-paste), the menu items fail to be clickable. I would like the items (i.e. ) to be clickable links when the element is expanded.
It might be important that I am using the Cargo website builder, but I have not run into any CSS/HTML/JS issues that couldn't work.
I tried code from multiple sites, as well as typing it myself—it's very simple.
<details>
<summary>
menu name
</summary>
item 1<br>
item 2<br>
item 3<br>
ALL OTHER PIES
</details>
Related
I use UiPath and data scraping activity. First open the browser direct to the e-commerce site and search the product. Everything is fine, until after the product was searched and results were shown, the data scraping stopped and the output gives the following error message which I couldn't understand why:
This is because I had previously edited the selector. Currently, my selector is:
<html app='chrome.exe' title='Qoo10 - "ItemsFList" Search Results : (Q·Ranking)： Items now on sale at qoo10.sg' />
My previous selector did not causes any error and the selector was:
<html app='chrome.exe' title='Qoo10 - cooking oil; Search Results : (Q·Ranking)： Items now on sale at qoo10.sg' />
The ItemsFList is actually a String variable I created. This variable stores a list of text in String format. It stores the exact same text as the rpa input into the search box at the e-commerce site when the rpa begins running.
UiPath tries to write as specific a selector as it can based on the data you provide it. Unfortunately, sometimes that selector is too specific.
For example, when you scrape a page, it includes the title of the page in the selector. But the page title will change if you are looping through more than one page. And sometimes the page title is completely dynamic, perhaps including a variable that changes every time the page is loaded. If the title is hard-coded into the selector, your program will only work if that page remains constant, which rarely happens.
Remove the title
You can use wildcards in the title to make this part of the selector more generic. Quite frankly, my experience is that that title is rarely needed at all, so I just remove it whenever I do a UiPath web scrape of HTML pages.
As you can see in the image below, the title is deselected. You can then click the orange ? Validate button to confirm that the page scraping will still work without the title. If everything goes green, you're good to go.
As you've found, the title almost always gets in the way.
The issue is your UI selector. It is clear with your error as you can see the title is dynamic and you're relying on the title to find the browser window or browser control. You have to make your selector more generic and than it should work. Try go through the UI explorer or UIPath Documentation. The few options you can try in your selector is:
Remove title from the selector <html app='chrome.exe' />
Or make Title generic
<html app='chrome.exe' title='Qoo10 - *' />
Note the * sign in the title that will make it more generic and please go through their documentation
I have a header tag that contains the title of the page. The Windows screen reader is not reading that text and i wanted to know if there is a way to do so by adding some aria items?
<section class="section">
<header class="section-title" ip-l10n="county_list">List of Countries</header>
</section>
Just to make sure we're talking about the same thing, there are headings and headers. Headings are <h1> through <h6> elements. Headers are typically used when describing tables and are the names at the top of the column, the column header or <th> tag.
You had mentioned that your header contained the "title of the page". The title of the page is normally contained in a heading, specifically an <h1> if it's the main title of the page. So I wasn't clear which term you were really asking about.
I know your example used the <header> element so I will limit my comments to just that element, but I did want to point out the aforementioned differences to make sure we're all talking about the same thing. Accessibility and aria tags are all about semantics so it's good to be clear about the semantics of your question.
The <header> element is a container for stuff that's usually at the top of your page. By default, it creates a banner landmark. A <header> usually contains a <nav> which is the main navigation for the site that is repeated on all pages. It might also contain the company logo as an image and serves as a link back to the home page. It might also have account info, or if a retail site, the shopping cart contents. So a <header> might have interactive and non-interactive things.
In your example code, you just have plain text in your header. That's not interactive so a screen reader user will not hear the text if they are using the tab key to navigate the site. They will hear the text if they navigate the DOM using the up/down arrow keys with the screen reader.
If instead, you really meant for your code to be a heading, and thus the <h1> tag, that is also static text that is not interactive so again, the screen reader user will not hear the text if they are using the tab key to navigate the site. However, they can hear the text if they use the screen reader H quicknav key (to navigate to a heading).
So if you want to clarify your question, I can update my answer.
I am changing my Joomla 2.5 component into a Joomla 3 component. However, it turned out to be one big obstacle course with hardly any documentation for it as far as I could find...
In Joomla 3 (using 3.5.1 at time of writing) the originally horizontal submenu goes vertical into the sidebar.
I called JHtmlSidebar::addEntry( "Item", "index.php?option=com_example", false ) to add a submenu item. Then called echo JHtmlSidebar::render() in the view's template file.
I do get a sidebar that can be opened and closed, but there are no items in it...
I downloaded the Hello World example component from https://docs.joomla.org/J3.x:Developing_an_MVC_Component/Adding_an_install-uninstall-update_script_file. It has a sidebar but it's a mess: in its Messages view there is a sidebar with items in it but not the collapsable one and in its Categories view the collapsable one appears empty and over the other sidebar:
It also uses JSubMenuHelper (instead of JHtmlSidebar), which is deprecated...
I then tried to find out how it is done in Joomla's core com_installer, which has a nice collapsable sidebar with submenu items, but did not find more than what I already described above...
Anyone who can tell me how to get a proper sidebar? Thanks a lot already!!
And as it is so often: just after I posted my question I found the answer...
In admin/controller.php I defined a method addSubmenu() in which JHtmlSidebar::addEntry() is called. I called addSubmenu() from the method display(), but I accidentally did that after calling parent::display(), so no entries where added yet when that method was executed.
Now calling addSubmenu() before calling parent::display() and getting a very nice sidebar as result.
Using Chrome, I can get the path to an element. I select "View source" and then right-click on the relevant item and say "get XPath".
In Safari, I can view the source, and when my cursor's on an element in the source, I can see the xpath visually displayed as a list of elements.. but I can't find a way to get the text for that xpath. Surely there's some way (he said optimistically).
This turns out to be easy, and I don't know why I didn't see it. In Windows at least:
Ctrl-U to display page source (or right-click on the page and click "View page source" in the popup menu).
In the page source, right-click on the element you like; in the resulting popup, click the "Copy >" option
Select "Copy XPath" from the resulting nested popup.
See picture below for an illustration. Everything was done with right-clicks.
Kinda late with an answer, but you might want to consider ios-webkit-debug-proxy by google.
Here is a good Extension for Safari and Google Chrome:
https://github.com/sergeche/xmlview#readme
Safari Extension: http://files.chikuyonok.ru/xv/xv.safariextz
Google Chrome Extension: download
Current features
Collapsable elements: Alt+click to expand/collapse all descendant elements
Outline for better document overview
Search by name or XPath. By default uses simple search mode which looks for a partial match in element‘s or attribute’s name; use special symbols like ‘/’ or ‘[’ to search by XPath
Quick XPath mode: hold down Command (Mac) or Ctrl (PC) key while moving mouse cursor over element‘s or attribute’s name to enter Quick
XPath mode. Use Shift key to cycle through available XPath variants
and then drag’n’drop element under cursor into text editor. Google
Chrome users: click on element will copy XPath to clipboard
I want to add the word MENU under the 3 bars to make it more clear to visitors what those bars are - how do I do that? Is there a simple way to do this?
The link that opens/closes the menu is just wrapped in a standard a tag, so you can put anything you want into the a tag.
can become:
<img src="mymenubutton.jpg">
And you can create your own menu icon or button here, to look however you want.
Or you can add an click event to your own div:
<div id="openmymenu">Click me to open menu</div>
$("#openmymenu").click(function() {
$("#menu").data("mmenu").open();
});
And then put any text and/or images you want inside your div.