I have a bubble that pops up when you select some text on a document. Now when you select some text, the body click event fires too. On body event, I have code to hide the bubble that pops up when you select some text. The problem is, I want to show the bubble when the text is selected (even though body event has fired) but I want to hide it when clicked anywhere except inside the bubble.
$('body').live('click', function(e) {
if($(e.target).parents('.discuss').length == 0) {
$('.discuss').fadeOut(150);
}
});
... there is the body event code, now the discuss bubble shows up when some text is selected on the body, the discuss bubble is positioned near the selected text
In the body click handler look at e.target (srcElement in IExplorer). If the target/srcElement is different than the element containing the text you will now that the user has clicked somewhere else in the document and will close the bubble. If the target is the text element itself just return, no need to do anything.
I dont understand clearly by reading your question description.
But as your header title says on "second clik".
flag=0;
Why dont you set a flag value on first click on a hidden field.
(flag=1)
Then on second click check the hidden field value and do what you want. if(flag==1) do it
Show hide or whatever.
Dont forget to reset the value again.
have you tried using mouseup instead of click on the body? that way the bubble will only appear when visitor selected the text and releases their mouse...
Related
I have a scenario where I need to put focus on h1 of overlay and not on next tabbable element.
Overlay is displayed after service call on blur from 1st input text.
Whenever blur event is fired focus is going to next tabbale element i.e. 2nd input text then h1 of an overlay. How can I resolve this issue?
I have a hack to put focus back on 1st input text then on h1 of overlay but I don't like this solution.
I have also tried preventDefault and stopPropagation() which don't work.
try setting tabindex of input2 lower than tabindex of input1, focus on h1 on display of overlay
Why browsers do not track the focusable elements, so that when we call blur on some element, the element, which was focused before, receives focus, and not the body?
Assume, there are several focus-capable elements on the page. The first one should be focused on load. Setting autofocus handles this. Later on some event we manually focus the second element, and again, later, on some other event, we blur that second element. The expected behaviour would be that previous focused element receives focus. But actually the body element gets activated (document.activeElement === document.body)
Setting <body tabindex=-1> has no effect.
Here is a simple demo: https://jsfiddle.net/9oenrguv/ The behaviour I would expect is: when we click the button, after a second the first input is focused, but instead body element is focused, though the first input was previously focused and also has autofocus attribute. Could somebody please explain, why body is focused, and if there is any way to prevent this?
Is the manual tracking of the previous active element is the only one way to achieve this?
Thank you.
I have an HTML file, in which I am creating a text area when user clicks inside a table cell. Basically, it is a datagrid created using table, and when user clicks on one, it removes the text in cell and replace it with a text area. Below is the code I am using in table's onClick handler.
summaryTableElement.innerHTML = "<textarea id='summaryTextBox' value='TestString' onclick='doNothing(this.id)'> </textarea> <input type='button' onclick='saveSummary()' value='Save' /> "
This is all working fine, and it creates a text area perfectly. It bugs out when user clicks on the text area to modify the data. In that case, the click event handler of the text area never fires. Instead, the table receives the click event, resulting in creating another text area. No matter what user does, the text area receives no event at all.
Now, I am confused as to what to do here.
Edit:
I checked again. turns out, it is firing the child's click event handler. But, event is propagating to parent element too.
Edit:
I tried adding following condition in parent's click event handler
if (id.toString() == "SummaryData")
but this returns true even for child element.
Use a flag indicating the click once. If it is clicked already, then don't run the function. Now the problem of the text area. in your dynamically getting created html code, add an onfocus event handler insteaad of onclick. Also the 'id's cannot be the same for all the text areas you are adding dynamically. Use something like "id='xyz"+i+"'" where 'i' represents a count which is the number of the text area getting added.
I'm trying to make a simple rich text editor, and I'm getting stuck at the stupidest thing. For the bold buttons, instead of having a button, I'm trying to make it so that, near the top of the screen, there are several spans, and each one has a thing you can do to the text, such as bold, italic, underline, etc, and when you click on one I want it to toggle if the selected text in the contenteditable div is bold, italic, or underline. Basically, instead of buttons, I want to simply click on a span to toggle those things.
So I put a whole bunch of spans in the right place and put event handlers on them that did the appropriate execCommand. However, when the user clicks on the spans, it cancels the selection in the contenteditable div, so that the execCommand doesn't do anything. I tried setting the css user-select to none (I also used prefixes), cancelling the selectstart event, cancelling the click event, but it still cancels the selection when I click on it
You can see the jsfiddle here
I don't want to use a button instead of a span or anything. I don't want to do it in a hacky way (such as copying the selection on input, and then recreating the selection after the click) either
There's a few ways to achieve this. You can prevent the default mousedown behaviour like below:
document.getElementById('bold').addEventListener('mousedown', function (e) {
e.preventDefault();
});
FIDDLE
You can also just use the semantically correct elements such as <button> rather than <span>. If you do not like the way <button> element looks by default just re-style it.
FIDDLE
I have a div that, when clicked, I want to an action to happen.
That div contains some text.
If the user highlights the text (e.g. they are trying to copy/paste, rather than actually click it) then I want to cancel the onclick event so that the action doesn't happen if they were just trying to highlight, not actually click.
Is there a way to do this with JQuery or plain old Javascript?
Try detecting the onmouseup event:
document.onmouseup = doSomethingWithSelectedText;
If the text is highlighted, you will have a value in window.getSelection use that to determine what kind of event you should be firing.
Check out this post / fiddle:
Javascript: How to detect if a word is highlighted
http://jsfiddle.net/timdown/SW54T/