The process is like this as below.
a user choose some text and make selection on it. then it's gonna be highlighted.
the user move her mouse focus on the textbox on the html.
the highlight on the text in the html is still there.
If the user move her mouse back to the text, click somewhere on the text zone, the highlight would be gone.
The user can make another new highlight.
Here's my question.
Can I keep the highlight even though I change the focus on other object from text in the html?
I don't want to use span for it since if I want to make new highlight, it's tedious to move the span back out. Is there another way?
Try this: http://rangy.googlecode.com/svn/trunk/demos/highlighter.html?serializedHighlights=
Related
I have some Forms in my project which tables. Those tables has records, where I have on each line, some text fields (informational), and some buttons. When I select one of those lines with the mouse, by clicking on one of the text fields the editing cursor is always twinkeling in the field where I clicked. I would like that my mouse click only select the line in a color, and doesn't edit the field (This cursor is not a real edit, because it's impossible to really modify something to the edited text, but it would be more professionnal to remove it)
Any solution? (VBA/Access Form design,...) Thanks a lot
Put a small (virtually invisible) control on the forms detail line. In each field you don't want them to settle on put a "got_focus" event that resets the focus to the virtually invisible control.
You can also use the on current event to set an unbound empty control to make the whole row change colour as per this explanation https://access-programmers.co.uk/forums/showpost.php?p=1480574&postcount=6 . Ignore the very complex code shown initially in the thread.
I have a page that has 2 steps to register a user.
After a user has filled out all fields of the first section, he needs to confirm the "Terms and Conditions" and press a button to confirm it.
After he has pressed the button, first section is becomes readOnly and the second section (more fields to fill) appears at the bottom of the page and the page does a scrollTo this new section.
I need to inform the screen reader that there is a new section on the same page but I don't know who can I do it.
I appreciate your help!
In your html have an empty span/div with aria-live="assertive". In your button click function, add the text you want the reader to announce to that span.
(This is the same function where you will be taking focus to that section.)
Don't forget to empty it outside the function to make it announce properly next time also.
Aria-assertive text will be announced each time it is changed.
Eg.
In HTML
<span id="announce" aria-live="assertive"></span>
<button id="btn">Click</button>
In javascript
$("#btn").click(function(){
$("#announce").text("Scrolled to a new section");
});
This is about focus management. You need somewhere to anchor focus that makes sense to the user and you need to then move that focus.
This is not an ideal solution overall, but lacking context for the larger objective I'll give you the bits to get this part functional / useful.
First, add this style so you can see where the focus is going (you can remove/change it later):
*:focus {
outline: 2px solid #f00;
}
Now as you tab through the page you can see where the focus lives.
Then in your script where you create the new form (I recommend you actually just hide this section and display it instead of writing it in via JS, but I understand this may be a demo), update the <h3> to be focusable by adding an id attribute and then a tabindex so that you can drop focus on it. I use the <h3> you already have since it provides the context for the user and in this case overrides my general distaste for using tabindex on non-interactive elements.
<h3 id="second" tabindex="0">
Then add bit of script after your setTimeout() that moves the focus to that element (thereby ensuring it has been rendered and can receive focus):
var secondForm = document.getElementById('second');
secondForm.focus();
Now when you click the "Continue!" button, the page scrolls and the heading will receive focus, get announced (you can add instruction text, etc), and the user may continue.
You will probably need to massage the script a bit, maybe stuffing it in its own timer function to be certain it only fires when you want, but overall the general concept is in there.
I made a pen to demo it.
You click on some text, and that text triggers a div to show up, a form with other words, hopefully. Of course when you let loose of the right mouse button it disappears, I want to make it remain.
How, if you know?
In AS3 I have a button on the stage and above it I create a textbox box dynamically with code.
My problem is that the area that is under the text (i.e. that part of the button) is no longer clickable.
I have set:
tBox.selectable = false;
but that doesn't solve it.
Any ideas
Season greetings,
Luben
Use InteractiveObject.mouseEnabled:
textField.mouseEnabled=false;
If you set component.visible to false it does not interact with the user.
So, if you set tBox.visible = false then it will be invisible and the button will become clickable. Just a thought, but overlapping components is really bad UI design. If you have space on your stage, you should consider keeping them separate
The problem is that text field (despite it's transparent) is lying over button. To make click on button possible you have to be sure that button is in front of text. Take a look at AddChildAt method of DisplayObject. Objects with greater position index are lying over objects with lower position index. So all you need is to make sure that button has greater index:
container.addChildAt(button, 1)
...
container.addChildAt(text, 0)
P.S.: you may embed button dirrectly into text field using html <a href="javascript:..."><img src="link_to_image"><a/> or something like that.
I have a div element containing some text. When the user clicks a word inside that div I'd like to highlight just that word.
In order to do this I need to know what character position in the text the click occurred at, so I can then locate nearby whitespace and insert some formatting around the word.
Finding out where the click occurred within the text is the trick here. Is that kind of thing possible?
If your page is auto-generated, you might consider pre-processing the page by putting a <span class = 'word'> around every word in every selectable div. You might be able to this with javascript after the fact, and I think that would be your solution regardless, but pre-processing would make it easier.
The problem with relying on the absolute position of the word is that users can scale their fonts, which makes this task especially hard. By wrapping a span around every individual word, you can easily select which word was clicked by applying the click event to the span elements.