I'm looking to use a LazyLoad technique for images and infinite scroll to load new content into my page. Both these things make use of the $(window).scrollTop() function that inside a Facebook canvas application doesn't work. I know i can use FB.Canvas.getPageInfo() to get the current scrollTop value however I'm encountering some performance issues with this, my code is as follows:
var oldScroll = 0; // current scroll
var newScroll = null; // new scroll (fetched from FB.Canvas)
// Override the normal function to work within fb
// !!This seems to kill the browser
$.fn.scrollTop = function() {
return FB.Canvas.getPageInfo().scrollTop;
};
// poll to check for any changes in scroll
setInterval(function() {
newScroll = FB.Canvas.getPageInfo().scrollTop;
if(oldScroll != newScroll) { // have we scrolled at all?
oldScroll = newScroll;
$(window).trigger($.Event('scroll')); // fire a scroll event to keep the rest of the application that is listening
}
}, 1000);
It appears to be fine if i don't override the scrollTop function but once I do my browser soon crashes.
Am i going about this completely wrong? Has someone already created a way to do this inside FB canvas? Cheers.
Im trying to solve the same problem and my solution is a additional element (div#xscroll, pos:abs, L) inside Facebook application + setInterval:
function wininfo() {
FB.Canvas.getPageInfo(
function(info) {
$('#xscroll').height(info.clientHeight+info.offsetTop+info.scrollTop).trigger('scroll');
}
);
};
now you can use this #xscroll for LazyLoad:
$(".img").lazyload({threshold:400,effect:"fadeIn",skip_invisible:true,container:'#xscroll'});
the problem is - huge CPU usage while FB.Canvas.getPageInfo, my interval is 2000 - and CPU usage is hight. After hour of script work - Safari slows down and memoryleaked...
Do you insist on having the scrollTop() function overridden? Originally it works for any element that you supply via the jQuery selector, while you seem to restrict it to only the facebook canvas. If any other javascript tries to use scrollTop(), it will fail miserably, won't it?
As for the solution, I've done infinite scrolling pretty much the same way - setInterval() to see if you've reached the bottom, then load content, then check scroll again, and so on. But I'm not triggering the original scroll event of the window at any time, as there is no need to - at least in my case.
Related
I have a Cordova Mobile application which uses iScroll plugin. To my surprise scroll doesn't work when I run the app in VoiceOver mode (three finger swipe up/down gesture). It just reads page 1 of 1 even if the content is existing for more than 2 pages.
Are there any role attributes to make page to scroll ? Please help.
I found that iScroll is using transform CSS property for scrolling.
I was able to resolve this issue.
May be you can also try the same.
Add below style to your parent div
-webkit-overflow-scrolling : touch
There is a phone gap plugin to listen for VoiceOver on/off https://github.com/phonegap/phonegap-mobile-accessibility
// Define a persistent callback method to handle the event
function onScreenReaderStatusChanged(info) {
if (info && typeof info.isScreenReaderRunning !== "undefined") {
if (info.isScreenReaderRunning) {
console.log("Screen reader: ON");
// Do something to improve the behavior of the application while a screen reader is active.
} else {
console.log("Screen reader: OFF");
}
}
}
// Register the callback method to handle the event
window.addEventListener(MobileAccessibilityNotifications.SCREEN_READER_STATUS_CHANGED, onScreenReaderStatusChanged, false);
On voiceover ON event you can destroy iScroll(or make useTransform property to false).
On voiceover OFF you can re-initiate the iScroll.
Let me know if it works.
I'm writing a small MacOS program with a WebView which loads a website. This is one of those sites that auto loads more content when you scroll to the bottom. As an expirement, I'm trying to write code that will constantly scroll to the bottom of the page so that more of it is loaded and so on.
What I have so far is this:
scrollToBottomTotalTimes = 10
self.myWebView.mainFrame.load(NSURLRequest(url: NSURL(string: urlString)! as URL) as URLRequest!)
func webView(_ sender: WebView!, didFinishLoadFor frame: WebFrame!) {
var scrollToBottomCurrentTimes = 0
while scrollToBottomCurrentTimes != scrollToBottomTotalTimes {
scrollToBottomCurrentTimes += 1
self.myWebView.scrollToEndOfDocument(self)
sleep(2) //give the page some time to load
}
}
This works well once: The page loads, it scrolls to the bottom, and more of the page loads.
However after that, the WebView doesn't scroll anymore, despite ample time for the page to reload. The position on the page stays exactly as before.
I get the feeling that .scrollToEndOfDocument(self) doesn't seem to detect the fact that the webpage has become longer.
Is there a way to 'update' .scrollToEndOfDocument(self) so it knows where the new bottom of the page is?
Thanks!
It seems to me that you are using a wrong approach. Assuming that new content arrives you may get multiple requests to didFinishLoadFor. However you are doing a loop inside the method with a sleep inside the method which makes that you block the main queue and disable the event mechanism.
I suggest you setup a timer event using Grand Central Dispatch (GCD) and then fire off the scroll event from the timer event. Please note that you have to do the scrolling in the main queue and the timer event is not in the main queue. Just check out the documentation on GCD. See https://developer.apple.com/reference/dispatch.
I found an interesting bug that I can not replicate, but think someone here could provide some insight.
I have an activity that for now is partially native, partially web-based. By that I mean one element is simply a WebView until implementation on a native level can be achieved.
When I made a change in the page I am loading, I saw an immediate change using Chrome Developer Tools in a mobile interface. However, I was unable to immediately see the change in my WebView in my MainApp. As a test, I installed a new app that loaded the page in a WebView where I saw the changes. After clearing the data in my MainApp, I was able to see said changes.
I made a few more changes, but now these are being reflected immediately in my WebView (upon backing out of the activity and re-entering).
These are my WebView settings, can you see a reason for me not initially seeing these changes? I'm not very savvy (yet :) ) when dealing with how data is stored in a WebView and want to ensure that updates I make to my webpage are reflected immediately in the app. Thank you!
// Initialize WebView
if (Build.VERSION.SDK_INT >= 19)
mWebView.setWebContentsDebuggingEnabled(false);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// Hide ProgressBar
mProgressBar.setVisibility(View.GONE);
}
});
final ActionBarActivity activity = this;
mWebView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
// Activities and WebViews measure progress with different scales.
// The progress meter will automatically disappear when we reach 100%
mProgressBar.setProgress(progress);
}
});
// Settings for WebView data
WebSettings ws = mWebView.getSettings();
ws.setSaveFormData(false);
ws.setSavePassword(false); // Not needed for API level 18 or greater (deprecated)
You probably need to disable the cache for your webview. When your data changes you need to reload the webview using mWebView.reload()
In case if you want to reload the the webview every time when you reopen.
use this setting for webview
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
This will not load the cache and the requirement will get fulfilled.
I am having a bit of a weird problem with iOS platform for a page i am developing. This is the page in question. When clicking any of the case study images, the page will first unhide the required case study then scroll to it.
This works on all desktop browsers on Windows and Mac, but on the iPhone and iPad you get a horrible flicker as it scrolls down.
Not quite sure how to debug or fix this issue.
Any ideas would be of great help!
Thanks in advance,
Shadi
UPDATE 1
The latest page can be found here. Still haven't found a fix - if anyone has any idea it would be amazing!
If you need vertical scroll only, you could use {'axis':'y'} as settings to scrollTo method.
$.scrollTo(*selector*, *time*, {'axis':'y'});
Have you tried this:
$('a[href=#target]').
click(function(){
var target = $('a[name=target]');
if (target.length)
{
var top = target.offset().top;
$('html,body').animate({scrollTop: top}, 1000);
return false;
}
});
If you're just scrolling the page vertically you can replace the entire jQuery scrollTo plugin with this simple line:
$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');
Personally I do something like this
$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
//do stuff
});
I found that if I try to do other js work while it's scrolling it makes the browser crunch and the animation isn't smooth. But if you use the callback it'll scroll first, then do what you need.
I put a -15 at the end of .top because I wanted to show the top edge of the div I was scrolling do, simply for aesthetic purposes. 1000 is the duration in milliseconds of the animation.
Credit goes to the poster, animate, for the tip off.
Defining {'axis':'y'} has made it right! It helped me with slideUp/Down flickering.
I'm not sure if this applies to jquery animations. But the following seems to affect CSS animations.
http://css-infos.net/property/-webkit-backface-visibility
Syntax
-webkit-backface-visibility: visibility;
Parameters
visibility
Determines whether or not the back face of a transformed element is visible. The default value is visible.
edit
Try applying it to every element and see what happens.
*{
-webkit-backface-visibility: visible;
}
and try
*{
-webkit-backface-visibility: hidden;
}
It's just a guess really...
I will also confirm Tund Do's method works flawlessly. If you need a "left/right" variation of the same thing (as I did) here it is:
$('.pg6').click(function(){
var target = $('#page6');
if (target.length)
{
var left = target.offset().left;
$('html,body').animate({scrollLeft: left}, 1000);
return false;
}
});
I would guess you could combine the two, grab the top position and chain the animates for a "left/right/up/down" animation also.
I had the same problem.
The problem is the ScrollTo plugin. Instead of using scrollto.js just use .animate with scrollTop. No more flickering in ipad/iphone.
Here it is with no flickering http://www.sneakermatic.com
You should include {axis: 'y'} in your options object. Also be sure that you have not enabled interrupt option. You can test this with {interrupt: false}.
You need to add e.preventDefault(); to each .click() call. This prevents the browser's default action, which is to stay in the same place. Hope this helps!
i.e.
$("#quicksand li, .client-list li").click(function (e) {
e.preventDefault();
...
});
I'm having the same flickering on iPhone -- even with the preventDefault and return false options of canceling the default click event. It appears that on the device it tries to go back to the top of the page before scrolling. If you have both a scrollTop and scrollLeft animation going on it really gets buggy. It's jQuery's issue.. I've seen a scrolling method with mootools that doesn't have this issue. See this page: http://melissahie.com/
Thanks nicole for giving the example with mootools.
It really seems to be a jQuery issue when trying to do a animation on BOTH scrollTop and scrollLeft.
With mootools:
var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut});
scroll.start(y, x);
it works flawlessly on iOS5!
I'm creating a webapp for the iPhone, based in HTML/CSS/JS. I'm using forms to receive input and pass data to the script, but a problem I'm encountering is that the keyboard won't disappear. The user will enter the information, hit submit, and since it's JavaScript the page doesn't reload. The keyboard remains in place, which is a nuisance and adds another step for users (having to close it).
Is there any way to force the keyboard in Safari to go away? Essentially, I have a feeling this question is equivalent to asking how I can force an input box to lose focus or to blur. Looking online, I find plenty of examples to detect the blur event, but none to force this event to occur.
Even more simply, you can call blur() on the currently focused element. $("#inputWithFocus").blur()
document.activeElement.blur();
You could try focus()ing on a non-text element, like the submit button.
Here's a small code snippet that always hides the keyboard whenever the focus is in an input or textarea field and the user taps outside of that element (the normal behaviour in desktop browsers).
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
To detect when the return button is pressed use:
$('input').bind('keypress', function(e) {
if(e.which === 13) {
document.activeElement.blur();
}
});
I came across this issue and have spent some time until getting a satisfactory solution. My issue was slightly different from the original question as I wanted to dismiss the input event upon tapping outside input element area.
The purposed answers above work but I think they are not complete so here is my attempt in case you land this page looking for the same thing I was:
jQuery solution
We append a touchstart event listener to the whole document. When the screen is touched (doesn't matter if it's a tap, hold or scroll) it will trigger the handler and then we will check:
Does the touched area represent the input?
Is the input focused?
Given these two conditions we then fire a blur() event to remove focus from the input.
ps: I was a little bit lazy so just copied the line from above response, but you can use the jQuery selector for document in case you want to keep consistency of code
$(document).on('touchstart', function (e) {
if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
document.activeElement.blur();
}
});
Hammer.JS solution
Alternatively you can use Hammer.JS to handle your touch gestures. Let's say that you want to dismiss that on a tap event but the keyboard should be there if the users is just scrolling the page (or let's say, hold a text selection so he can copy that and paste into your input area)
In that situation the solution would be:
var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
document.activeElement.blur();
}
});
Hope it helps!
$('input:focus').blur();
using the CSS attribute for focused element, this blurs any input that currently has focus, removing the keyboard.
Be sure to set, in CSS:
body {
cursor: pointer;
}
otherwise, your event handler calling document.activeElement.blur() will never get fired. For more info, see: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari
For anyone using Husky's code in AngularJs here is the rewrite:
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
angular.element($document[0]).on('touchstart', function(e) {
var activeElement = angular.element($document[0].activeElement)[0];
if(!isTextInput(e.target) && isTextInput(activeElement)) {
activeElement.blur();
}
});
In my case, I have an app:
AppComponent -> ComponentWithInput
and with the html:
<div class="app-container" (click)="onClick()">
<component-with-input></component-with-input>
</div>
And everything I do is adding (click)="onClick()"
You can leave the method empty as I did:
onClick() {
// EMPTY
}
This works for me.