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');
});
Related
I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari
Hei guys.
I'm trying to add additional HTML elements below search box.. like checkboxes for filtering purposes.
But the added checkbox is not functional, you can't actually check it. I'm not sure but I think that search box is taking the focus from them... I created this jsFiddle so you guys can check it out.
http://jsfiddle.net/6wz2hLh0/
$("#e1").select2();
//Inserting additional HTML elements below search... filter in my case
$(".select2-search").after("<input type='checkbox'/>");
When the dropdown is open you can't even write in jsFiddle input's.
I tried commenting out various focus calls from source code with no luck.
Can any one point me in to right direction in source code what is causing this non stop search box focussing.
One thing to try is to have the checkbox element stop the mouse events from propagating. That seems to prevent them from getting to Select2, so Select2 cannot kill them.
$("<input type='checkbox'/>")
.insertAfter(".select2-search")
.on('mousedown mouseup click', function(e) { e.stopPropagation(); });
jsfiddle
I'm not sure but I think that search box is taking the focus from them
My guess is that this is because Select2 kills (stops propagation and prevents default) most events that occur within the dropdown. This is so Select2 doesn't leak events, but it also causes problems like not being able to catch click events or embed links.
When the dropdown is open you can't even write in jsFiddle input's.
This is because Select2 uses a mask that captures all events outside of the dropdown.
Can any one point me in to right direction in source code what is causing this non stop search box focussing.
You are going to want to look through the source for killEvent, as this is the method Select2 uses that kills events. As most browsers listen for the click event for native controls, you probably want to remove this killEvent for dropdown clicks.
When I use this setting I have one in a form in a dialog, and one in a form that is in a popup. The dropdowns look different.
When data-native-menu="false" the dropdown in the dialog appears in another dialog, which actually looks quite nice. I assume this will allow a more consistent look and feel accross devices.
However when I use this setting data-native-menu="false" on a Select in a popup it does not show the standard select, not the dialog.
Thanks
There's a good reason for this.
As you can see there are 2 kinds of select widget. First one uses native looking select box (one showed with data-native-menu="true"). Other one still uses native select box but it hides it and shows custom jQuery Mobile select box widget (one showed with data-native-menu="false"). This jQuery Mobile widget is shown as popup. This is important point.
Second, mentioned problem is unsolvable, at least from the point of current jQuery Mobile framework, and here's why. In few words, when working with jQuery Mobile popups, one popup can't open another popup. Two popups can exist in the same time. Thou you can always close one popup before opening another one, but this is not usable in your case. Because jQuery Mobile select widget is popup it can't be used inside classic popup widget.
If you don' believe me you can find it in official documentation here, just search for text: "Chaining of popups not allowed". And you will see this text:
The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.
On the other hand, dialog is a variation of a classic jQuery Mobile page, just with large margin and semi transparent overlay. It can be used to show popup, just like normal jQUery Mobile page.
I dynamically create a dialog page, and inject two radio buttons into it. The codes works well only for the first visit. In the following visits, strangely the radio buttons are not enhanced.
The codes are at http://jsfiddle.net/BScLu/. You can open, close, and re-open the dialog, to try out.
JQuery Mobile can get finicky when things are dynamically generated because you're inserting those radio buttons after the page has already been created in the DOM. Would you be able to insert them on the $('#myDialog').on(pagebeforecreate) event?
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