I wrote this script for a navigation menu on the phone. If an item has drop downs, it prevents the link, then displays the drpdown.
$(document).ready(function() {
var bodyWidth = window.screen.availWidth;
if(bodyWidth <= 600) {
$('ul.dropdowns li > a').click(function(event) {
var parent = $(this).closest('li');
var nester = $(this).closest('li').closest('ul').closest('li');
var type = parent.attr("class");
if(parent.hasClass('dropdown') || parent.hasClass('flyout')) {
event.preventDefault();
$(parent).siblings().attr("id", "");
var isActive = (parent.attr("id") == "active" ? true : false);
(isActive ? $(parent).attr("id", "") : $(parent).attr("id", "active"));
}
});
};
});
This works fine with the iPhone, but on Android it gets screwed. I'm at a total loss, any ideas?
By, "gets screwed" I mean nothing happens on Android when you try to click a link.
I found the problem. I was using a CSS transition that for some reason Android wasn't keeping up with.
Related
I am using jQuery's scrollTop() for a fixed menu:
function fixed_menu(){
if( $('window').width() < 770 )
{
var menu = $('.col-left.sidebar');
var offset = menu.offset();
var trigger = offset.top;
$(document).scroll(function(e){
if($('body').scrollTop() >= trigger){
menu.addClass('fixed');
} else if ($('body').scrollTop() < trigger){
menu.removeClass('fixed');
}
});
}
}
fixed_menu();
When I am testing on my own phone (android device, Moto G 2nd gen), the if statement still works while scrolling.
When I am testing on an iPad mini, the if statement only initiates when the hover is done.
How can I make this function work on certain iOS devices, while the hover is still ongoing?
The scrollTop() function is problematic in different browser. You can try with $('html, body').scrollTop() and $(window).scroll()
function fixed_menu(){
if( $('window').width() < 770 ){
var menu = $('.col-left.sidebar');
var offset = menu.offset();
var trigger = offset.top;
$(window).scroll(function(e){
if($('html, body').scrollTop() >= trigger){
menu.addClass('fixed');
} else if ($('html, body').scrollTop() < trigger){
menu.removeClass('fixed');
}
});
}
}
fixed_menu();
How can I detect my document has reached the page bottom on mobile devices?
I have this code works perfectly on desktop devices, but not on mobile devices, such as android phones,
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
any idea what else should I include in the code to make it work on mobile?
I am using it for infinite scroll. I have a "load more" link on nearly bottom of page.
jQuery( window ).scroll( function() {
var loadMoreLink = 'a.infinite-link';
var actualLink = jQuery( loadMoreLink );
if ( actualLink.length ) {
var currentPosition = jQuery( loadMoreLink ).offset();
var pixelsVisible = window.innerHeight - currentPosition.top + jQuery( window ).scrollTop();
if ( pixelsVisible > 100 ) {
// time to do some ajax call.
}
}
});
I am using bootstrap typeahead.
It depends on this jQuery code to work:
el.on('keyup', doSomething() )
On Chrome on Windows it works fine. On Chrome on Android it doesn't. The keyup event is never fired. The element to which it is bound definitely has the focus.
This appears to be a recent development.
Chrome 28.0.1500.64
Android 4.1.2 SGP321 Build/10.1.1.A.1.307
Thanks
--Justin Wyllie
I came across this same problem earlier today. How can android chrome not support these key events! I assume you've found a workaround by now, but here's a fix that I came up with for now.
function newKeyUpDown(originalFunction, eventType) {
return function() {
if ("ontouchstart" in document.documentElement) { // if it's a touch device, or test here specifically for android chrome
var $element = $(this), $input = null;
if (/input/i.test($element.prop('tagName')))
$input = $element;
else if ($('input', $element).size() > 0)
$input = $($('input', $element).get(0));
if ($input) {
var currentVal = $input.val(), checkInterval = null;
$input.focus(function(e) {
clearInterval(checkInterval);
checkInterval = setInterval(function() {
if ($input.val() != currentVal) {
var event = jQuery.Event(eventType);
currentVal = $input.val();
event.which = event.keyCode = (currentVal && currentVal.length > 0) ? currentVal.charCodeAt(currentVal.length - 1) : '';
$input.trigger(event);
}
}, 30);
});
$input.blur(function() {
clearInterval(checkInterval);
});
}
}
return originalFunction.apply(this, arguments);
}
}
$.fn.keyup = newKeyUpDown($.fn.keyup, 'keyup');
$.fn.keydown = newKeyUpDown($.fn.keydown, 'keydown');
Sorry to say this but keyup/keydown events do not work for chrome browser in android.
There are other people who have reported this issue(Here and Here) from last 1 year and its not fixed yet. so it's better for developers to avoid using these events till it gets fixed.
How to pull to refresh?
In Titanium appcelerator I need to show a list of content in tableview. If I pull the view it needs to update. In iPhone I complete but in Android it won't work. Please any one help to solve this problem in Android.
My Android code:-
tableView.addEventListener('scroll',function(e)
{
var offset = e.contentOffset.y;
if (offset < -65.0 && !pulling && !reloading)
{
var t = Ti.UI.create2DMatrix();
t = t.rotate(-180);
pulling = true;
arrow.animate({transform:t,duration:180});
statusLabel.text = "Release to refresh...";
}
else if((offset > -65.0 && offset < 0 ) && pulling && !reloading)
{
pulling = false;
var t = Ti.UI.create2DMatrix();
arrow.animate({transform:t,duration:180});
statusLabel.text = "Pull down to refresh...";
}
});
tableView.addEventListener('dragEnd', function(e)
{
if(pulling && !reloading)
{
reloading = true;
pulling = false;
arrow.hide();
actInd.show();
statusLabel.text = "Reloading...";
tableView.setContentInsets({top:60},{animated:true});
tableView.scrollToTop(-60,true);
arrow.transform=Ti.UI.create2DMatrix();
beginReloading();
}
});
Titanium now supports pull to refresh for BOTH Android (> v6.2.0) and iOS (>3.2.0) with a Titanium.UI.TableView, Titanium.UI.ListView or Titanium.UI.ScrollView object.
See the docs:
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListView
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.RefreshControl
Sample code taken from the docs:
var win = Ti.UI.createWindow({
fullscreen:true
});
var counter = 0;
function genData() {
var data = [];
for (var i=1; i<=3; i++) {
data.push({properties:{title:'ROW '+(counter+i)}})
}
counter += 3;
return data;
}
var section = Ti.UI.createListSection();
section.setItems(genData());
var control = Ti.UI.createRefreshControl({
tintColor:'red'
})
var listView = Ti.UI.createListView({
sections:[section],
refreshControl:control
});
control.addEventListener('refreshstart',function(e){
Ti.API.info('refreshstart');
setTimeout(function(){
Ti.API.debug('Timeout');
section.appendItems(genData());
control.endRefreshing();
}, 2000);
})
win.add(listView);
win.open();
Is this just the IOS code form the Kitchen Sink example?
There are a couple of attempts at getting this working on Android, though I haven't confirmed that any of them work as expected. From what I understand, the problem is that you can't get the offset the same way in Android as in IOS.
A quick Google search turned up this link, which was referenced from the official Appcelerator forums.
https://gist.github.com/903895
I am using iScroll for providing iPhone style scrolling. But, when clicking on the textboxes, the keyboard does not show up.
While trying to find the possible cause, I found that removing the iScroll script, makes it work normal, but in that case I miss the scrolling functionality.
Is this a bug in iScroll. If yes, is there a tested work-around? Or is there any alternative for iScroll?
Thanks in advance.
At least in iScroll 4, you can add this code to enable clicking of input fields. See the demo on Form-fields in the examples folder.
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
I was able to solve the error. The problem was with the CSS.
I thought may be the CSS is somehow creating the problem. I concluded this on the basis that when I commented the CSS for wrapper and scroller, the keyboard showed up... but keeping them, the keyboard didn't work. I was using bottom: 0px;, which seemed to be somehow preventing the keyboard from showing.
Removing bottom: 0px; solved my problem.
Hope this helps others.
I added the following code to _start in iScroll 4.2 to solve this problem:
if (e && e.target && e.target.tagName) {
var bFocusField = ('|INPUT|TEXTAREA|BUTTON|SELECT|'
.indexOf('|' + e.target.tagName + '|') >= 0);
if (bFocusField || that.focusField) {
if (bFocusField) {
that.focusField = e.target;
} else {
that.focusField.blur();
that.focusField = null;
}
e.defaultPrevented = false;
e.returnValue = true;
return true;
}
}
Code is inserted below the initialization part of the function (that.moved = false; ... that.dirY = 0;).
Tested it on iPad 1 (iOS 5.1) and iPad 3 (iOS 6). The onscreen keyboard does not seem to interfere with iScroll (I do an iScroll.refresh() every 5 seconds).
I believe this solution is optimal
Tweak the code in iscroll.js, ( as follows )
onBeforeScrollStart: function (e) {
//e.preventDefault();
if (e.target.nodeName.toLowerCase() == "select" || e.target.tagName.toLowerCase() == 'input' || e.target.tagName.toLowerCase() == 'textarea'){
return;
}
},