I am developing a Cordova based application for iOS and Android.
In my application, I have a <div> which contains various buttons created dynamically using a for loop.
The problem arises when the number of buttons are greater than what can be displayed on the screen at one time. Surprisingly, scrolling does not work at all when you try with one finger, but works fine when you try with two. Even then, its not that smooth. I am not using any third party library for scrolling and I am not sure whether I am inclined to do so.
My code:
for(i=0;i<rows;i++){
$("#main").append('<button>');
}
I tried putting the for loop inside a div and setting the overflow property as scroll, but it did not work.
What can I do to resolve the issue?
Related
I'm working on an Ionic v1 tabbed application with a few images and lists displayed.
When I'm testing the app on any Android Device, I experience a 1-5 second lag between selecting the device's back button and when the transition takes place.
This happens when I navigate to a new page within a tab, scroll down, then select the back button.
The back button on the app itself works just fine with no lag
If I navigate to the new page and don't scroll, the device back button works fine
I'm not displaying a lot of data at one time. This lag occurs even with a single image displayed
I've had this issue for quite some time, there's several Github tickets on this but none of them have a solution. Anyone have any ideas whatsoever on how to resolve this?
Turns out that enabling JS Scrolling where I have a fair amount of content fixes my issue. By default I leave it disabled on Android, and utilize overflow-scroll="true" on views where it's needed.
Note this issue does not occur when using collection-repeat
Im working on a Meteor POS project at the moment. (for people who don't know Meteor is a framework and can use javascript/jquery and all kinds of web app scripting). The application is suppose to be a full screen POS that does not need to scroll at all, but only the area which entered products needs scrollbar (iframe).
I ran into a problem that I don't know how to solve, which is how to disable overflow on the entire page but not the iframe. There are a few things I have tried but failed:
Setting body to overflow: hidden and iframe auto. Which of course it doesn't work because the entire body is not able to show the scroll bar and iframe is embedded within.
using onmouseenter (mouseover) and onmouseleave (mouseout) to listen for changes and using javascript or jquery to toggle between hidden or auto. I tried and even console logged but it doesn't want to work in meteor.js for some reason. Even if it worked I think the main page scroll bar will show too which I don't want.
Here is an image, the top and bottom is part of the body and the middle part filled with items are using iframe.
Thanks for any help!
It has been answered by axel.michel in the comment.
It was a better solution overall than using iframe.
Thanks!
everybody who has worked with widows 8 metro panel knows that when clicking on the arrow appeared on the left bottom of the screen, it will navigate to the applications page which is totally different from the first page.
i wanna do that on my webpage. when user clicks a block it pushes him down to the element related to that block.
is there any Jquery or JavaScript code for that? FYI i searched a lot and find nothing!
If JS/CSS is in any way similar to XAML - you'd probably want to run some translation animations on two overlaid views as described here: Activate css animation/translation with javascript
I'm developing a lazy scroll table with resizeable columns. It retrieves data from the server if the user is scrolling to a position where the data is not loaded yet. Because I want to the user to be able to scroll million of rows, I actually only put two list of 32 items in the DOM. If once of these lists scrolls out-of-the-viewport, I put it back on the other side of the visible list and refresh the items.
This all works great in Chrome, but Firefox (on ubuntu linux) gives me headaches, as it only redraws the screen after 5 seconds instead of instantly.
Does anybody know why FireFox behaves like that and maybe also how to fix/prevent this?
[EDIT]
The code finishes very quickly, I can see that in the console where I log the actions. The javascript places some nodes in the DOM. When inspecting the elements, their properties are ok, so the layout-calculation seems to be done and OK.
I will try to factor out the specific code, as it works together with the server to generate settings and some events. (I use Wicket, and refresh each of the two lists by Wicket ajax. Wicket then renderes html and replaces the dom-entries). This makes it somewhat complicated.
The issue came form a CSS setting. The table had a overflow:hidden setting. Removing it helped and resolved my issue.
i made a android app using it's web view. there contain a lot of functions. payment integration etc. i integrate this payment method using a third party tool. This tool provide an external html page. when i load this page directly in to my web view it's work nicely.
but after i got a requirement that there need a back button in the payment page. after then i add this page using an IFRAME. after there is number of issues came related to the design. the content is not fitting in the IFRAME also there is not displaying the scroll bars.
i tried differant kind of javascript method but no output.
If any solution present for this
Answer to the iframe scrolling problem
1.Zoom in until the iframe portion of the page completely fills the screen.
Tes might activiate the scrollbar and allow you to scroll the iframe.
2.Try double-touching the screen. This means you use two fingers to scroll on the iframe area.
3.If neither #1 or #2 work, try a different browser such as Dolphin, xScope, or Opera.
If none of those three work, try out Firefox. I listed Firefox separately and last because it is slow and resource-intensive on Android, but if it's your only recourse, then use it only when you must.
Can you provide more information on the content not fitting inside the iframe?