Try to click in any empty area and drop, this will cause a blue background selection for the page elements like text and images,
To see this behavior clearly, click ctrl+A now.
I have a black theme in a website and some controls requires drag and drop, many visitors drag empty areas by mistake and drop which will cause the unsuitable default elements selection, is there any way to prevent this selection?.
How to disable text selection highlighting using CSS?
This website has a container div.. use your developer toolkit and assign the css rules that I gave you in the post above. You will not be able to select anything.
Related
I want to build a site where i can make some drag and drop elements on my website.
I want it to be something like the wordpress widgets. If the user wants to add another text box to a div area they can just drag it to that catagory and it adds an area to add text to there site.
I would like to to be all drag and drop but if they have to choose from a drop down where they want to send it (like box1 or box2 or box3) and then click a button that says add then that would be fine too.
How do i do this or is there a pre made one i can use?
Thank you for your help!
You can drag and drop items into something like a div. I found some information here: http://www.w3schools.com/html/html5_draganddrop.asp.
I have this text editor plunker example the problem is when I click the bold button or any other button the button doesn't show the state of the editable div, I know that could be fixed if I added a class to the button in the ng-mousedown event's function but that won't fix the problem if I click in an area with bold text that should add a class too to the correct toolbar button, maybe I should use somthing like a watcher but to watch what?
Update
OK, I did some digging, I'm trying to watch the position of the caret so I can apply the correct style to a toolbar buttons of a text editor I thought about $watchers but I never used them.
The example that i'm using is from this StackOverflow post there's a Jsfiddle in the post but I made a plunker example with AngularJS that shows how to get the caret position in the contenteditable div.
Is there a better way of doing this like get the DOM tree of the inner contenteditable div then make a map of elements and positions then use the data binding to control the state of the buttons in the toolbar?
Any help, thanks in advance.
I found the Answer in this SO post:
Rather than do all this by hand, the browser has methods to tell you if the current selection or caret is bold, italic or whatever: document.queryCommandState() (MSDN), for binary commands such as a bold and italic, and document.queryCommandValue() (MSDN) for commands with a value, such as font-related commands.
Within a UIWebView in an iOS app I have events firing in javascript when a link is pressed. There is also a grey box that typically appears over links when they are tapped. The -webkit-tap-highlight-color css property.
However, the hit area that activates this grey box is different from the element frame according to javascript. The result is that if I tap a certain distance from links the tap highlight color is activated but the event is not fired as you expect it to when you get this feedback.
Is there any way to correct the frame that activates the highlight color? or perhaps there is an easier way to just disable that and provide similar feedback another way?
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?
What is the default action happening when we drag over an image ?
When I drag over an image the cursor changes to a black circle with a line inside (in Firefox) I could block it by the code e.preventDefault() using jquery, but I didn't understand what is the default action happening when I drag over an image.
Thanks
The browser is telling you that the element over which you are hovering is not a drop target for the item being dragged.
jqueryui does implement draggable elements nicely and I believe they may handle that issue for you.
http://jqueryui.com/demos/draggable/
If you are trying to prevent drag or selection this post answers that:
Making an element unselectable using jQuery