I have a list of staff profiles that uses jquery to filter it based on links selected in an index.
HTML:
<ul id="staff-filtering-system">
<li>Headmaster</li>
<li>Assistant Headmaster</li>
<li>Deputy Heads</li>
...
</ul>
<div class="staff_member" data-htb_role="headmaster" style="display: none;">...</div>
and uses this function to filter using this
JS:
$("#staff-filtering-system li a").click(function(e){
e.preventDefault();
var q = $(this).attr("data-htb_role-filter");
//console.log(q);
$("div.staff_member").each(function(){
var that = $(this)
if(that.attr("data-htb_role") == q){
//console.log(that);
that.show();
}else{
that.hide();
}
});
});
This works fine on desktop browsers, but not on mobile where tt mostly jumps to top of the page or does nothing.
After a quick google search I tried the following:
Removing href="#" from each index link
adding e.stopPropagation(); after e.preventDefault();
rewriting the click() method as on("touchstart click")
adding return false before the closing bracket of $("div.staff_member")...
Nothing seems to work
If I include alert(e.type) at the start. I sometimes get a touchstart event fired.
Any advice on what I should try next would be welcome.
I am testing on my mobile (Moto G5, Android 7, Chrome) and on BrowserStack ( Chrome on Samsung Galaxy S9/Android 8 and Chrome on Google Pixel 2/Android 8)
There was another function that was manipulating the links, I just reapplied the click method afterwards.
Related
Is there any way to show keyboard with selected edit text. I used focus() which is perfectly work for in browser. I am able to edit text when browser is ready.
Below is my code
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
lastSelect.focus();
$("#main_container").click(function() {
lastSelect.focus();
});
});
but when I load this site in mobile device then it is not appears mobile keyboard unless touch.
please find out the solution.
Thanks in advance
I tried to create a working snippet with your code. I changed a little the syntax to use .on() and .trigger() methods.
Maybe you can use the .trigger() method with touchstart to achieve what you want:
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
$("#main_container").on('click', function() {
lastSelect.focus();
$(lastSelect).trigger('touchstart');
});
$("#main_container").trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_container">
<p contenteditable=true>Some text</p>
<p contenteditable=true>Some text</p>
<p contenteditable=true>Some text</p>
</div>
Hope it helps.
Try using:
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
lastSelect.focus();
lastSelect.select();
$("#main_container").click(function() {
lastSelect.focus();
});
});
If you're using iOS/Safari as your mobile device, it doesn't allow setting focus unless it's in response to a user input event (i.e. touch).
I think this is a feature of mobile Safari rather than a bug. In our
work on FastClick, my colleagues and I found that iOS will only allow
focus to be triggered on other elements, from within a function, if
the first function in the call stack was triggered by a
non-programmatic event. In your case, the call to setTimeout starts a
new call stack, and the security mechanism kicks in to prevent you
from setting focus on the input.
See this post
I created a bootstrap button that has a link inside. Which looks like this:
When you hover on it:
This is the code inside the button:
<div class="s-8"><button type="button" onClick="javascript:location.href = 'administration.php';">Administration</button></div>
The logout button:
<div class="s-4"><button type="button" onClick="javascript:location.href = 'logout.php';">Logout</button></div>
This button works fine on the PC(IE, SAFARI, FireFox, Chrome, Opera) browser(takes me to the administration page, but it doesn't work on the Mobile devices.
I did the same thing for the logout button, and it works fine on PC and Mobile Devices. I am now puzzled.
The issue may be that you're using the onClick event which won't register on a mobile device (as you don't click - you tap).
This answer explains how to use the "touchstart" event which will work on a mobile.
https://stackoverflow.com/a/22015946/2619909
I know this might be a weird answer. But in some cases mobile clickevents dont work unless you put the style: cursor:pointer; to your button.
Mobile clickEvents are handled very differently, the first "click" or "tap" might be interpreted as a HOVER instead of the click which you are looking for.
So try setting the CSS style of the button to : cursor:pointer;
unfortunately neither setting cursor:pointer; nor adding a touchstart event listener
$(document).ready(function() {
$('#button_id').on('click touchstart', function() {
window.location.href = "/url";
});
});
as #noa-dev and #GitPauls suggested worked for me. for reference I tested on my phone7 (ios11.4 and safari)
working solution: I set the z-index of the button to a large positive number and the button now works.
#button_id{
z-index: 99;
}
solution found thanks to Daniel Acree https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone. I don't know if this generalizes to all iphone/mobile devices.
In my project I'm using AngularJS v1.2.16 and Bootstrap v3.1.0.
The following code is correctly working on desktop side but not when trying it via tablet (ipad)
In case of tablet, the ng-click is not fired on first time, only when "tabbing" again on the div element, it is fired.
<div ng-click="selectObject($index)" ng-class="selectedObject($index)" class="check-obj" ng-mouseover="showwhiteobj = true;" ng-mouseleave="showwhiteobj = false;">
<span ng-hide="selectedObject[$index]">
<span ng-hide="showwhiteobj"><img src="img/{{imagename}}.svg"/></span>
<span ng-show="showwhiteobj"><img src="img/{{imagename}}-white.svg"/></span>
</span>
</div>
selectObject is just setting an array to true or false:
$scope.selectObject = function (objIndex) {
if ($scope.selectObject[objIndex]) {
$scope.selectObject[objIndex] = false;
} else {
$scope.selectObject[objIndex] = true;
}
};
selectedObject returns an 'active' or undefined (used in ng-class):
$scope.selectedObject = function (objindex) {
if ($scope.selectedObject[objindex]) {
objindex = 'active';
} else {
return undefined;
}
return objindex;
};
funny thing is, that when removing
ng-mouseover="showwhiteobj = true;" ng-mouseleave="showwhiteobj = false;"
everything is working fine (on desktop and on tablets), unfortunately I cant use different images on hover.
And when trying it with ng-mouseover or ng-mouseenter its only working on desktop - on tablet its only working by doing an extra "tab/click" on the object.
I dont see any errors on console side :-(
Any ideas or workaround?
Thanks a lot guys!
I was also bitten by it a few days ago. On IOs, when you tap, mouseover is triggered first (if is is handled in the code) and then click event is triggered. That's why when you remove the mouse event handlers, the code starts working. I would suggest using ng-touch to handle the touch events, which handle all these oddities correctly.
Read this article for more details.
Do have include angular-touch module ?
Doc here
ng-mouseover and ng-mouseleave does not work on touch screens. It will work fine on laptops or desktops.
You can try using ng-touch. Try this Link
Hope it helps...!
Friends I need some help to fix IE 7 issues. This is my code.
<div id="thumb-slider-tabs">
<ul class="ibm-tabs">
<li class="active"><a href="#slide1" rel="0" class="no-mobile show-tab"><img
src="/i/slider/featured_icon_1.jpg" alt=""/></a><span class="icon-overlay"></span><span>Announcement</span></li>
this is how I target my href using the following:
dojo.query('#thumb-slider-tabs a').onclick(function(event){
var test = dojo.attr(event.currentTarget, 'rel');
alert(test);
switchTabs(dojo.attr(event.currentTarget, 'rel'), this.parentNode);
sliderClick = true;
});
IE 7 does not recognize the onclick and does not alert also it does not display the rel attribute in test.
Any suggestions please let me know what I can do to fix this issue in IE 7. This works in Chrome, Safari, Firefox, IE 8 & 9. I need to get it to work on IE 7.
I had two elements with ID thumb-slider-tabs, which is xhtml violation. In IE dojo finds the first node only and ignores the second one, hence dojo.query('#thumb-slider-tabs a') targets first 3 links on page, not the others as in firefox, chrome and safari. Bottom line, my 'onclick' handler is never attached to the actual nodes and thus the clicks were not being triggered on the tabs.
var anchors = dojo.query('[id="thumb-slider-tabs"] a').forEach(function(element){
dojo.connect(element, 'onclick', function(ev){
dojo.stopEvent(ev);
switchTabs( dojo.attr(element, 'rel'), element.parentNode);
sliderClick = true;
console.log(sliderClick + " " + "sliderClick value");
});
});
I made this change to my code and the onclick event handler triggers when I click the tabs.
I have a rather large page showing in a UIWebView (around 150 <article>s with some text, separated in <section>s). I want to do something like this with JS (I use jQuery):
$('article').click(function() {alert('hi');});
The problem is, it takes forever to run that code (around 2 seconds from the tap, on an iPad 3).
How can I improve performance on this?
I'm using the latest version of XCode and iOS 5.1.
I used this answer's class SingleTapDetector, and the following code:
new SingleTapDetector(window, function(e) {
alert($(e.srcElement).text()); //show the text of the element that was tapped
});
Then it's easy to see if the element was an article, or even stuff like $(e.srcElement).closest('article') (because my articles have <p> paragraphs).
I suggest you to try to put a click event on the window object, and then verify if this is the <article> tag. Here's the example:
$(window).click(function(e){
var e = e || event;
if(e.srcElement.tagName==ARTICLE)
alert('hi');
});