I am using a PreloadPageView to display WebViews whose content vary in length. I would like to be able to inform the user when there is more content below on WebViews which are scrollable. I have played around with the controller scroll methods and with some JS evaluations, but to no avail. Wish there was a controller.isScrollable() method!
You can get the DOM height.
Call this in the webview' s onLoadStop function:
controller
.evaluateJavascript(source: '''(() => { return document.documentElement.scrollHeight;})()''')
.then((scrollHeight) {
final widgetHeight = _webViewKey.currentContext?.size?.height ?? 0;
// compare scrollHeight to widgetHeight
});
Related
I want to rename the column headers of my table when I change the size of the page.
I have tried detecting the width of the screen and then added the if conditions according to which I want to change the Column header. But the problem is as I have set the minimum screen width as desktop and my code is only responding if my width of the page go lower than 1024px else it is not responsive.
var oTable = that.getView().byId("monTable");
oTable.addEventDelegate({
"onAfterRendering": function () {
if (that.getView().$().width() < 1764) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("Fehler");
that.getView().byId("monTable").getColumns()[7].getHeader().setText("Warnung");
}
if (that.getView().$().width() < 1520) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("Fehler");
that.getView().byId("monTable").getColumns()[7].getHeader().setText("Warnung");
that.getView().byId("monTable").getColumns()[9].getHeader().setText("MG");
}
if (that.getView().$().width() < 1404) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("Fehler");
that.getView().byId("monTable").getColumns()[7].getHeader().setText("WN");
that.getView().byId("monTable").getColumns()[13].getHeader().setText("Status");
}
if (that.getView().$().width() < 1356) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("Fehler");
that.getView().byId("monTable").getColumns()[7].getHeader().setText("WN");
that.getView().byId("monTable").getColumns()[13].getHeader().setText("Status");
}
if (that.getView().$().width() < 1278) {
that.getView().byId("monTable").getColumns()[12].getHeader().setText("FG");
that.getView().byId("monTable").getColumns()[13].getHeader().setText("Status");
}
if (that.getView().$().width() < 1206) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("FH");
that.getView().byId("monTable").getColumns()[13].getHeader().setText("ST");
}
}
The expected result should change the header according to the width I have set in my if conditions but it is not responding. But if you reload the page after changing the screen with then every time it is responding.
You could use a ResizeHandler (https://sapui5.hana.ondemand.com/#/api/sap.ui.core.ResizeHandler/methods/sap.ui.core.ResizeHandler.register) to call the function everytime the window changes.
ResizeHandler.register(this.getView().byId("xyz"), this._onResize.bind(this));
The _onResize method then contains the logic you have posted regarding the change of the texts.
The control you attach it to could be your sap.m.Page or whatever your container is.
For this to work you would also need to require sap/ui/core/ResizeHandler as ResizeHandler.
I am developing iphone application.
need to display 5 records at a time
and when i reached page end then the next 5 records will need to load using automatic scrolling.
initial 5 records display done.
Scroll not working when i reach page end.
Can any one.
I found the solution. my code as follows,
myTable.addEventListener('scroll', function(e){
if (Ti.Platform.osname === 'iphone')
{
var offset = e.contentOffset.y;
var height = e.size.height;
var total = offset + height;
var theEnd = e.contentSize.height;
// this condition will check whether the scroll reach end or not?
if (theEnd == total)
{
//call the function once again.
loadContents();
}
}
});
I hope... some one will use it.
#Suresh.g
You Can use "ScrollView" with property "contentHeight :Ti.UI.Size (or "Auto")".
When you use "ScrollView" it set default height on your requirement.
You can also enable for
showHorizontalScrollIndicator : true,
for more information read this blog
I'm loading a page dynamically via fancybox and AJAX. Everything is fine except when the dynamically loaded page is too tall for the screen. It will simply overflow past the bottom of the screen.
I'm using..
function dynamic_page(){
var url = "#ajax url here#";
$.fancybox.showLoading();
$.post(url, function(res){
$.fancybox.open(res,{
afterClose : function (){
$("#remove_val").val(0);
}
});
$.fancybox.update();
});
}
When a user clicks the page, it will reload again dynamically, keeping the width and height of the original fancybox:
$.post(url, function(res){
if(res){
$("#page_load_here").html(res);
}
How do I resize or recenter the fancybox according to the dynamically loaded page's height?
All help would be appreciated
Fixed it with:
$.fancybox.update();
I've created an app that is a set size (around 2,000 px tall) and have a menu that calls FB.Canvas.scrollTo in order to help the user navigate the long page.
Is there any way to add a smooth scrolling effect? Facebook does not offer any solution on its developer blog.
Using #Jonny's method, you can do this a little more simply with
function scrollTo(y){
FB.Canvas.getPageInfo(function(pageInfo){
$({y: pageInfo.scrollTop}).animate(
{y: y},
{duration: 1000, step: function(offset){
FB.Canvas.scrollTo(0, offset);
}
});
});
}
Just had the same problem today - I came up with a little bit of javascript which makes use of jQuery's animate method which provides some easing - the scroll is still a touch jerky (I'm guessing that's because of the FB.Canvas.scrollTo proxy). Anyway, here's the snippet:
function scrollToTop() {
// We must call getPageInfo() async otherwise we will get stale data.
FB.Canvas.getPageInfo(function (pageInfo) {
// The scroll position of your app's iFrame.
var iFrameScrollY = pageInfo.scrollTop;
// The y position of the div you want to scroll up to.
var targetDivY = $('#targetDiv').position().top;
// Only scroll if the user has scrolled the window beneath the target y position.
if (iFrameScrollY > targetDivY) {
var animOptions = {
// This function will be invoked each 'tick' of the animation.
step: function () {
// As we don't have control over the Facebook iFrame we have to ask the Facebook JS API to
// perform the scroll for us.
FB.Canvas.scrollTo(0, this.y);
},
// How long you want the animation to last in ms.
duration: 200
};
// Here we are going to animate the 'y' property of the object from the 'iFrameScrollY' (the current
// scroll position) to the y position of your target div.
$({ y: iFrameScrollY }).animate({ y: targetDivY }, animOptions);
}
});
}
I just used Francis' technique and implemented a jQuery version
$('html,body').animate(
{scrollTop: $(".scroll_to_me").offset().top},
{duration: 1000, step: function(top_offset){
FB.Canvas.scrollTo(0, top_offset + 30);
}
});
You need to replace the .scroll_to_me with the selector you want to scroll to. Also I added in the + 30 to the offset as the iframe doesn't start at the top of the page, you may want to tweak this.
One way of doing it is by getting the current Y position, then getting the to Y position. Run a for loop with a setTimeout that will bring the user to the final Y position.
I would like to have a fixed element (a DIV) in the iFrame for my Facebook Application. So when the user scrolls down the page, that element is still fixed on the top of the browser window?
The basic: You add stuff to a bag, while you are scrolling down, and a fixed DIV will show you your "score" while you add these things to the bag. The "score counter" should always be visible while scrolling.
Thank you!
This is not possible if you are using facebook's iframe auto-resize features. Once the iframe is resized so that scrolling is not necessary, the only scroll available will be the one of the parent window. However, the child iframe has no information about the scroll of the parent window (since they are not on the same domain...) and trying to listen to scroll events or scroll position will only return that the scrollbar is at position 0, or topmost.
You can however listen to click events and extract the offset of the click event or the clicked element.
Some examples:
$('.clickme').click(function(e) {
e.preventDefault();
var top;
// Using click position (e.pageY and e.pageX available)
top = e.pageY;
// Using clicked element position
top = $(this).offset().top;
$('#moveme').css({'top': top - 100 + 'px'}); //
}
Maybe you can base your interaction on this principle instead?
I don't know about you Erik but this really doens not help me much.
Could FB.Canvas.getPageInfo help?
Maybe that would help : I was ussing
(function() {
var el = $("header:first");
var elpos_original = el.offset().top;
$(window).scroll(function(){
var elpos = el.offset().top;
var windowpos = $(window).scrollTop();
var finaldestination = windowpos;
if(windowpos<elpos_original) {
finaldestination = elpos_original;
el.stop().css({'top':0});
} else {
el.stop().animate({'top':finaldestination-elpos_original},0);
}
});
})();