I have created an app using phonegap, jquery mobile and iscroll with 3 scrolling divs, the first 2 scroll vertically and I am trying to get the third scrolling horizontally, but am having problems. The horizontal is working, as in letting me scroll to the right of the div, however, when i try to scroll further, the div jumps back to the start. I am hoping someone has encountered something similar and has a solution.
My code looks like this;
var myScroll, myScroll2, myScroll3;
$(".scrollArea").live("pageshow", function() {
setTimeout(function(){myScroll = new iScroll('wrapper', {vScroll:true, hScroll:false});},0);
setTmeout(function(){myScroll2 = new iScroll('wrapper2', {vScroll:true, hScroll:false});},0);
setTimeout(function(){myScroll3 = new iScroll('wrapper3', {vScroll:false, hScroll:true});},0);
});
<div data-role="content">
<div id="wrapper3">
stuff here...
</div>
I have set the width of the wrapper to 1500px to test the scrolling, but this jumping error is driving me mad. Any help would be greatly appreciated.
please use jq.scroll.js from github it works for me.
https://github.com/appMobi/jQ.Mobi/tree/master/plugins
Related
I am trying to get animations on scroll to work within an angular7 frontend, however it doesn't work within a router-outlet.
I assume this has to do with how angular handles scrolling position within router-outlets as suggested by a lot of related questions on scrolling.
My questions:
How can the intended behavior be achieved within router-outlets?
Is this even possible?
Does someone have an explanation on why the problem occurs?
Specifically, I would like to apply a zoomIn animation from animations.css on some divs once they are reached via scrolling.
In order to get this to work, I am using the package "ng2-animate-on-scroll", which works well, until the divs are located within a router-outlet.
In my app.component.html:
<div animateOnScroll animationName="animated zoomIn">
text to zoom in on scroll <---works
</div>
<router-outlet></router-outlet> <--- everything in here doesn't work
<div animateOnScroll animationName="animated zoomIn">
text to zoom in on scroll <---doesn't work
</div>
When I place some divs within app.component.html above the router outlet, the animations on scroll are visible, and work as expected.
However, everything within the router-outlet or below is not animated.
Any suggestions?
Turns out the pages under router-outlet use their own module, which is why ng2-animate-on-scroll has been imported within the wrong module file.
Apparently,it could not be inherited from app.module.ts.
There is already a similar question asked but there is no response(Draggable JQuery UI scroll issue when using within iframe).
I want scroll to work for the draggable object in IFrame. Please suggest.
Here is the jsFiddle - http://fiddle.jshell.net/Msd7v/29/
Have a look at this http://fiddle.jshell.net/vryz2t1o/1/, I managed to make it work when you are scrolling down. You need to try to figure out scrolling up and you are done.
Is there any way I can freeze first column(always display) while horizontal scrolling? As displayed in the below picture, I want to show Title column always while scrolling horizontally
Check out the documentation on Pinning:
http://ui-grid.info/docs/#/tutorial/203_pinning
You basically add pinning to the module:
var app = angular.module('app', ['ui.grid', 'ui.grid.pinning']);
... and add the pinning directive to your grid element:
<div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
Clickhere Click on the link,the link solved my issue. This is what exactly I was looking for.
I am making a sexual health app as part of a uni project. I have a form which is driving me crazy. I have realised that a common problem in jquery mobile is that fixed footers move to the middle of the page when the keyboard opens, I have fixed this problem with the follow JS
//hide footer when input box is on focus
$(document).on('focus', 'input, textarea, select', function() {
$("div[data-role=footer]").hide();
});
//show footer when input is NOT on focus
$(document).on('blur', 'input, textarea, select', function() {
$("div[data-role=footer]").show();
});
This code fixes the problem with the keyboard perfectly, however, on the questions that require a select input from a range of answers (picture link below), as you cycle through with the left arrow key and answer each question the footer moves. The footer does not move is you cycle through and leave the answers at the default "choose one". It is very strange and probably a really easy fix that I don't know about so any help would be really appreciated.
PS. The green bar in the photo is the footer and not the header :P
Image link
http://imgur.com/olWSrfu
I'd use the onscroll event in your body.
Try it out, I think it's gonna fix your problem
I'm currently using JQM1.3 with iscrollview and was wondering how I would go about fixing this issue I have when I put an iscrollview inside another iscrollview.
My HTML goes something along the lines of:
<div data-iscroll="">
<!-- some content goes here -->
<div data-iscroll="">
<!-- more content goes here -->
</div>
</div>
The problem I have is when scrolling down everything looks good but if I scroll up; both div will scroll up. Is there anyway that I can stop the outer div from scrolling until the inner div is at the top?
I don't even know where to begin doing something like this so I was hoping for some pointers as to where to begin/look for info?
Please and thank you.