default elements in html that are tabbable are:
<a> , <area> , <button> , <input> , <object> , <select> , and <textarea>
If someone were to “plop” my code for drop-down menus, my tabbable elements are my li.
What I wish to do is select a non- TAB key to traverse my li, thus keeping the TAB key reserved by HTML
FWIW, I just let my selection of the TAB key ride ... eventually it gets to my last li and then tabs to your <a> or <input> etc. html and then proceeds to the Browser's tabbable stuff and cycles back to the beginning of my li items.
Not too awful I guess?
Suggestions appreciated.
You can give your <li> items a tabindex of -1 to make sure they're not focusable vith the TAB character, then focus the next element with Javascript using the HTMLElement.focus() method and onkeyup event.
Related
When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
Currently in CKeditor, the style drop-down let you wrap content with block or inline tags.
If you select multiples lines in the editor and chose a div element in the style menu, each lines will be wrapped individually in a div element.
Is it possible to select multiple lines and then wrap them in one div?
I use inline CKEditor for editing elements on my page. So when I click into DIV with some class, CKEditor is attached to it and when it loses focus, editor instance is destroyed. I need to insert HTML element into that DIV after CKEditor instance is destroyed - to the last position of cursor before destroying editor instance. So I basicaly need to know index of cursor in edited element's HTML, as it would be taken as a plain text (for this example below it would be 25). I don't want to modify original data.
I have HTML in my DIV like this:
"some <span>text</span> wi|th <b>html</b> tags" (where "|" is cursor position)
I tried to get range and extend it to the start of editable element:
var range = editor.getSelection().getRanges()[ 0 ];
range.collapse( true );
range.setStartAt( editor.editable(), CKEDITOR.POSITION_AFTER_START );
Here range.endOffset is 3 (the same as if I didn't extend range). But even if I sum up offsets of more elements, it wouldn't solve my problem, because it exclude HTML tags.
You won't be able to use ranges if you want to use them after the editor is destroyed, because while being destroyed the editor replaces editable's inner HTML with the data and they are not the same thing.
Instead, you should create a marker for the selection before the editor is destroyed and find this marker in the data.
See this topic for ideas how to achieve that: Retain cursor position after reloading the page in CKEditor.
I'm working with a table that has in-line editing. To make a cell editable, you double click on it.
While I know exactly how to double-click on a cell, some of the cells I need to do this on have hyperlinks in them.
This means that sometimes when Watir tries to double-click on the cell, it instead accidentally clicks on the hyperlink, navigating to an entirely new page.
How do I tell it to click the empty space in the cell rather than the hyperlink?
Watir-webdriver's Element#double_click will always click the middle of the element. If you need to click somewhere else, you will need to use the underlying selenium-webdriver move_to action builder code.
Given the html:
<html>
<body>
<table>
<tr>
<td onclick="javascript:document.title = 'New title';">
hi
</td>
</tr>
</table>
</body>
</html>
Using double-click for the cell, clicks the link (since is in the middle of the cell):
el = browser.td
el.double_click
browser.title
#=> "Google"
However, we can use the underlying selenium-webdriver code to move the mouse to somewhere in the cell that is not the middle (ie where the link is). The following moves the mouse to the top left corner of the cell:
el = browser.td
el.driver.action.move_to(el.wd, 0, 0).double_click.perform
browser.title
#=> "New title"
Note that for the move_to method, the second parameter is how far to move right from the top left corner and the third parameter is how far to move down from the top left corner.
Ok, so I want an autocomplete dropdown with linkbuttons as selections. So, the user puts the cursor in the "text box" and is greated with a list of options. They can either start typing to narrow down the list, or select one of the options on the list. As soon as they click (or press enter) the dataset this is linked to will be filtered by the selection.
Ok, is this as easy as wrapping an AJAX autocomplete around a dropdown? No? (Please?)
This widget can be made with three items: a text input, button input, and an unordered list to hold the results.
__________ _
|__________||v|__ <-- text and button
| | <-- ul (styled to appear relative to text input)
| |
| |
|______________|
ul shown on:
'keyUp' event of the text input (if value is non-empty)
'click' event of the button input (if currently not visible)
ul hidden on:
'click' event of the button input (if currently visible)
'click' event of list items
When the ul is shown or the 'keyUp' event of the text input is triggered an AJAX call to the server needs to be made to update the list.
On success the results should be placed in the ul. When creating the list items they should have a 'click' event attached to them that sets the text input value and hides the ul (may have to add a link inside the li to attach the event to).
The hardest part is really the CSS. The JavaScript is simple especially with a solid library like prototype that supports multiple browsers.
You will probably want to support some IDs for the items, so you can add some hidden inputs to each list item with the id and next to the text input to store the selected items ID.
You'll have to handle the OnSelectedIndexChanged event of your drop down list to rebind your dataset based on the users selection. If you want the filtering to happen in an asynch postback, wrap the dataset (or datagrid I'm assuming) and your drop down in an UpdatePanel. That is one way to do it anyhow.
I am not entirely sure what you want, but the Ra-Ajax AutoCompleter definitely have support for having "controls" within itself. You can see that in the search box at Stacked in fact (upper right corner) where we're using links. But this could also be LinkButtons if you wish...
Disclaimer; I work with Ra-Ajax...
In my opinion, you shouldn't use AJAX for this at all.
here's why:
(1) On focus: ALL the options that he can select are shown in the dropdown. This means that all possible options are already sent to the client.
(2) If the user types something in, the number of entries in the drop down are filtered down to match. This can easily be done on the client side. Being ajax'y and going back to the server at this point will just slow things down.
phpguru.org has a control which is 'almost exactly' what you need:
http://www.phpguru.org/static/AutoComplete.html#demo
It differs slightly from what you need in that it shows the dropdown on double-click instead of on focus. That should be fairly easy to modify.
I hope this helps.