Solved

Prevent Highlighting of page with left mouse click / drag

Posted on 2013-10-23
4
343 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 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 334 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 166 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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 334 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 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