I know there is a onselect event which works on input and textarea elements.
I want to show a popup like google dictionary does when something is selected on body element.
What are some possible options ?
Blue area is what I mean by selection .
You could try JQuery's mouseup command - it will be triggered when you release the mouse button press at the end of your selection.
Someone else's example on JSFiddle: http://fiddle.jshell.net/g59KM/12/
$(document).ready(function() {
$('#textarea').mousedown(function() {
$("#alerts p").append("<span style=\"color:blue;\">Mouse down. </span>");
});
$(document).mouseup(function() {
$("#alerts p").append("<span style=\"color:red;\">Mouse up. </span>");
})
});
...which illustrates my point - select any of their text then when you release the mouse an event will be called, which you could use.
The JQuery instruction: is here
Related
Example
https://jsfiddle.net/e80tL2kL/
To start with you can click the text in the bars and they will all
open up google in a new tab.
Proceed to click the edit button and you will be able to drag the
tabs around but not be able to click the text to open google.
Click edit again and it should disable movement and enable links
again.
However clicking the text of a bar which has been moved does not open the link on the first click but clicking it a second time will.
For this example I'm using
$('a').attr('onclick', 'return true;');
to re-enable links.
However I have tried using:
$('a').attr('onclick', '');
$('a').attr('onclick', null);
$('a').attr('onclick', '').unbind('click');
$('a').prop('onclick',null).off('click');
All of which have the same result.
Why does this "first click doesn't work after moving" happen and how can I fix it?
Probably a bug with jquery-ui, but you can fix it easily. There's a bind that doesn't get unbind on disable. You can unbind it manually like this:
} else if (edit == true) {
edit = false;
$("#sortable").sortable('disable');
$("#sortable").unbind('click.sortable');
$('a').attr('onclick', 'return true');
}
https://jsfiddle.net/rh27oxph/1/
Just like title says, I'm trying to keep the input text focus still when click on one div.
Specifically I'm trying something like what happens in Google Livesearch (Not Instant Search) (When you type there, shows a ten items list.) (I can't put an image).
When you click on "Google Search", still keeps input text focus.
I'm trying but always lose the input text focus.
Someone knows how to achieve this?.
P.S: With click I mean the mousedown event.
Thanks in advance.
You can try to refocus on your text input when a mousedown event is caught on your division.
Here is a quick example using jQuery:
$("#my-division").on("mousedown", function (evt) {
$("#my-input").focus();
});
Check this solution:
First, store the last focused element:
var lastFormElementFocused = 'my-first-element-id';
$(document).on('focus', '.your-class', function() {
lastFormElementFocused = $(this).attr('id');
console.log(lastFormElementFocused);
});
After that, in your onClick event:
$(document).on('click', "div.your-class", function() {
$("#" + lastFormElementFocused).focus();
var element = $(document.activeElement);
// Do with 'element' what you want
});
Note that you need to have an assigned id in each element you focus.
I am working on a small web application on which users get a tooltip with options after selecting a piece of text from a div (contenteditable = true).
If the user select a text, the tooltip fadesIn on "mouseup" event. The event mousedown is used to fadeOut the tooltip.
Everything works like charm as far as the user doesn't select the whole text. If (s)he does so, and then clicks somewhere else on the div, the tooltip fades out and in again.
An example of this behaviour can be found at: http://jsfiddle.net/7NEk3/275/
The events are coded as follows:
$('#show-bubb-text').mouseup(function(e) {
var selection = getSelected();
if (selection && (selection = new String(selection).replace(/^\s+|\s+$/g, '')))
{
selectionImage.attr('href',
url.replace('{term}', encodeURI(selection))).css({
top: e.pageY - 30, //offsets
left: e.pageX - 13 //offsets
}).fadeIn();
}
});
$(document.body).mousedown(function() {
selectionImage.fadeOut();
});
Select for example "CREATE A LOGO", and you'll see that a tooltip fades in, if you click somewhere else in the div, the tooltip will fade out.
Select now the whole chunk of text, i.e. from 'SMS' to '/'. The tooltip will appear as expected, but if you click on either the selection or on the non-selected part, the tooltip will fade out and back in.
Is this an expected behaviour? What am I doing wrong?
EDIT: This seems to work well on Firefox. However, it does not on Chrome or Safari.
This is occurring when you click within the active selection. You can recreate this by making any selection and click inside the active selection. The reason for this is due to the order in which the events are called. The active selection isn't cleared before you call your 'getSelection' function. Therefore, your application is detecting an active selection even though the selection is cleared immediately after you 'mouseup'.
One solution could be clear the selection on 'mousedown'. Something like:
function clearSelection() {
if ( document.selection ) {
document.selection.empty();
} else if ( window.getSelection ) {
window.getSelection().removeAllRanges();
}
}
Then in your 'mousedown' function:
$(document.body).mousedown(function() {
clearSelection();
selectionImage.fadeOut();
});
I have built a modal box, which uses a cover-all div background to fade out the content and allow the user to click off the box in order to close it. I do this by capturing all of the clicks, but filtering out any that are over the model box.
$('body').on('click', '.cover_slide > *',function(e){
e.stopPropagation();
});
$('body').on('click', '.cover_slide',function(){
helper.cover.close();
$('body').off('click', '.cover_slide');
});
I would like to be able to interact with some elements on my modal box with clicks, but I can't seem to figure out how to do that AND still have my 'click off to close' function. At present all clicks on the box are ignored.
There is no need to bind the click multiple times. Try using this snippet. Note that you might have to change the closest selector depending on what the element really is
$(document).bind("click", function(e) {
if($(e.target).closest("div").hasClass('coverSlide')) {
//do stuff if someone clicks the box
}
});
I am using jQuery 1.3.2.
There is an input field in a form.
Clicking on the input field opens a div as a dropdown. The div contains a list of items. As the list size is large there is a vertical scrollbar in the div.
To close the dropdown when clicked outside, there is a blur event on the input field.
Now the problem is:
In chrome(2.0.172) when we click on the scrollbar, the input field will loose focus.
And now if you click outside, then the dropdown won't close(as the input has already lost focus when you clicked on the srollbar)
In Firefox(3.5), IE(8), opera(9.64), safari() when we click on the scrollbar the input field will not loose focus. Hence when you click outside (after clicking on the srollbar) the dropdown will close. This is the expected behaviour.
So In chrome once the scrollbar is clicked, and then if I click outside the dropdown won't close.
How can i fix this issue with chrome.
Well, I had the same problem in my dropdown control. I've asked Chrome developers concerning this issue, they said it's a bug that is not going to be fixed in the nearest future because of "it has not been reported by many people and the fix is not trivial". So, let's face the truth: this bug will stay for another year at least.
Though, for this particular case (dropdown) there is a workaround. The trick is: when one click on a scrollbar the "mouse down" event comes to the owner element of that scrollbar. We can use this fact to set a flag and check it in "onblur" handler. Here the explanation:
<input id="search_ctrl">
<div id="dropdown_wrap" style="overflow:auto;max-height:30px">
<div id="dropdown_rows">
<span>row 1</span>
<span>row 2</span>
<span>row 2</span>
</div>
</div>
"dropdown_wrap" div will get a vertical scrollbar since its content doesn't fit fixed height. Once we get the click we are pretty sure that scrollbar was clicked and focus is going to be taken off. Now some code how to handle this:
search_ctrl.onfocus = function() {
search_has_focus = true
}
search_ctrl.onblur = function() {
search_has_focus = false
if (!keep_focus) {
// hide dropdown
} else {
keep_focus = false;
search_ctrl.focus();
}
}
dropdow_wrap.onclick = function() {
if (isChrome()) {
keep_focus = search_has_focus;
}
}
That's it. We don't need any hacks for FF so there is a check for browser. In Chrome we detect click on scrollbar, allow bluring focus without closing the list and then immediately restore focus back to input control. Of course, if we have some logic for "search_ctrl.onfocus" it should be modified as well. Note that we need to check if search_ctrl had focus to prevent troubles with double clicks.
You may guess that better idea could be canceling onblur event but this won't work in Chrome. Not sure if this is bug or feature.
P.S. "dropdown_wrap" should not have any paddings or borders, otherwise user could click in this areas and we'll treat this as a scrollbar click.
I couldn't get these answers to work, maybe because they are from 2009. I just dealt with this, I think ihsoft is on the right track but a bit heavy handed.
With two functions
onMouseDown() {
lastClickWasDropdown=true;
}
onBlur() {
if (lastClickWasDropdown) {
lastClickWasDropdown = false;
box.focus();
} else {
box.close();
}
}
The trick is in how you bind the elements. The onMouseDown event should be on the "container" div which contains everything that will be clicked (ie, the text box, the dropdown arrow, and the dropdown box and its scroll bar). The Blur event (or in jQuery the focusout event) should be bound directly to the textbox.
Tested and works!
I was facing the same situation/problem and I tested the solution from "ihsoft" but it has some issues. So I worked on an alternative for that and made just one similar to "ihsoft" but one that works. here is my solution:
var hide_dropdownlist=true;
search_ctrl.onblur = function() {
search_has_focus = false
if (hide_dropdownlist) {
// hide dropdown
} else {
hide_dropdownlist = true;
search_ctrl.focus();
}
}
dropdow_wrap.onmouseover = function() {
hide_dropdownlist=false;
}
dropdow_wrap.onmouseoout = function() {
hide_dropdownlist=true;
}
I hope this will help someone.
Earlier also I faced such situation and this is what I have been doing.
$('html').click(function() {
hasFocus = 0;
hideResults();
});
and on the input field i will do this
$('input').click()
{
event.stopPropagation();
}
So this will close the drop down if clicked anywhere outside the div (even the scrollbar).
But I thought if someone could provide a more logical solution.
Could you maybe set the blur event to fire on the drop down div as well? This way, when either the input or the drop down loses focus, it will dissapear...
I'm curious...
You're using the last version of every browser, why don't you try it in chrome 4.0.202?
instead of detecting the blur, detect the document.body or window click and grab the mouse point. determine if this mouse point is outside of the menu box. presto, you've detected when they clicked outside the box!
I solved this by doing the following:
#my_container is the container which has the "overflow: auto" CSS rule
$('#my_container')
.mouseenter(function(){
// alert('ctr in!');
mouse_in_container = true;
})
.mouseleave(function(){
// alert('ctr out!');
mouse_in_container = false;
});
And then:
$('input').blur(function(){
if(mouse_in_container)
return;
... Normal code for blur event ...
});
When I select an element in the drop down, I rewrite the code as:
(>> ADDED THIS) mouse_in_container=false;
$('input').attr('active', false); // to blur input
$('#my_container').hide();