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.
Related
Posting this question largely in the hopes of confirming my suspicions of the behaviour, and thus documenting it for other programmers. (Since I found no record of this anywhere online)
I have a site that I'm building, whose nav bar has the following properties:
The horizontal section is a <ul> of <li>s and some of the <li>s hav both:
A n<a> element taking you to that topic.
A hover CSS selector that triggers display:block on a submenu - a nested <ul> which then drops down vertically.
On a desktop this all behaves as I'd expect: hovering on the key element exposes the submenu, and clicking on it executes the click event (in this case a normal <a> link.
But on an iOS device (tested on Air, Mini, iPhone 6) I found that tapping once would expose the submenu, and tapping a second time (when the submenu is open) will actually invoke the link on the controlling element.
Long-pressing will bring up the "link context menu"
This is exactly what I wanted it to do, which is GREAT! But I don't know WHY it is doing it. Whilst the Menu is Bootstrap based, but I can't find any bootstrap that is doing it.
Currently my best guess is that iOS Safari has some magic code that adds this (obviously desirable) behvaiour by deciding that if you have an element with :hover CSS (or, I imagine, an onhover eventhandler bound) and also a click eventhandler bound then the first tap will invoke, and keep invoked, the hover event, and the second tap will invoke the click event.
Question:
Does anyone know, confidently, what the source of this behaviour is.
Can anyone find any documentation of this behaviour!?
Would people like to contribute other platforms on which this does/doesn't work (Android tablets? Windows tablets? older iOS?)
The behavior triggering a clickable element such as an anchor link to fire only on the second tap in iOS, is described in this post by Nicholas C. Zakas (#slicknet). What triggers the double tap is a:
:hover Rule that either hides or shows another element using
visibility or display.
e.g.
<style>
p span {
display: none;
}
p:hover span {
display: inline;
}
</style>
<p>Tap me<span>You tapped!</span></p>
Apple also provides a documentation on Handling Events for reference.
No other platforms do this. It's iOS specific since at least version 5 (likely since version 1). Because it's not cross-platform, for Android and other touch devices, it has to be handled differently, and requires canceling click events etc... using JS. While I have managed to do this. I think it's fair to say that for CSS navigation menu bars to work with toggle elements that are both links and toggles is very difficult to achieve in a touch-only environment.
Another topic on the much discussed issue of button responsiveness when web apps are used on mobile devices.
I am listening for the touchend event to trigger a radio button being pressed. This solves the issue of making the button more responsive, however creates another problem.
jQuery mobile applies classes such as ui-icon-radio-on, ui-radio-on, ui-btn-hvr-a, ui-btn-dwn-a when the event occurs that get left behind. This makes the button look like it is still being pressed even though the event is over. It ends up being a decent effort to juggle removing and adding all those classes to make everything look right.
My questions is - does anyone have an elegant way of adding and removing the needed classes and attributes.
or
Is there a better way of going about this that will not involve "recreating the wheel" in terms of manually dealing with the styling based on event triggers. Would google's fast button be a better solution? (not sure how to integrate). Is there a simpler way?
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function (event) {
if($(this).hasClass('AdminSurv') && event.type=='pageinit') {
$(this).on( 'touchend', '.ui-radio', function(event) {
event.preventDefault();
/*uncheck all radios in control group to avoid multiple checks*/
var _control_group = $(this).parent();
_control_group.find("input:radio:checked").attr('checked',false);
/*check the radio*/
$(this).find('input').attr('checked', true);
/*much juggling of classes/attributes going on here
still looks like the buttons are being held down
this is a very sloppy example of my initial attempt*/
_control_group.find('label').removeClass('ui-radio-on');
_control_group.find('label').removeAttr('data-icon');
_control_group.find('label span span').removeClass('ui-icon-radio-on');
$(this).find('label').removeClass('ui-radio-off');
$(this).find('label').addClass('ui-radio-on');
$(this).find('label').attr('data-icon','radio-on');
$(this).find('label span span').removeClass('ui-icon-radio-off');
$(this).find('label span span').addClass('ui-icon-radio-on');
});
}
});
Many jQuery Mobile widgets accept refresh method, in which it is used to enhance markup of elements already existing in DOM or are inserted dynamically.
For checkbox and Radio buttons, .checkboxradio('refresh') combined with .prop() are used to enhance/modify the markup by adding/removing classes, for checked and unchecked elements dynamically.
Check
$('.selector').prop('checked', true).checkboxradio('refresh');
Uncheck
$('.selector').prop('checked', false).checkboxradio('refresh');
Demo
Reference: Checkboxradio Widget
SO...my app has a few issues, but I am DESPERATE to solve this one first. Any thoughts and suggestions are welcomed. Here is the app:
http://pocketfacilitator.com
Here's the issue - (NOTE, Firefox doesn't even allow this issue to fire, so maybe try Chrome or Safari, or a mobile browser):
From the home page, click on Portables > List All Portables. Now, click on any of the PLUS signs on the right (or two or three, doesn't matter). Now, check the "TODAY" page (in the very bottom nav bar). It will display the list of games you clicked on, but the way they are displayed is totally jacked. BUT...if you RELOAD the page (or just click the red CLEAR button), and repeat the process, it looks normal. What have I done wrong?
If you dare: in Firefox, it won't even let me add an activity -- clicking on the "+" button yield NO effect.
I appreciate any help. Cheers!
Try to call refresh() method on your listview after you dynamically add items
$(this).parent().appendTo('#todaylist');
$('#todaylist').listview('refresh');
See Updating lists
If you add items to a listview, you'll need to call the refresh()
method on it to update the styles and create any nested lists that are
added.
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');
});
There seem to be many questions/answers on how to change Twitter Bootstrap's dropdowns from appearing on a click to appearing on a hover. The builders of Bootstrap have a good reason for using click instead of hover -- hover doesn't work on most tablets & phones. However, one of the reasons why I am using Bootstrap is for its responsive features. I want one site that can be viewed on desktops, tablets and phones. Although clicking to get the dropdown is necessary for tablets and phones, it is not the expected behavior for desktops. I'd like my site to be responsive, but not at the expense of having to retrain the users!
Is there a way to serve up hover dropdowns for desktops and click dropdowns for tablets and phones?
I created a plugin (working on a couple refinements, but it definitely works as is) that allows dropdowns to work on hover, but it doesn't interfere with Twitter Bootstrap's click event, so you can safely bind both, which essentially means if there is a mouse, it will activate on hover, but if there's not a mouse (i.e. a touchscreen on a tablet), it will still activate when clicked.
I have the plugin hosted on GitHub: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown
It works by explicitly calling it, but I'm going to tweak the code to work with data-attributes in the near future.
You can with "Responsive utility classes"
http://twitter.github.com/bootstrap/scaffolding.html at the bottom of the page
I was searching exactly for this. And I've found better solution ( I think ).
We can easily do this using awesome Modernizr.js library.
We can detect the touch screen device by the below function.
function is_touch_device() {
return !!('ontouchstart' in window);
}
And then we can disable the URL in the hyperlinks dynamically via Javascript either by changing the location to "#" or by preventing the default action of the parent menu items.
Final code would be as below.
$(document).ready(function() {
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(is_touch_device()) {
$('#mainmenu li > ul').each(function (index, ev) {
/* Option 1: Use this to modify the href on the <a> to # */
$(ev).prev('a').attr('href' ,'#');
/* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
$(ev).prev('a').click(function(event) {
event.preventDefault();
});
});
}
});
For more details, you can see this link
I do believe someone will vote me UP :-)
Thanks