I am searching a solution with input + dropdown with Dart/Polymer (material design), similar to input + list + datalist + option (autocomplete HTML5) but that I have plus:
Index/key related to selected element.
I can search the term into all content, doesn’t just in the start.
There is an interesting implementation in https://pub.dartlang.org/packages/autocomplete_ui (http://hpoul.github.com/dart-autocomplete-ui/examples/example.html), but doesn't use Polymer elements (material design).
Someone know any another solution?
Thanks in advance.
Related
Can someone help me out here on how to add passengers count dropdown form like on the image below. i have been searching all over but cannot seem to find any demo or help.
thanks for your help
This is a solution using pure HTML, CSS, and jQuery. For a Bootstrap-specific answer, How use input field as toggle for bootstrap 4 dropdown may help.
Moving on.
You should create a normal number type form and add a disabled attribute in the input tag so that no cursor appears when you click the form (<input type="number" disabled>). Then, just create a dropdown menu (probably a <div> with an absolute position right under the input) with a classname of your choice (assuming in this answer that you choose .passengerInput as the classname).
You can hide the dropdown by default using the $(".passengerInputDropdown").hide() method in the body of your JS.
Then, when you click the form, using the $(".passengerInput").toggle() method, do something to the effect of:
$(".passengerInput").on("click", () => {
$(".passengerInputDropdown").toggle();
})
Let me know if this helps!
I have a menu that consists of checkboxes, where the user selects one or more things to display on the screen. My HTML (Angular -- the *ngFor directive generates multiple <li> blocks) looks like this:
<ul role="menu" [id]="'topic-menu' + i" [attr.aria-labelledby]="'topic-menu' + i + 'label'">
<li
[id]="'topic-option' + i + j"
*ngFor="let measure of group.measures; let j = index"
class="topic-option"
role="none"
>
<input
class="checkbox-input"
type="checkbox"
role="menuitemcheckbox"
[attr.aria-labelledby]="'topic-select-input-label' + i + j"
[name]="'group' + i + '-topic-menu'"
[checked]="measure.selected"
[id]="'topic-select-input' + i + j"
(click)="onSelectCheckboxMultiple(measure, group.measures)"
>
<label
[for]="'topic-select-input' + i + j"
[id]="'topic-select-input-label' + i + j"
class="topic-select-label"
>
{{ measure.measureName }}
</label>
</li>
</ul>
When I listen to this, JAWS announces the menu, lists the number of items, and says "to move through items press up or down arrow". However, the user cannot use up or down arrows, and instead must tab through the checkboxes. As far as I can tell, this is the expected behavior of checkboxes -- see here: https://w3c.github.io/aria-practices/examples/checkbox/checkbox-1/checkbox-1.html).
I am confused as to how I should modify my HTML to make JAWS and the behavior get on the same page. Here is an example of a menu that uses role="menuitemcheckbox", and indeed, you can navigate those options with up/down keys, as JAWS instructs, but you can see that they do not actually use input elements. https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
It seems like I need to choose between using role="menu" and using <input type="checkbox">, but I have no idea which is the correct strategy. Note that I am not in fact using a <form>, so, the no <input> option is possible.
Can anyone offer guidance here?
The correct way to mark up accessible menus which persistently display a selected or checked menu item is through the menuitemradio role as shown in this example from the ARIA authoring practices documentation. Per guidelines, the menuitem role does not permit the aria-checked attribute, but menuitemradio does. Where multiple items can be checked, the menuitemcheckbox role should be used.
I'm using the Tab Modifier plugin for Chrome to dynamically rename some tabs that I use daily. In the tab Title definition, it says the following:
You can inject any DOM content with {selector}. Examples: {title} for website title, {h1}, {#id}, {.class}, etc.
Here is an example of the element I want to use to name the tab:
<td class="portalTitleInfoVal">
PORTALNAME
<a class="portalLink">Change Portal</a>
</td>
This is what I'm currently using for the title:
{.portalTitleInfoVal:nth-of-type(4)}
But, of course, the tab is named PORTALNAMEChange Portal.
How can I modify the DOM selector so that the tab is just named "PORTALNAME"?
I know I'm really late to the party, but I found this post while searching for an answer.
I'm working with a lot of old systems and all the tabs just says {title}, which is.. not useful when having 15-20 tabs open at once, and it's tedious to hard code every tab.
So.. I brute forced tested until I found a solution:
Every page has a breadcrumb:
<div class="breadcrumb noPrint">
Home "»"
Materials
123123
</div>
So they might have updated the extension since, but your guess was very close. I don't know why you were putting in 4, but I assume you had more elements than posted.
Anyhow, the way I got it to work were by:
{.breadcrumb :nth-last-child(2)} : {.breadcrumb :last-child}
So, there has to be a space between the .class and the child element, which in my case returns Materials : 12312
I haven't tried nearly half, but DoFactorys list of CSS selectors were a big help for me.
The element's first child node is the plain text, before the HTML element (<a>).
$('. portalTitleInfoVal')[0].childNodes[0].nodeValue
It looks like this plugin will only allow for CSS style element selectors compatible with querySelector. It then grabs the text from that element. From their github repo:
/**
* Returns the text related to the given CSS selector
* #param selector
* #returns {string}
*/
getTextBySelector = function (selector) {
var el = document.querySelector(selector), value = '';
if (el !== null) {
value = el.innerText || el.textContent;
}
return value.trim();
};
Using Ctrl-F in most browsers will allow you to search for text, but only in only the text areas. I would like to search for text in what should be accessible areas that are not necessarily text rendered areas such as <map ...><area title="searchable text" /></map> and <img alt="searchable text" />. Is there a browser or addon that will do what I'm asking for? This stuff is here for accessibility, but it doesn't seem to be really all that accessible (except by mouse hover, which again isn't all that accessible).
NOTE
An answer that is required, does not use something that is decoupled from the view. I.e. searching through the source code isn't an option as this is largely difficult to read (esp on complex pages) and doesn't show where the information is located on the rendered page.
Is there a browser or addon that will do what I'm asking for?
Oh yes. Lynx browser does it.
But I guess it's not a solution ;-)
If your question is so, there is no way to override what CTRL+F is doing in your browser.
You can design a custom plugin inside your website, or an addon for your browser. This would be quite easy... but will require other shortcut.
If your main problem is to locate tags based on their alt or title attributes content, this is quite easy in javascript:
var search='enter image';
var nodes=document.querySelectorAll("[alt*='"+search+"'],[title*='"+search+"']");
You can then highlight the matching nodes using jquery or what you want.
for (i in nodes) {
nodes[i].className+=' resultHighlighted';
}
and scroll to the first result:
nodes[0].scrollIntoView();
If you intend to create a browser plugin, you can create your custom a bookmarklet or a custom plugin, and associate a shortcut to this bookmark (see https://github.com/iSunilSV/Chrome-Bookmark-Shortcut)
A simple bookmarklet to find the first match by title or alt attribute and scroll to it will be something like that:
javascript:text=prompt("search inside alt or title attribute");
document.querySelector("[alt*='"+text+"'],[title*='"+text+"']").scrollIntoView();
In your browser, use the "View Source" or "Source Code" function, and then within that window that pops up, use the Ctrl-F for Find.
You can also use the "Inspect Element" directly on an element to split the screen into two windows- one for code and one that's rendered.
For more information, here's a sample article for Chrome:
https://support.google.com/adsense/answer/181951?hl=en
Would something like the Web Developer browser plugin work? It's available for Chrome, FF and Opera. There are a few features that toggle the display of various attributes such as title, alt and even ARIA roles. This injects the attribute text inline with the element.
In my opinion, it's not a bug; they were just not designed for this use.
As I'm sure you are aware, the alt attribute replaces the image when it's not available. So how could you scroll to something that is not always displayed? Whereas you seem to be after a permanent description; a figcaption would be more appropriate for this.
As for the title attribute, it was intended to merely clarify the purpose of a link. There should not be any new information to the user in the title; therefore I think it would be redundant to have two lots of the same information highlighted in one place.
The purpose of searching is to find text on screen, seeing as neither title or alt are always displayed I think the user would be more confused by the fact that nothing is highlighted, and that they are just taken to an image or random link/area. If the image has a figcaption that becomes highlighted, then it would make sense to them. Besides, how are they going to search for the title if they don't know what to search for? Title and alt do not come up in text displayed by search engines; the user will never know about it unless they've been to your site before, in which case they'll know where to look.
Also you state the following:
This stuff is here for accessibility, but it doesn't seem to be really all that accessible
Which, understandably, seems true to you as you probably do not need it. However alt and title are read out to those who use screen readers so isn't entirely useless.
Idea 1
I assume you have Windows and Firefox installed
I have my Firefox installed with 2 add-ons.
Install a add-on called Tile Tabs, it make it possible for example left side is web view and the same page on right side with source code.
Install add-on called Web page to source code & viceversa that make it possible to toggle between view and source code by pressing on CTRL+SHIFT+S
Since what you required is not a default thing in all nowadays browses as far as I know.
Screen shot of the solution:
Idea 2
Install FireBug, you can view/edit/debug source codes and view HTML live and what you highlight on the code will be also highlighted on the view.
Screen shot:
Note: Btw idea 1 is not only good for view / source code but it is also good to compare two views or read article to the right and answer question to the left.
You can use the search funktion in Chrome's developer tools "Elements" Tab (Press F12 -> Tab "Elements" -> Press CTRL + F) and use XPath on your searches. Example:
//*[#title="Google"]
Matches will be shown with a yellow background in the code and when you hover it, its position will be hightlited in the view.
Dev Tools "Element" Search with XPath
It is coupled with the view, allows you to see the element's position and it's also an out-of-the-box solution in Chrome (tested in Chromium 45 for Ubuntu).
Hope it helps!
Regards
EDIT
Forgot - If you want to use wildcards on your searches, you can also do it like this:
//*[contains(#title, 'Google')]
EDIT 2
For the posterity! Further research shows that your goal might be possible to achieve using the Firefox-Addon Greasemonkey, which allows you to customize the way a web page displays or behaves, by using small bits of JavaScript.
I performed several tests with this addon and could achieve a nice effect with simple images (display the ALT attribute as a DIV overlapping the image), but with area sections the thing gets a lot more complicated, as area regions can be squares, circles, and polygons with infinite coordinates plus retrieving the exact positioning of the area itself can be a bit tricky but maybe gives you or someone else a start point.
Based on the ALT Tooltips Script (http://greasemonkey-user-scripts.arantius.com/alt-tooltips-for-firefox), I created the following script and defined it in Greasemonkey:
// ==UserScript==
// #name Alt Tooltips 2
// #namespace http://www.biterion.com
// #description Alt Tooltips 2
// #include *
// #grant all
// ==/UserScript==
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
function getAreaPosition(element) {
var position = element.coords.split(',');
xPosition = position[0];
yPosition = position[1];
return { x: xPosition, y: yPosition}
}
var res = document.evaluate("//img",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i, el;
for (i=0; el=res.snapshotItem(i); i++) {
if(el.alt) {
alternate = el.alt
} else {
alternate = "No alt text";
}
position = getPosition(el);
var newDIV = document.createElement ('div');
newDIV.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position["y"] + ";left:" + position["x"] + "' id=" + i + ">" + alternate + "</div>";
document.body.appendChild(newDIV);
}
var res2 = document.evaluate("//area",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i2, el2;
for (i2=0; el2=res2.snapshotItem(i2); i2++) {
if(el2.alt) {
alternate2 = el2.alt
} else {
alternate2 = "No alt text";
}
position2 = getAreaPosition(el2);
var newDIV2 = document.createElement('div');
newDIV2.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position2["y"] + ";left:" + position2["x"] + "' id=" + i2 + ">" + alternate2 + "</div>";
document.body.appendChild(newDIV2);
}
As you can see, the script firstly detects all "img" and "area" elements, extracts its positioning and creates a new DIV element containing the "alt" attribute, which is then positioned on the upper left corner of the image.
As stated, the problem with areas is, that the positioning should be relative to the parent image and not absolute like in the script, plus the coordinates should be extracted accordingly to the type of area shape (currently only extracting the two first coordinates of each area, which will work for squares but will surely fail for other shapes).
Hope this will help someone :-D
Regards
I have a very long and very nested HTML document, where I need to quickly find the closing tag. How can I do this?
Try Emmet plug-in command Go To Matching Pair:
http://docs.emmet.io/actions/go-to-pair/
Shortcut (Mac): Shift + Control + T
Shortcut (PC): Control + Alt + J
https://github.com/sergeche/emmet-sublime#available-actions
There is a shortcut (Ctrl+Shift+A for Windows and Linux users, Command+Shift+A for Mac users) to select the whole block within the currently selected tag.
For example, if you pressed this while your text cursor was within the outer div tag in the code below, all the divs with class selected would be selected.
<div class='current_tag_block'>
<div class='selected'></div>
<div class='selected'></div>
<div class='selected'></div>
<div class='selected'></div>
</div>
As #frazer-kirkman mentioned in a comments you can also move your cursor to the start or to the end of the selected block by pressing either Left or Right button on a keyboard depending on your cursor's position
It's built in from Sublime Editor 2 at least. Just press the following and it balances the HTML-tag
Shortcut (Mac): Shift + Command + A
Shortcut (Windows): Control + Alt + A
None of the above worked on Sublime Text 3 on Windows 10,
Ctrl + Shift + ' with the Emmet Sublime Text 3 plugin works great and was the only working solution for me.
Ctrl + Shift + T re-opens the last closed item and to my knowledge of Sublime, has done so since early builds of ST3 or late builds of ST2.
Under the "Goto" menu, Control + M is Jump to Matching Bracket. Works for parentheses as well.
As said before, Control/Command + Shift + A gives you basic support for tag matching. Press it again to extend the match to the parent element. Press arrow left/right to jump to the start/end tag.
Anyway, there is no built-in highlighting of matching tags. Emmet is a popular plugin but it's overkill for this purpose and can get in the way if you don't want Emmet-like editing. Bracket Highlighter seems to be a better choice for this use case.
I think, you may want to try another approach with folding enabled.
In both ST2 and ST3, if you enable folding in User settings:
{
...(previous item)
"fold_buttons": true,
...(next item, thus the comma)
}
You can see the triangle folding button at the left side of the line where the start tag is. Click it to expand/fold. If you want to copy, fold and copy, you get all block.