I have a jQuery UI tooltip and whenever I click the select inside of the tooltip it closes the tooltip.
Maybe it's related to this: mouseenter mouseleave and a select
this doesn't work:
$(".select_test").on("click", function(ev) {
ev.stopPropagation()
});
JSFiddle: http://jsfiddle.net/bXxdH/2/
I know that it is clearly visible that the select is bigger expanded than the tooltip high is.
Here is a screenshot from my site: http://prntscr.com/1dvgy3
It is also happening on my site even though the select is not too big.
Thanks.
Related
I am trying to use pickadate.js with highcharts.
It does work, but it requires clicking twice. It looks like highcharts first renders the date in a text svg element and there is accompanying input element that is 1px x 1px. When you click on the text SVG, it is replaced by the input element. Then you click again, and the pickadate opens.
I have tried binding pickadate to the g/text element via $(g.highcharts-range-input).pickadate(), but that doesn't work.
I have also tried using the input.onFocus event to trigger an input.onClick event, which works but then sometimes it goes through two click cycles- causing pickadate to open then immediately close:
$('input.highcharts-range-selector').bind("focus", function() {
console.log("focus");
$('input.highcharts-range-selector').trigger("click");
});
Fiddle:
https://jsfiddle.net/04svbnfd/
Thanks
Matt
I'm developing jQuery Mobile (jQm) app.
I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.
I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.
I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)
As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?
$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).
This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.
I hope this helps.
I have a panel and am trying to always show the panel when the window is wide. I don't need to have a close button at all - just always show it for wider windows.
jQuery Mobile Responsive Panel Dismiss issue helped, along with others, but no luck. I can get everything to almost work, but everytime I navigate to a new page, the panel animates in, which looks weird.
I am now looking at using a fixed div on the left that is not a jquerymobile panel. I can do this from the server. But it seems like a lot of effort to just keep a panel open.
Any hints?
Did you try something like this:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
I also encounter such a problem. Here is my solution:
add the following javascript into your header:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
and in your panel add two attributes:data-swipe-close="false" , data-dismissible="false"
then the panel will be always shown in your html
If you see this fiddle you will notice that in order to spawn the Tooltip the mouse has to leave and reenter the div foo after the Tooltip has been initialized.
I thought that maybe I could manually trigger the Tooltip using tooltip("open"). Unfortunately, the mouse tracking doesn't work when I do that. See this fiddle.
Does anyone have an idea how I could get the Tooltip to open with mouse tracking enabled without having to leave and reenter the div? In case you are wondering why I need to do this, I am working with WebGL in a canvas element that takes up the entire screen.
I am using the track: true option and I faced to the same problem in a different context. I am working with richfaces and have some ajax calls which rerender parts of a page.
After each rerender, i needed to rebuild tooltips present in the rerendered part so i decided to attach an event handler to the document and to rebuild thoses tooltips on mouseenter, and then manually open them by calling $(...).tooltip('open')... tooltips are displayed correctly but the mouse tracking doesn't work anymore.
So instead of using $(...).tooltip('open'), i trigger a mouseenter event and work with css class to init only once :
jQuery(document).on('mouseenter', '.tt', function() {
jQuery(this).tooltip({
content: function() { ... },
items: ".tt, .ttped",
track: true
})
.toggleClass('tt ttped')
.trigger('mouseenter');
});
I edited your jsFiddle, which rebuild tooltip each time you enter on #foo and another one which init tooltip only once (static content)
This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.
I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)
Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.
The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.
I tried event.preventDefault(), which does not work at all.
I tried event.stopPropagation(), which gives the partially working behavior.
and I tried return false, which worked the same way as stopPropagation.
I was wondering if anyone could provide any insight on this issue.
I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.
Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.
Thank you.
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
active: false,
change: function(event, ui) {
var id = ui.newHeader.find('input:last').val();
$("#status").text(id);
ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());
ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());
ui.newHeader.find('div.headerContainer span').hide();
ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();
ui.oldHeader.find('div.headerContainer span').show();
ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
}
});
$('input.name, textarea.desc').click(function(event){
event.stopPropagation();
});
$(".delButton").button({
icons: {primary: 'ui-icon-trash'},
text: false
}).click(function(event) {
//Display user friendly text
return false;
});
});
If someone is facing this issue, this is a little trick that worked for me.
PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.
The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.
SOLUTION: Just declare this in your document ready function
$(function() {
//some code ...
$("input, textarea").click( function(){
$("input, textarea").blur();
$(this).focus();
});
//more code ...
});
Confirmed (by me) working on IExplorer, Firefox and Chrome.
Seems to work fine in Chrome. This might be browser dependent.
"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"
Also fine in Chrome.