I have a questionnaire with buttons that show a tooltip on mouse hover and select on mouse click.
On mobile devices, ToolTip captures the first click to show the tool tip (equivalent of "hover" on computer) and the second click is used for button selection (equivalent of "click" on computer).
Now my question: how, on a mobile device, can I use the first click to both show the tooltip AND select the button ?
Is there a way I can e.g. propagate the event to make it act like on a computer ?
Or intercept the first event and trigger another event ?
Or should I act at the level of the button by catching the event and manually trigger tooltip showing ? (in which case I'll also need to figure out how to hide the tooltip when a button from another question is clicked).
Or perhaps JQuery-UI ToolTip is not adapted to my needs?
Thanks ahead for your views
LA
Finally I found an acceptable solution by manually hooking a click event to the buttons as follows:
$(".questionnaire_button").click(function () {
$(this).tooltip({
position: { my: "left+15 center", at: "center+20 center" }
});
$(this).tooltip("open");
})
Related
Is there a setting for highcharts tooltips where you can set it to display on click versus hover?
I have seen a lot of people discussing the tooltip staying on click but then there is still the hover present. Is there a way to disable the hover and use only click?
There is not a setting for that in Highcharts currently.
There is a feature request for this functionality here: http://highcharts.uservoice.com/forums/55896-general/suggestions/2607304-allow-the-tooltip-to-appear-when-a-point-is-clicke
Feel free to add your votes and comments.
UPDATE:
I have started using the jquery UI dialog for this purpose.
I disable the tooltip in Highcharts, and add a click event to the point in the plotOptions.
In that click function I call an external function, sending it the point object, and build my tooltip within the dialog.
http://jqueryui.com/dialog/
http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
You could also use Highslide for this purpose, and keep it all in the family.
http://highslide.com/
Working example:
http://jsfiddle.net/jlbriggs/LHZ3E/embedded/result/
Adding for those who has problems like me with useHTML: true and wants to display tooltip only on click and not on hover and wants to have only one tooltip on screen.
Here is a fiddle.
In a multi page template,I have three category pages (comedy, action, drama) that you can swipe between each containing rows of images (Seinfeld, Modern Family, Family Guy, Big Bang). Clicking on an individual image should open a dialog box (Seinfeld summary), close when you click the close button, and stay close. Initially it works, then what happens is based on the number images click after two, it opens and closes n -1 (clicking the 3rd image, opens the dialog box twice).
what could be the reason behind this?
Without your code I can be sure but I think I understand what is happening to you.
You have a problem with multiple event binding. Because of jQuery Mobile architecture it is possible to bind an event numerous time to some object.
I have an blog ARTICLE on jQuery Mobile page events handling and there's a chapter dedicated to this problem, just search for the chapter Prevent multiple event triggering. Or it can be found HERE.
In few words always unbind event before you bind it to some object to prevent this from happening:
$('#test-button').die('click').live('click', function(e) {
alert('Button click');
});
I have a <div> with some text and I would like the user to be able to natively select the text. The issue is that when I attach any mouse event handler to the element or it's parent (besides document element) the selection won't work any longer.
This could be observe on the site linked below. If you sink mouse events the selection won't work for the first line.
http://rafalrybacki.com/lab/selection_ios/
What happens after clicking "sink mouse events" is:
main.sinkEvents(Event.MOUSEEVENTS);
Checked with iOS5.
I would like make the text selecting work (keeping the mouse events). How to do this?
Even though Senscha claims ExtJS isn't supported on mobile devices, it works quite well. The only little annoyance that I have is that a sub menu of a popup menu requires two touches ('clicks') to activate.
It seems the first touch activates the menu, the second touch activates the menu option itself. In a menu with multiple options, clicking any option once results in all options being clickable.
I have a popup menu with checkboxes, these have the same issue. Click one activates (i.e., blue background) the option, click 2 actually clicks the checkbox.
I'm sure there's a way to tell the prototype of the menu to register the first touch as a click, but I've been unable to find it. Any help would be greatly appreciated!
I can't believe it. I think I found a way! Very hacky, but it works.
Ext.util.Observable.observe(Ext.menu.Item);
Ext.menu.Item.on('activate', function(obj, The, eOpts) {
if (obj.checkHandler) obj.checkHandler(obj);
if (obj.handler) obj.handler(obj);
if (obj.checkHandler || obj.handler) {
if (obj.up().closable) obj.up().close();
if (obj.up().up().closable) obj.up().up().close();
}
});
Later on I'll need to add code that actually walks the tree up to support multiple levels of submenus, for now one is the limit.
This whacky stuff could be replaced with simply calling the menu's Click() event, but that doesn't seem to work. I tried:
Ext.menu.Item.on('activate', function(obj, The, eOpts) {
obj.fireEvent('click');
});
with all flavors of parameters, but no luck.
Using jQuery Mobile (jquery.mobile-1.0b3.min.js). If i apply a click event to a form, the back button seems to get the click event binding as well. It does this no matter how specifically targeted to an element the selector is. For example:
Using this to set the back button:
Copy code
<div id="pagename-page" data-role="page" data-add-back-btn="true" data-back-btn-theme="b">
And this in a script file:
Copy code
$('#awards-details-page').live('pagecreate', function(event){
$('#awards-details-page input[name=submit]').bind('vclick', function() {
console.log('I'm going to be hijacked by the back button.');
});
});
Clicking on the back button will produce the message in the console when tested in a browser.
Every time you visit the page with the script, it will add another duplicate binding. Attempts to unbind the click event on the pagehide event worked with the targeted element, but back button's bindings persisted.
Can anyone shed some light on this?
Thank you in advance.
dont use vclick you will ge ghost, they have improved CLICK so just use that
also live is not bind... bind is to an element that exist, live is for all elements that have that shared property, before after and during. you past pages exist so you have a set of binded items now not just one for the page you are on. i would scrap the whole back button element and have your own clickable item, for this you can do your own back code and add attributes like data-backto = "#page1", you can then control better what happens when a back button is clicked, especially as android phones have there own back button too.