How can I select text when I mouse over a div?
If you mean selecting the text as if you dragged over it, read this question. Whichever approach you try, to make it happen on mouseover, use .mouseenter():
$('#mydiv').mouseenter( function(){
my_superduper_selection_function(this);
});
Related
I'm trying to create a color picker and have run into a massive issue. Say for example I want to click on a div behind some text to change it's color, I won't be able to do this because the text will override the bg. What can I do here to make it so I can click the element without including the dom box that all elements have?
By running stopPropagation() it will only select the clicked element.
$(".ColorCardBackgroundView").click(function(e) {
e.stopPropagation();
document.getElementById('ColorCardBackground').jscolor.show();
});
I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?
The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.
In accordance with jQuery docs, "this event is limited to fields and boxes".
From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here
All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here
we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/
I am creating a Firefox extension that gets some information about an element on a webpage (say, the element's id attribute), upon clicking said element. I also would like to implement a feature in which hovering over the element will highlight it.
There are some existing solutions that essentially already do this. It seems that these existing solutions (such the "Select element with mouse" feature in Firefox's "Inspector" tool) essentially make use of two event listeners:
A mouseover listener: Highlights whatever element you move your mouse over an element.
A mouseout listener: Removes the highlighting when you move your mouse off of an element. (Otherwise, as you move your mouse over the whole page, eventually everything will be highlighted!)
I have attempted to make my own implementation which uses those two listeners (onmouseover and onmouseout). The highlighting is applied in the same manner as the linktargetfinder in this tutorial: whenever we want an element to be highlighted, we add a link-target-finder-selected property to the element's class attribute. A link reference to the CSS file is put into the head of the HTML document and refers to this CSS code:
.link-target-finder-selected {
outline: 2px solid red !important;
}
This implementation is very close to what we want, but unfortunately, there are a few (most likely related) issues.
First, with text boxes, the highlighting only applies when the mouse is on the border of the text box. Once you move into the interior of the text box, apparently the mouseout event is triggered -- the highlighting disappears, even though it is clear to you or me that the mouse is actually still hovering over the text box. It seems that I need to somehow force the mouseout event to not trigger until you move the mouse completely outside of the text box.
Second, I am having a very similar issue with multiple-select boxes. But I also want the behavior for multiple-select boxes to be somewhat nonstandard. The actual behavior is that a mouse-over will highlight the select box; the highlight will disappear as you begin to move inside the select box, and then the options within the select box will get highlighted as you move over them. Instead, I would like my add-on to function such that, upon entering the select box, the box will be highlighted, and nothing else will be highlighted or highlighted until the mouse leaves the entire box. The solution to this should essentially be the same as the solution to the text box issue.
Please let me know if you have any ideas for how I can fix these issues.
I just gave a solution to this:
https://stackoverflow.com/a/21598914/1828637
I do the same thing in my addon which i hope to release soon.
the mouseout event should not trigger when you move into the middle of a input field, thats weird.
if that really happens then on mouseover the input field, then add a MouseLeave event, (opposite of moustEnter event)
so still to the body add the event listener for mouseoever, and when an element is mousedover then it should un-outline the previously selected element (this is for robustness) and should add a mouseLeave event that will un-outline itself.
https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter
try this code, when i tried it i didnt have to do the trick you did for textboxes:
var lastBoxedEl;
function moused(e) {
var target = e.target; //experiment, try e.currentTarget, e.originanalTarget
if (lastBoxedEl) {
lastBoxedEl.style.outline = 'none'
}
lastBoxedEl = target;
target.style.outline = '5px solid red';
}
document.body.addEventListener('mouseover', moused, false);
you are using this in html right? i dont know how this would behave in xul
I want to find it out selected text on div which select by mouse. I found out .select() method for select. but its not accomplish my problem.
i want to something like :
<div id='mydiv'>Lorem Ipsum is simply dummy text of the printing.</div>
when i selected simply text using mouse selection.i found it out using jquery.
or something else another selected i want to get it.
you don't need to select it.
all you need to do is to add a click handler.
document.addEventListener('touchend', handleTouchEnd, false);
function handleTouchEnd(e){
console.log(e.target.innerHTML);// returns whatever is there in the div
console.log(e.target.textContent);// better option, as it returns text only
}
Gday All,
The following code displays a div based on the option that has been selected within a drop down box.
$(document).ready(function() {
$("#SomeDropdown").change(function() {
var theVal = $("#SomeDropdown option:selected").val();
$("#SomeDiv_" + theVal).css("visibility", "visible");
});
});
How do I display the div when the user hovers over the value within the drop down box? (Instead of clicking on it)
Cheers,
Michael
I don't think you can with a standard select box. You can only attach a hover event on the actual drop down as a whole (though you can attach it only if a value is selected in it).
If you must have this functionality, you may need to develop your own styled drop down... however this has it's own problems (usability for one).