?
Solved

Prevent Highlighting of page with left mouse click / drag

Posted on 2013-10-23
4
Medium Priority
?
357 Views
Last Modified: 2013-10-29
Hey all.

The code may be a bit too complex to add to jsFiddle, but here is my dilemma.

I have a "wizard" (created with jQuery) and when you press the "proceed" button, screens "flows to the right", making the next step visible. When proceed is clicked again, it flows the right again. If the "back" button is clicked, it "flows to the left".

It is just a series of <div>s side by side with a portion, each step, being visible at a time.

The problem is that when a user tries to highlight a field and "drag the cursor over the entire field", if they "keep dragging", the screen flows to the right with the expectation of highlighting all the text on the page, thus flowing past the other steps.

It is same as if you were to start at the top of a web page and drag all the way to the bottom, the entire page and its text are highlighted, with the page scrolling with the mouse.

Is there a way to prevent this?

I could auto focus / select the field once they click inside it in the hopes that they will stop "dragging the mouse", but I need more control over it.

I'd like to prevent the "left click / highlight" altogether from anywhere on the page.

Any ideas?
0
Comment
Question by:Webspeeder
  • 2
4 Comments
 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1336 total points
ID: 39594336
It sounds like you are going after one problem with another problem.

The type of code that can do that is going to be javascript/jquery that can easily be circumvented. It also gives a bad user experience.  I would suggest going after the real problem which seems to be scrolling.

Can you post a link to your page or create sample data if it is private and post the link to your sample page.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 664 total points
ID: 39594583
That's not how that setup would normally work so it makes me wonder how you have it setup?
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1336 total points
ID: 39594722
I would also add, there should not be a reason something is too complex.  Can you make a reduced test case for us with only the information we need.  This will explain in better detail on how to prepare sample data for us http://css-tricks.com/reduced-test-cases/
0
 

Author Comment

by:Webspeeder
ID: 39594789
I make use of a jQuery plugin for the "wizard". I'll try to put together an example in jsfiddle.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

616 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question