I noticed that in some websites, text selection behaves in a somewhat clumsy manner: the user click and hold the left button, and then move it in the direction of the text he/she wants to select, and then an entire portion of text on the opposite side of the movement gets selected.
This is not something that happen everywhere, and it's hard do describe, so I will provide an example. I've found this really cool article. Check the last line of it:
ENV:REDIRECT_STATUS is my new best friend.
If I click on the left of this line, and drag a little to the right (say, up till the :), I expect to have the ENV: portion of this line selected. Instead, what gets selected is the remainder of this line (REDIRECT_STATUS is my new best friend.) plus every comment and the sidebar! I am using Firefox 15.0.1, but already notice this behaviour in Chrome and Internet Explorer.
So what I want to know is, why this happen, and what needs to be done in order to prevent this glitch.
PS: please excuse me for not being clear on this subject; I found this issue really hard to describe on words.
It all has to do with the HTML markup and the CSS. The browsers tend to select the text in the same order as it appears in the HTML. Adding padding like Tim Down suggested can help user select the text because it gives a little margin of error in the text selection.
Related
First time posting here. I'm working on a mouse-and-keyboard disability device for a course bioengineering course and I've got a feature that I've got no clue how to begin implementing. Basically, I want to be able to "select" which are the K "focus targets" nearest to the cursor, draw boxes around them/highlight them (much like Chrome or Windows does) and, after deciding which "target" I want to select, focus/click that one. The goal is to use eye-tracking software to move a cursor and then blink/contract a muscle to see which are the closest targets (that way you can click on really tiny stuff which would be hard to select otherwise).
Not sure if "focus target" is the right word, I mean "what gets selected next" after you press Tab. If there's some "universal" way of doing this across apps that'd be great, but either a browser-only or Windows-only way would be great. The only workaround idea I've had so far is to press Tab a bunch of times, see what changes appear on screen, use OpenCV to detect on-screen changes and then see which are closest to the cursor, but that means the screen would spaz out and also wouldn't work if there's any sort of animation on the screen.
Thanks in advance!
You can get element by your cursor and then search the dom tree for input, and then you can use javascript to focus on that input
I have been working on a dynamic question thingee(technical terms) but of course there is always some small hop that you need to overcome.
My issue is that when I select 'show answer' on one of the question panels then the dividers add a massive white space between the rows.
Basically the amount of questions asked are managed by the width of the screen, then via AJAX is gets the questions from index.php?questions&a={insertwidthofscreen*4} this is done via javascript and works automatically.
The code that I have is the following, it is called 'math.php' as a temp test:
http://pastebin.com/MjGgSTYh
Everything is generated via the above file and no external connections are made, the database stuff is easy and I will use my old system that keeps a track of what has already been shown.
The idea is that all the DIVS change height when the answer button is clicked, the height is dependent on the answer, the answer could vary from 1 word to a paragraph.
Screen shots of what I mean with the white space.
http://imgur.com/KAOPHFI,wj0vWSg
there is two photos in that, I didn't see the next button for a while.
Cheers,
Leon
Since it isn't complete code (and therefore difficult for me to test myself) I'll just spitball this -- your qbox style (and possibly others?) have fixed width -- qbox is 200px. Should that be dynamic? (you also have width listed twice, but same value so it shouldn't matter in this case)
If you want to post more complete code that I can paste into a file myself, I'd be able to troubleshoot much easier.
Update:
I see what is happening now. The whitespace occurs when you click the answers in a particular order -- ie if you go through them left to right top to bottom, there is no extra whitespace, but if you click diagonally like in your screencap, the whitespace is added to allow for the length of the current answer, but doesn't reorder the previous cells to utilize the space.
In order to resolve this, it looks like you'll have to relocate some of the answer boxes when one answer is clicked on... just expanding them in a certain order will cause the issue you're seeing. Another option would be to have an answer pane/frame, on the side or bottom of the page, that shows the answer without expanding the question boxes themselves. I can't picture the algorithm you'd need to auto rearrange the boxes every time one is clicked...
I am really baffled at this issue because I have no idea where the problem is at, nor do I know where to begin.
I have two selects as you can see in the image. The one to the left is fine but the one on the right is much smaller than the content within it. I personally believe the issue is with the plugin but again, I don't know where to look.
Here is what I've done. I've disabled the plugin and the select box comes back to full size and the onchange event works as expected. When I enable it again, the onchange is more like a mouseup event because the instant you click on the select, you're forwarded over to another page; it won't allow you time to make a selection.
Can anyone shine a little joy over this way, please?
When looking at my website today, I noticed something strange. When clicking on an input field an entering one letter, the background slides a little bit. Unfortunately I do not know, why this is the case.
For making it more clear, here is a (poor-quality) GIF: http://makeagif.com/i/FRMlyL
JSFiddle link is here: http://jsfiddle.net/pesrd/
Maybe this is a well-known issue but I never had to deal with that.
I'm trying to work out how to do "type-writer scrolling" in JavaScript for a textarea in a web-page, but I'm having no luck. Essentially, what I'm trying to do is make a textarea that, when a new line is created, scrolls the document automatically so as to keep the new line in the same position as the previous line. I've seen something similar in desktop applications such as Write Monkey, but can't work out how to do it in JavaScript.
Thanks in advance for any suggestions!
Have a look at this page http://www.mediacollege.com/internet/javascript/page/scroll.html it shows basic scrolling methods
You could either scroll down by the height of your line (line-height css property) or scrollTo a specific point on the page
I have achieved something close to this, automatically expanding a textarea the way it is done on Facebook, but that was based on a conservative estimate, considering font size, box width, etc, to determine how many lines have probably wrapped. What you are describing is more exact -- down to the character.
The challenge here lies in knowing exactly how many lines are currently in the textarea and I can think of no way to do this. When you say, "a new line is created," you're talking about automatic wrapping and there is no way to read that or to trigger from it. It is part of the browser's hard-coded interpretation of many things, including your CSS.
If you went through with the whole typewriter theme, you would have a bell and the user would hit RETURN when they needed to, then you'd have your cue to scroll, but that sounds like a sure way to remind people why we no longer use typewriters.