I need to create following functionality in javascript:
User should be able to get into text selection mode (by long pressing a word or clicking a dedicated button, how user goes into text selection mode is not important)
Once in text selection mode, two handles should appear on the start and end of selection which will allow user to extend the selection (users will be able to drag the handle images to extend the selection)
Selected text would appear in highlighted mode
Following is an example of the same functionality in Android 3.0 browser:
I need to create the same functionality using Javascript. I tried to searhc "javascript text select" but could not finad anything useful. Can someone suggest me how to do this or point me to any existing work? Thanks much.
What you are stating is a very broad user interface problem and you cannot solve it with few lines of Javascript code. I am pretty well aware of existing mobile Javascript libraries and I have not yet come across a productized solution, because the problem in fact is really difficult.
You need to have zoom/follow finger feature which applies complex heurestics to where the cursor actually should go
Moving markers alongside in arbitary HTML text is troublesome - you need to have a way to split HTML to smaller pieces
Thus, I suggest you either
Write a cross-platform faux text selection library (this is not a programming question, but a daily job for a person who knows HTML5 and mobile very, very, well)
Post this a freelancher bounty job <-- a suggestion
From a technical point you
can disable native text selection of devices (-webkit- special CSS styles)
probably cannot interact with native clipboard through Javascript on mobile
older Android devices lack proper Javascript events for the complex touch interaction in the first place
Related
I have recently inherited a web app using the EXTjs framework. I'm not really that familiar with it, but I have been learning it the best I can over the last few months. I have recently been given an assignment to update the entire application to comply with 508 Compliance, that is to say, make the application accessible for those with vision issues. I was given a deficiency list that gives examples where the software doesn't comply for various reasons. I guess I need a little help in understanding how this works. I've looked at the EXTjs documentation and it does say that it has accessibility features available in it, but I haven't really been successful in finding what to do. Those using the application are using the JAWS screen reader if that makes any difference.
A few of the things I know that I need to fix are:
Some elements need to be tagged as a heading so the screen reader can read it programmatically an to give the web page some structure.
When tabbing around a table/grid the data is read without any context/header information.
Color is used as a visual cue to indicate action(ie required field). I'm supposing this is for color blindness and some other visual cue needs to be added.
Modal windows can't be resized or moved by the keyboard.
Needs a mechanism to bypass blocks of content that are repeated on multiple pages.
Pages do not have titles(this is a single page app).
Keyboard operable UI elements do not have a visible indication of focus(radio button group doesn't show focus, even if selected one does).
Name/State of UI elements in the product can't be understood(ie the name of expand and collapse buttons are read as expand panel or collapse panel by assistive tech without context to what is being expanded or collapsed).
There are many other issues, but this gives some idea of the scope of the changes required. As I have stated above, I've done a lot of examination of the EXTjs documentation at their site as well as google searches on how to make applications more accessible. But I'm not really seeing what I need. Much of this application is just configuring EXTjs templates and then loading them with much of the meat of the application being handled by the EXTjs built in js code.
I would appreciate any help, useful sites with examples, or code snippets on how to accomplish some of this. I'm hoping that once I get started with some examples, I can just go on from there.
Thanks.
Most items come with aria support. Personally I would add look into each component and add an automated aria support. E.g. button ==> aria.label = button.text
Take a look at ariaAttributes, ariaDescribedBy, ariaLabel and ariaLabelledBy. Some have ariaErrorText, ariaHelp.
Next take a look at tabIndex. You want to ensure that you can use TAB to jump through the fields, buttons, ...
I'm new around here, but I'm eager to learn and develop new things. As most of you guys are already pro`, I would love to be assisted if someone has time.
Here is the deal. I've started to play a bit with the Firefox Add-On SDK, and I want to develop a specific add-on / Firefox extension.
Case 1:
I want to develop an add-on that creates a new icon in the toolbar (This is not a big deal.)
I want to develop an add-on that highlights on a page some specific text (This will variable according to the domain) and when hovering it, to display a small pop-up with different info about the specific text.
Case 2:
I want to develop an add-on that creates a new icon in the toolbar (This is not a big deal.)
I want to develop an add-on that implements a new context element (a new option when right clicking) to search info about the selected text and display it by the same pop-up referred in Case 1.
Do you think that at least 1 of these 2 cases can be developed using Firefox Add-On SDK using modules as context-menu, widget, panel? I'm asking these because after looking over those modules I've seen some different results than the ones that I was expected.
While waiting for some tips I'm gonna try harder to get it done. :)
Thank you very much and I would really appreciate if someone can help me.
Kind regards,
Marius
I want to develop an add-on that creates a new icon in the toolbar (This is not a big deal.)
See the ui module in particular ActionButton.
I want to develop an add-on that highlights on a page some specific text (This will variable according to the domain) and when hovering it, to display a small pop-up with different info about the specific text.
Read up on Content Scripts.
In a content script, you'd then use DOM manipulation to insert highlights. SO has a bunch of question on how to find text in a DOM node or how to do popups in HTML.
You can use jQuery in content scripts, if you like (although I personally prefer not to... Why take the performance penalty of loading a library to deal with cross-browser compatibility issues when you're not developing cross-browser?)
I want to develop an add-on that implements a new context element (a new option when right clicking) to search info about the selected text and display it by the same pop-up referred in Case 1.
Use the context-menu module to add new menu items, and the DOM manipulation.
So i've been doing some research but i've failed to solve the problem i am facing right now. Is it possible to somehow send a request for translation of the web-page to google translator by clicking on an element from 'ul' list ?
Don't tell me to use google translate widget, that's not what i am looking for. I tried to style it, but the 'option' tag couldn't be styled, i tried to set style by using some JQuery plugins, but then the translation doesn't work.
Also tried JQuery translators, but they have a really poor quality when it comes to translating from polish to any language and to polish from any language, the page is written is polish, so no way i can change it
Just a suggestion but perhaps you'd find it useful to provide the translations yourself and then have a client-side language translator? I wrote this plugin for exactly that purpose because the quality of automatic translations is not up to the level I wanted.
https://github.com/coolbloke1324/jquery-lang-js
That plugin has language persistence across pages, allows both phrase and regex-based matching, can handle any number of language options and allows you to trigger the change from a click event as you described.
You can see it being used live on https://www.orbzu.com (look top-left of the page for the flag icon and then select a new language to see the text on the page change automatically).
Im annoyed that this doesn't seem possible, but i wanted to check with the community to see if someone has developed a working version of something similar.
I'm a graduate student and spend a LOT of time online researching, and when I find that sweet paragraph that makes just the argument I've been searching for, I've gotta copy and paste it out of chrome (on mac os x) and into word (2011). I've built a "strip all formatting" macro that works well enough, but what i would like is a pipe from chrome into my open word document that gives me 1 key "send selection to word document" (like ~).
I've got the js working to get selected text and move it around, but i cannot seem to open the document i want to move the text into. Ideally, this would work as a chrome plugin (I've built them before), but I've seen no documentation about JS => Word on other platforms (obviously activeX controls dont work for me).
Any suggestions?
You can use an automator service to do this. Open Applications > Automator, and then create a service, which receives selected text (one of the built in defaults). This works in any app, and is accessible via the Services menu when you right click.
You can do this easily with TextEdit for example using these two actions:
Service receives selected text
New Textedit Document.
I've just tried it to confirm it. It can also copy rich text etc (including links) if you want. I imagine something similar is possible with word, and there is a built in service already to do the same if you have installed TextWrangler (another word processor).
JavaScript is contained within the browser for security reasons, so you will not be able to do it with JavaScript.
The best thing that i can come up with is to write a 'bot' kinda thing that just coppy pastes, so not for in an extention.
When one enters a question on StackOverflow, just above the text entry box is a set of Javascript buttons to do things like make text bold or italic, and to insert pictures and links.
I want to create a similar set of buttons for my own custom Content Management System (CMS). I was hoping that this would not be the kind of task that I would have to re-invent the wheel for.
However, the only set of buttons I have come across is TinyMCE, which, to say the least is incredibly feature-bloated.
I only need the ability to select text, and then have it be modified to be bold, italic, or a link, using the syntax of my CMS.
After some examination, it seems to me that paring down TinyMCE down to that level would be more difficult than writing from scratch.
Is are an existing toolbox that I can use to help me create these kinds of buttons (or perhaps a tutorial) that is ideally open source and not overly feature rich?
Note that I am not that great at Javascript programming, so while most programmers would probably assume this was easily done from scratch, I need a starting point to see how it is done.
Thank you for any advice.
These are some of the tools like TinyMce , all are open source.
Alternative to Tinymce