in my current scenario i can't us any server controls.
there is an input type button when click on this a span should come and act as water marker
giving some message when you click on the message any where a run time generated text box should come in place of span.
where user can input the value and after entering if he click any where on the form the value should be assigned to new span generated run time .
An example to visualize my scenario is given below i am also making a tree but with the help js,jquery.
http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/nodeediting/defaultcs.aspx
You should have a single container for each button, attach event on button click to add div over the input including the span with the message(position relative and zIndex > button zIndex) and on the newly inserted div attach another click handler which will replace the span with an input (actually the content of the container added so you wont have to worry about positioning) and on window.click you should check in a stored variable if you have any "popup" open and close & save. I trust you are familiar with HTML injection and $().html, $().append, $().click or $().bind since you said you are making a tree with jQuery.
After you give this a go maybe you will come up with more pinpointing questions so we could give you exact answers.
Related
Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation
I've been struggling with getting a field working properly. This field displays a lot of data, and the user wants to select and copy a large portion of it. The data is basically a big list and the user wants to select all entries below a certain point. The way that they achieve the selection is by highlighting a word or two in the first entry they want then pressing ctrl+shft+end to select everything to the bottom. This was working until a new feature on the page was added below the contents of the list. Now the hot key select also selects the contents of the rest of the page.
The current implementation is simply :
<div id='diff-contents'>[content here]</div>
<div id='trailing-content'>blah blah blah...</div>
I have tried a read-only input field:
<input id='diff-contents' value='[content here]' readonly/>
This works in Firefox to some extent however the contents contains HTML, and the input field show html literally, not rendered. In addition to that Chrome doesn't show a blinking caret and the hot keys do nothing, so the input field is sadly not viable for me in this situation.
How can I make a selectable field that maintains focus for the cursor and shows a blinking caret but is not editable using javascript, CSS, HTML, or JQuery?
Edit: jsfiddle example that should clarify a bit.
Look at these questions how to determine the current selection: Getting selected text in a browser, cross-platform
The next step is to create a new range which starts at the end tag of #diff-contents. With this information, you should be able to extend/modify the existing selection.
I suggest to either add a button to the UI or use JavaScript with a key-press handler to trigger this code.
With that, the correct amount of HTML should be selected. Users can then copy that into the clipboard with Ctrl+C.
#Aaron Digulla mentioned key listeners, and that got me thinking about simply stopping the events.
The diff-content element is still a div but it is set to editable. This gives both HTML rendering and a blinking caret.
$(this).keydown(function (event) {
if (document.activeElement.id == 'diff-content') {
if (!allowedKeys(event.keyCode)) {
//The only other key presses that should be processed are ctrl+c (keycode 67) and ctrl+a (65)
if (!event.ctrlKey || !(event.keyCode == 67 || event.keyCode == 65)) {
event.preventDefault();
}
}
}
});
The javascript adds a keydown event listener to the entire page. This is necessary since if you just add it to the element, the event has already propagated through the rest of the page and will still be processed, and this was causing funny issues for me. Next we check if it's the diff-content that is active since we want other input elements to still operate normally. Then we check if the key event is an allowed key (tab, home, end, arrows). And finally, check for ctrl+c and ctrl+a and allow those too. I tried event.stopPropogation() and event.stopImmediatePropogation(), and neither of those worked, but preventDefault did.
Lastly, I added style="outline-style:none" to the element so that the blue border would not appear when the element has focus.
The only issue that I have yet to resolve is that since it is editable, the browser still allows you to select and then right click to either cut or paste, which will allow you to alter the text.
Here is the final jsfiddle for what I am using: http://jsfiddle.net/wh3nzmj8/12/
I have an HTML file, in which I am creating a text area when user clicks inside a table cell. Basically, it is a datagrid created using table, and when user clicks on one, it removes the text in cell and replace it with a text area. Below is the code I am using in table's onClick handler.
summaryTableElement.innerHTML = "<textarea id='summaryTextBox' value='TestString' onclick='doNothing(this.id)'> </textarea> <input type='button' onclick='saveSummary()' value='Save' /> "
This is all working fine, and it creates a text area perfectly. It bugs out when user clicks on the text area to modify the data. In that case, the click event handler of the text area never fires. Instead, the table receives the click event, resulting in creating another text area. No matter what user does, the text area receives no event at all.
Now, I am confused as to what to do here.
Edit:
I checked again. turns out, it is firing the child's click event handler. But, event is propagating to parent element too.
Edit:
I tried adding following condition in parent's click event handler
if (id.toString() == "SummaryData")
but this returns true even for child element.
Use a flag indicating the click once. If it is clicked already, then don't run the function. Now the problem of the text area. in your dynamically getting created html code, add an onfocus event handler insteaad of onclick. Also the 'id's cannot be the same for all the text areas you are adding dynamically. Use something like "id='xyz"+i+"'" where 'i' represents a count which is the number of the text area getting added.
im making an application that creates a text input where ever you click. I was having a problem where whenever you would click inside the field another text field would appear but i managed to fix that. I have one last major issue that I just can't solve. I know ou can't use blur() and focus() as arguments (though it would be nice) but i need to find a way so that after you enter text into the input field and out click, it just blurs the input box and doesn't create another until the user clicks again.
Just create a variable to keep track or only use a certain ID for the input you create, then check for that variable or input element before creation..
if(!$("#myDynamicInputElement").length){
//TODO: Create your element..
}
I have been working on the last bit of my php + ajax based datagrid project.Everything works as I designed except one thing : I cannot stop user opening multiple selection boxes...
Go my research page and use username "ChenxiMao" and password "accedo" to login(without double quotes).
Note that perhaps the images used in this datagrid would not be displayed when page is loaded for the first time(weird, I am trying to fix this, browser incompatibilities, perhaps).
If you double click on one cell in the "CONSULTANT" column, a html select box would be displayed, you can select one consultant to assign him to this task or unassign the consultant from this task. No problem for this.
The problem is : when user leaves this selection box OPEN, he/she can still open another selection box... My jquery code cannot stop people from opening multiple selection boxes.
You can ctrl-U to see the source code on this page, and check the content inside the "gridview-helper.js" for what I have been done.
I want to let user only open a single selection box. When he/she leaves the cell, the selection box should be closed, without changing the html inside...
Puzzled, screwed up for this afternoon...
Thanks for any suggestons in advance!
JavaScript is single-threaded, so you can add a mutex variable and check its value before opening a new select box.
At the top of gridview-helper.js:
var is_choice_visible = false;
In your double-click handler:
$(this).dblclick(function()
{
if (is_choice_visible)
return;
is_choice_visible = true;
...
For your select box, add an onblur handler which sets is_choice_visible back to false and deletes itself.
Unrelated tip: Growing a string in a loop is slow on older versions of Internet Explorer. It's more efficient to append to an array and join the array, e.g.:
var html = ["<select>..."];
for (var i in consultantnames)
{
html.push("<option>...</option>");
}
html.push("</select>");
return html.join("");
Have you tried using the onmouseout event on the cell, and removing the child dropdown box element if mouse out is triggered? Seems that should work.