i'm still new to the mobile / fluid / responsive game and am having issues with the submenu on this site: http://www.medowsconstruction.com/
the click on mobile should replace the :hover function automagically right? seems to be the case with the standard Foundation theme.
i hadn't changed anything in those mobile specific areas of the framework, so what did I do to mess it up and cause the submenu to not show on iPad / touch?
thanks for any help
It seems that the problem is that this is not a standard pure CSS dropdown menu, as one might assume. Instead, it's been controled by jQuery. You can see it in the app.js file:
$('.nav-bar>li.has-flyout').hover(function() {
$(this).children('.flyout').show();
}, function() {
$(this).children('.flyout').hide();
});
So you should modify the script in order to work with a touch for selected devices (there is a good discussion on that topic here). Here I am using a simple statement. I have not been able to test it in iPad, but you could have good results if you try to use something like (untested!):
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('.nav-bar>li.has-flyout').bind('touch', function() {
$(this).children('.flyout').slideToggle();
});
} else {
$('.nav-bar>li.has-flyout').hover(function() {
$(this).children('.flyout').show();
}, function() {
$(this).children('.flyout').hide();
});
}
This should give you some clues on how to deal with that. Let us know if it works.
There is also a lot of information in this stackoverflow discussion about hover and touch devices.
thanks to #hernan for setting me in the right direction with things.
i ended up fixing it up by mixing the Foundation code with his code with some better selectors. here's what I landed with:
if (navigator.userAgent.match(Modernizr.touch || navigator.userAgent.match(/Windows Phone/i))) {
$('.nav-bar>li.has-flyout').on('click.fndtn touchstart.fndtn', function(e) {
e.preventDefault();
var flyout = $(this).children('.flyout').first();
if (lockNavBar === false) {
$('.nav-bar .flyout').not(flyout).slideUp(500);
flyout.slideToggle(500, function(){
lockNavBar = false;
});
}
else
{
flyout.slideToggle(500);
}
});
i'l definitely be checking into those two links / discussions you mentioned, too, hernan.
thanks again-
Related
I am trying to create my website in Material Design, however I found one issue with Material Select regardless whether I use MDB (Material Design for Bootstrap) or Materialize CSS framework. Both are working fine on Windows/OSX/Android , however for some reason when I open Material Select component on my iPad and click on it, there is a blinking cursor showing from the Background of the Dropdown.
Try the following code:
input.select-dropdown {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
I had the same issue on iOS devices, I am using select dropdown from materialisecss "http://materializecss.com/forms.html".
to fix the blinking cursor issue, I used reference code from below link and slightly modified that code.
Ref Link: https://github.com/Dogfalo/materialize/issues/901 (check comment by "chi-bd commented on 17 Nov 2015")
jQuery('select').material_select();
/*--- Materialize Select dropdown blinking cursor fix for iOS devices ---*/
jQuery('select').siblings('input.select-dropdown').on('mousedown', function(e) {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
e.preventDefault();
}
}
});
jQuery('select').material_select(); to initialize materialise select and rest code is the fix.
the only problem was this was giving problem on desktop view so added mobile detection condition
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Note: Add this code in document ready $(document).ready(function() { ... });
that's it. I hope this will sort out your issue.
Regards, and have a nice day :)
There is an open issue on github, #StaticBR proposed an approach to solve "Dropdown Broken on iPhone (and Safari in general)" issue, link here.
According to #StaticBR,
"The Issue is that IO13 Safari propagate TouchEnd Events before the Click event is propagated.
So if you have a click listener within an drop down, it is not correctly triggerd, because the Dropwdown is getting closed by the TouchEnd event. After that the click event is at a different position or does not longer exist.
Removing the touch event listener solved this issue for me."
Apologies, the above code works but then it stops the scrolling for drop-down.
For now I am using below fix, but it shows the blinking cursor first and then it hides it. but still this is not the perfect solution, if anyone has better solution please post here :)
function checkDropDown(obj){
var nextObj = jQuery(obj).next();
setTimeout(function(){
if (jQuery(nextObj).is(":visible")){
jQuery("input.select-dropdown").css({
"transition" : "none",
"left" : "-999999px"
});
}else{
jQuery("input.select-dropdown").css({
"left" : 0
});
}
}, 250);
jQuery(document).ready(function(){
jQuery("input.select-dropdown").on("focus", function(){
checkDropDown(jQuery(this));
});
jQuery("input.select-dropdown").on("blur", function(){
checkDropDown(jQuery(this));
});
});
As title suggests I am building a mobile website with JQuery Mobile (1.3.0) and am trying to implement Google Places Autocomplete (API v3) to aid user input of location data.
The autocomplete functions correctly on desktop device, but not when used on a mobile device (I have only tested on iOS 6).
When used on mobile device the dropdown list of relevant locations do appear, but simply disappear when you press one without loading the selection on the map.
I have looked around and seen some solutions that sight the z-index of
.pac-container
as the culprit (see: http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).
I have implemented these fixes but to no avail, and I am not convinced that z-index is the problem because I can see that the selected item does change to it's :hover state/colour when pressed on mobile.
Please if anyone has suggestions I am all ears, need any more details let me know.
Saravanan's answer is a bit overkill. To fix the conflict with FastClick and PAC, add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Thanks Daniel. But the solution I have given has some performance impact.
I have modifed the FastClick library little bit to accomplish that.
First I have added a param to FastClick constructor, where defaultElCls will be the elements which should not implement fastclick.
function FastClick(layer, defaultElCls) {
'use strict';
var oldOnClick, self = this;
this.defaultElCls = defaultElCls;
Then modify needsClick method:
FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();
if (nodeName === 'button' || nodeName === 'input') {
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
// Don't send a synthetic click to disabled inputs (issue #62)
if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
return true;
}
} else if (nodeName === 'label' || nodeName === 'video') {
return true;
}
return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));
};
Then pass pac-item to the FastClick constructor
new FastClick(document.body, "pac-item");
Hope this will be taken care by FastClick library as well :)
I've also encountered this bug, and determined fastclick to be the culprit. I was originally going to go with Devin Smith's answer, but epegzz's warning about MutationEvents being deprecated led me to MutationObservers, and since I haven't seen a fix involving them I thought I'd share my solution.
var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
var self = this;
mutations.forEach(function(mutation){
// look for the container being added to the DOM
var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
// if it is, begin observing it
if (pac_container_added){
var pac_container = mutation.addedNodes[0];
self.observe(pac_container, observer_config);
}
// look for pac-items being added (as children of pac_container)
// This will not resolve if the observer on pac-container has not been created
var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
// when pac items are added, add the needsclick class
if (pac_item_added) {
$('.pac-item, .pac-item span').addClass('needsclick')
}
});
});
observer.observe(document.body, observer_config);
It is more complex than I'd like it to be because we can't just add observer.observe('pac_container') in the top level, since its added asynchronously. Luckily, the solution for that problem is also MutationObservers.
We add another observer to pac_container when it is created. That way, it detects the pac-items being added, and when they are, we add the needsclick class.
This is my first time using MutationObservers, so feedback/improvements would be appreciated. As you can see, I used both jquery, but it should be pretty easy to pull it out.
There is a patch for fastclick that makes it work well with google places autocomplete. See This answer :)
After much hair pulling I have found the problem to be the "FastClick" library I added to my project.
As #Saravanan Shanmugam points out in this comment https://stackoverflow.com/a/16932543/1177832
FastClick seems to interfere with autocomplete. Also see above link for the workaround he has added to get the two to play nice.
It took me a little bit, but I figured out that I can't click on my inputs because of the touch.punch script I'm using to enable jquery UI drag functionality on touch devices. Anyone familiar with this script know why that might be? The form actually resides down the tree of the parent object. Does anyone know a way I can override or force through the selection? I'm going to try binding events that force focus to the input right now but maybe someone here has some insight?
JEditable + jQuery UI Sortable + jquery.ui.touch-punch
I have spent all day on this problem and I finally figured out the solution. The solution is very similar to kidwon's answer. However, I was using jeditable which dynamically creates input fields without class names. So I used this conditional statement instead of checking the class name:
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
I think this is a better solution as it always uses the native functionality for any input or textarea fields.
To anyone who might wind up here with a similar situation using the very handy touch.punch hack, simply forcing the focus through on a click event will work just fine!
$('.input').bind('click', function(){
$(this).focus();
});
Folks, the other two answers here did NOT work for me, but Danwilliger's solution works; however, it's not clear from his answer how exactly to set it up in the Touch Punch JS file. For future answer-seekers, here's what to do. Again, this is Danwilliger's solution -- I'm just clarifying.
Change this section in jquery.ui.touch-punch.js (on approximately line 30):
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
To this:
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
Best of luck!
OK here's another solution if your textfield whatever HTML element is ain't focusing,scrolling, selecting words, moving text cursor around the text and whatever different scenarios might come then you may override the jquery.ui.touch.punch.js script.
I assume that your element isn't the draggable one but probably a child of it as my case was.
Put a class on your html element, for example class="useDefault".
Then go to the script file and find that part:
...
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
....
As you can probably see event.preventDefault(); assures that jquery.ui.touch.punch.js
overrides the default behaviors of the browser. To prevent that for our particular class node, make the following modifications:
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
event.stopPropagation();
} else {
event.preventDefault();
}
This solution is tested with webkit browsers only and jQuery UI Touch Punch 0.2.2 release.
Hope that quick solution helps, BR
Thanks to #Danwilliger and #jeremytripp for the solution. Being that this issue has been known for years and yet has still not been worked into touch-punch author's Git repo, I forked it with the solution added here:
https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js
I would be quite happy for the author to incorporate those few lines of a change into the original library and make this one unneeded then, but if that never happens, it's nice to have a single source file to reference.
Jacob's answer worked with a slight modification—I found that using the click event resulted in inconsistent behavior on iPad, ios9 Safari. Sometimes I'd press once on a field and it would focus, other times I had to press three times. Changing click to touchstart solved the problem for me (I also used event delegation since my form was added dynamically):
$('form').on('touchstart', 'input,textarea',function(){
$(this).focus();
});
One solution is to use a handle.
Add an icon inside and use this to drag. Then the inputs work fine.
<li><span class="move">Move</span><input...../></li>
$("#sortableList").sortable({
handle: ".move"
});
I actually tried adding the lines which Danwilliger mentioned, it did not do the trick for me.
What worked for me was
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
$(touch.target).focus();
} else {
event.preventDefault();
}
I am not really sure why the other answers posted did not work, but for anyone else out there if they have the same issue try my solution out :).
Throttlehead's solution worked for me. Simpler perhaps to just use the JQuery selectors to cover all inputs and textareas:
$('input,textarea').bind('click', function(){
$(this).focus();
});
See example here: http://jsfiddle.net/KK36F/2/
How to solve this?
My old answer of:
http://jsfiddle.net/KK36F/5/
I've used jQuery noConflict to work around flowPlayer. As I can't
reproduce your problem (flowPlayer is blocked on my site rrrrr) it's
the best I can do.
Didn't work... I've managed to reproduce the problem and track it down to a line in the flowplayer code:
// skip IE policies
document.ondragstart = function () { return false; };
If you make this safer (as it is a JScript only IE thing), the draggable works again.
if(document.ondragstart) {
document.ondragstart = function () { return false; };
}
I am having a problem with my jqm form not working properly in mobile browsers (iPad 1 Safari, Android Dolphin) but working as expected in desktop browsers (Chrome, Firefox, Safari & IE9 on Win7).
The form starts by asking the user how they would like to be contacted (email, sms, and/or post), then updates fields to be required based on this selection (validation is via the validationEngine.js plugin).
An example of the form can be seen here.
The logic of the script is that it checks to see if the checkbox is selected (or de-selected), then adds (or removes) a class to make it required as shown below.
$('body').delegate('#byEmail_label', 'click tap', (function(event) {
if (!$("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
})
);
I had this working 100% without the .delegate(), but then I could not have the form load via ajax - after adding .delegate it all works well, except in mobile browsers.
Has anyone experienced something similar, or have any idea how I can get this working?
Thanks
Finally fixed my own problem by moving all my jquery outside the
$(document).ready(function () {...
and into
$('*').delegate('body','pagecreate', function(){...
ie:
$('*').delegate('body','pagecreate', function(){
$('#byEmail_label').tap(function(event) {
if ($("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
});
});
Now my head feels better... no more banging it on the desk...
I also had troubles with checkboxes and radios, this is what I used. Might help to check for the value instead of if it's checked.
alert($('input[name=byEmail]:checked').val());
or
var cb_val = $('input[name=byEmail]:checked').val() == true;
or
var cb_val = ($('input[name=byEmail]:checked').val() == 'blah') ? true:false;
Maybe something like this
var addValidation = ($('input[name=byEmail]:checked').val() != '') ? true:false;
if(addValidation) {
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
} else {
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}