http://msdn.microsoft.com/en-us/vcsharp/aa336760#WhereSimple1
On this page, when the code part being highlight and release mouse, the popup with code will appeared, is it javascript. how to code this ?
Probably attach an event listener to onmouseup and check to see if the currently selected text is within the element, and if so, show the popup, populating it with the selected text. Most of that is pretty straightforward, but the part where you check to see if the text selection is fully contained within your target element will be a bit complex - mostly because you'll be different code for different browsers. For older versions of IE, look at document.selection and document.selection.createRange(). For others (including IE9) look at window.getSelection().
Related
I'm running into this problem on Chrome. When I use jQuery to focus on an HTML input with part of its text selected, my page jumps to the top instead of the element itself. I've created the following jsfiddle as an example:
http://jsfiddle.net/wzs821jg/3/
I've put margins above and below each input, enough to create a scrollbar. If your resolution is taller than mine (I'm on a laptop) and you have no scrollbar, just add more margin until you do.
Add enough text to the second input to cause it to scroll (overflow on the x). You can just add jibberish, such as "asdfkasdkjfhakjsdhfaksdjhfkajshdkfajshdkfajshdkfjah", which should work fine. Once you've gotten enough text, highlight a portion of it. Now there are two methods you can use to cause the page to scroll to top:
Click the button, which has a short jQuery listener that will focus on the second input.
Focus the first input and then press tab to focus the second input
On Chrome Version 41.0.2272.101 (64-bit) on OSX Yosemite, both of those actions should cause the window to jump to top instead of focusing on the second input. I've tried on Safari, and I can't recreate the issue. I've experienced different behaviors depending on where you select the text (outside, inside, or across the overflow) and the method used to focus. Play around with it a bit.
My question is: is this a problem with Chrome or am I doing something wrong?
Edit: I've filed a bug report with Chrome pointing to this question. Unless someone has an answer, I'm just going to assume it's simply a bug within the browser.
I have a scenario where I have some text, which should be user-selectable. The problem is, that there's an UI overlay on top of it, which prevents selecting text by default. The logical way to keep the overlay and still be able to select the text, would be to use synthetic events (use document.createEvent), but due to some reason, it doesn't work as expected.
The events seem to be delegated correctly and fire their handlers, but no text is selected. I have an example here, which is a rough simplification of the problem.
A few notes
In Firefox if you start your selection outside of the overlay, you are still able to select the text you want, even if it's under the overlay
When you have a normal selection in the uncovered area and you click on the overlay, it would be expected from the delegated mousedown event to remove the selection, but it doesn't happen
Am I missing an event that should also be delegated (I have mousedown, mousemove and mouseup)? Or is it some kind of a security measure by browsers to disable such behavior (refer to the note nr 2)? Any other suggestions on how to get the desired result? I know I should work around the current overlay solution altogether, but I'm already curious about the problem itself.
I have found two solutions for this problem:
"pointer-events" css property. Requires IE 9.0+ though.
Seems like guys from ExtJS solved it by event forwarding: demo, source, blog post
I would suggest to do the easy trick: put the transparent element with the same content as your text on-top of text itself and overlay. Here is the demonstration.
P.S.: From my experience any solution in the form you suggest will be awful. It will suffer from browser incompatibilities, side-effects of surrounding mark-up and styling etc.
When you tap and hold on a link inside a UIWebView (or mobile safari), it highlights the link in a gray text box.
You can control the styling of this with the webkit-tap-highlight css property.
What I'd like to know is if it is possible to either:
A. Listen to an event for when something is highlighted.
B. At a given time, find any elements that are currently highlighted.
Is this currently possible?
Looks like this guy figured it out using window.getSelection() and text.anchorNode.textContent.substr(text.anchorOffset, text.focusOffset - text.anchorOffset):
http://zaldzbugz.wordpress.com/2010/05/31/how-to-get-the-highlighted-text-in-uiwebview/
This article was also chosen as a working answer in another StackOverflow post.
Although the iPhone is a touch device, the mouseover event will be triggered when the element is highlighted. So, you can use javascript to listen the mouseover event.
I have an HTML file and I am opening it with Webkit.
I want to develop an app such that after opening it, I should be able to select some text and make it noted (say by pressing a 'Note Text' button).
When I press the button, a note image should appear on the right, but I cannot figure out the selected text position and I also have no idea about how to add a floating image on the right (maybe a div element)?
Can anyone give me a fragment of sample code about adding annotations/notes in Javascript?
I recently used this article on Quirksmode.org to get started with identifying a user selection in Javascript. Essentially, IE differs from other browsers in what information you get about the selection: Mozilla and other browsers provide the relatively powerful Selection, while IE provides a TextRange.
If you're able to stick to Webkit-based browsers, you have significant ability to identify selected text with the Selection returned by window.getSelection().
As for adding a floating image near your selected text, you can use the anchorNode property of the Selection to find the element near to which you'll want to add your image. To do the actual positioning of the image - yes, probably in a div, I recommend learning about positioning in CSS.
I have an html page where I set the focus on the first input element on load. I can see that the focus is set because I ask the background of the element to go orange and I can see the orange background. However, the cursor is not shown in the element.
Then when I click on the other input elements, I can see the focus move to them but still no cursor is shown. The cursor only appears when I use the tab key.
Please could someone explain to me why this happens and how I can make this cursor appear without having to use the tab key?
This is for IE8 only. (It's an intranet site)
Code as requested for how I'm setting focus:
$(document).ready(function(){
$('#rachel').focus();
});
EDIT
I didn't think to mention that the problem is happening on a popup window that looks to be implemented like a layer. Is it possible for layers to block the cursor?