How to to get currernt viewed text of web page using Javascript? - javascript

Is there any JS functionality to get the text that is currently viewed by a user?
Assume there is a page with some text (or a lot of text) and I need some javascript-written black box that can retrieve text (any text within div, p, span ... or any other tags) that is currently visible on user's screen.
This should take in account the fact that user can scroll the page, only currently viewed text must be retrieved.
Is that possible with javascript?
How can this be implemeneted? (primarily for use in Firefox)
Do you know any js library that provides this functionality???
Thank you =)

I've created an example for you: http://jsfiddle.net/manuel/kuHHw/
I'm using jquery with the viewport selector plugin. The example shows the visible div's in green and appends the innerHTML into the span at the bottom of the page

Related

How to create a chrome plugin/extensions with Bubble button (floating property)?

I am developing a chrome extensions, so that this plugin used to send the selected text from a site to a server and return the text back to client.
How can I make my plugin to float on the site, once the user select any text then my plugin must appear beside the selected text (Bubble), exactly like google translation plugin, which appears immediately when a user select some text.
I attached some picture to explain what I want exactly!
You can read out the current element where you select the text and from there you can put your icon with some distance.
Here you can find out how to get the current element:
How can I get the DOM element which contains the current selection?
With jQuery, you can easily put your icon next to the start of the selection. I have not tried id but this is how I would do that.

Place pointer on div or other page element in javascript

I'd like to help the site visitor navigate a page on my site. For this I'd like to have a javascript auto navigation that will place the pointer on different page elements. Is there a way in javascript to place the pointer on the desired page elements: div, button, span...?
Similar question asked here : Move Mouse Cursor Javascript
Basically your options are using the method in the linked post, or using libraries like http://amberjack2.org/ to visually guide your users around the page / site.
you can not move the pointer using javascript. you can only set the focus to an element of your choice.

Can we add an image to a text area? If so how?

I have a text area and when the user clicks a button say something like insert an image button the user selects the image to be uploaded and then i would like to add this image to the text area and the user can continue editing the text area, just like what orkut does. How do we achieve such functionality?
You can't display an image directly inside a textarea control.
The closes you can get is overlay an image on it, but it will not be part of the information in the textarea. That is, text will not flow around it and when posting the form it will not be included in the data for the textarea.
Perhaps a writable div (content editable) would suit your purposes better.
I don't believe this is possible. You should look into using a content editable div.
I don't think Orkut actually does what you are talking about either. Looks like they are doing the same thing that stackoverflow does - using a wysiwyg editor, albeit a nicely dressed up or homegrown version. TinyMCE and FCKeditor are the two I'm most familiar with. There are a few leads on this page too: html editor alternative besides tinyMCE

How to make a jsp page keyboard accessible and how to change the position of a popped up jsp page?

In the snap you can see that after clicking the Add application link, this dialog box in the left hand side is appearing. This dialog box is a .jsp page. I don't have the access to the css files that this jsp is calling.
Now my question is :
I want to pull it down for some pixels, without using the css. Is it possible? if yes then how ? As you can see that due to its appearance in that position the back ground links are not visible.
The links and the form field(search for a text) are not key board accessible. How to make them keyboard accessible?
if u don't have access to .css, then in your present jsp, put style to that modal window if it is having a div. as,
In <div ... style="margin-top: 100px;">
aligning the layers definitely need some style, else browser cannot identify it
I want to pull it down for some pixels, without using the css. Is it possible?
It /might/ be (the specifics would depend on how it was implemented), but CSS is very much the right tool for this job.
The links and the form field(search for a text) are not key board accessible. How to make them keyboard accessible?
That depends on why they aren't keyboard accessible.

How do I simulate browser 'select-all' in GWT

I've got a GWT application that displays largely text spans. I'd like to programatically select all of the text currently in the browser window (similar to pressing from the browser menu).
Can anybody give me a pointer to this?
cheers,
Ian
The select all function is not available for the entire DOM, however there is a selectAll message for TextBoxBase, so what is commonly used for large quantities of text where you automatically want to do a select all is to put the text inside a TextArea. If you don't like the look you can remove the borders from the text area and set it to read-only so that it would appear as just plain text.

Categories