My Ionic1 app displays a list of items that can be collapsed/expanded, so the vertical length of the content can increase significantly when an element is expanded (the way I do it is through ng-show directives).
My issue is that when this happens, I cannot scroll down to see the new content. Actually, if I drag my finger from bottom to top, I can see the new content appear in the bottom, but as soon as I release my finger, some elasticity brings back the top of the content.
However, strangely enough, after a few seconds, the scrolling mechanics is updated correctly and I can scroll normally.
It looks like the Ionic framework takes some time to figure out that the content length has changed and needs some update in the scrolling mechanics... I would like to tell him immediately once it is needed. I tried to call $apply from the onClick call back of the Expand buttons, but I get an error saying I am already in a digest cycle.
Any clue to fix this please? Many thanks!
You can avoid $apply approach because every $scope.$apply is rebind in the page. So you can follow the ionic scroll concept.
ionic scroll
Thanks! this helped me fix the problem, by adding a call to $ionicScrollDelegate.resize() whenever some item is collapsed/expanded.
You can check the issue with this fiddle: quickly expand groups 7/8/9 and try to scroll down:
http://jsfiddle.net/shengoo/6b0y3tar/
Related
I need to prevent browser from snapping to previous scroll position when the user pushed a back button like this:
<a href="javascript:history.go(-1)"
onClick="javascript:history.go(-1)" title="< GO BACK"></a>
after pushing that button the browser will return to the previous scroll position on this page
i want to stop that behavior and just load the top of the page.
Hope someone know a proper solution.
-exemple-
open a page scroll down go to a new page and hit the back button the page will auto scroll down to the place you scrolled before!
I'm fairly certain the behavior you're describing is is best classified as one of those things considered to be a user preference. (One of those things that you're not meant to tamper with)
#mrtsherman came up with a hack/workaround for this, but unless it's seriously breaking your webapp's usability, I think you should let the browser behave as the user would normally expect it to behave (and scroll to the position they were in when they left the page). Be sure to upvote mrtsherman for his sweet nugget of js if you use it.
I have the same problem and I haven't find yet the correct solution,
but I can give you a very good workaround for this problem.
Just scroll to the top before load the next page.
When the user click back, the browser will scroll to the top.
Example:
First Page:Next
Second Page:Back
Note that href="page1.htm" loads only if user select open in new window/tab
Excuse my English. I hope this helps.
I found a better solution!
Put the following code on every page:
<script>
setTimeout('window.scrollTo(0, 0);', 1);
</script>
I'm trying to figure out how to prevent a popup image from poping up and down repeatedly (forever) when the user moves the mouse to a location on the page.
See https://codesandbox.io/s/jitterbug-on-popup-25kp4 to illustrate the problem. Hover over the text Mouse over this and the Jitter Image will appear to see the jitter problem.
EDIT: Since this was originally posted, I incorporated the solution into the code showing the problem, and now it also shows a solution.
Details
What follows is a text description of the problem, but the code does illustrates the problem as well (and with a lot less text).
On a web page, that has a vertical scroll bar,
The user moves the mouse over a div which has a MouseEnter javascript handler.
the on MouseEnter event fires which causes an image to pop up.
The popup causes the scroll bar to scroll the content. So now, the mouse is no longer hovering over the hover item so the MouseLeave event fires which causes the image to pop down.
With the image no longer being displayed, the scroll bar moves the content back to where it was prior to the popup and viola, the mouse is overtop of the div and the MouseEnter event fires again to pop up the image.
Steps 2-4 repeat forever at the speed at which the browser can keep up.
Or when the user moves the mouse to stop the popup/popdown from happening.
I've seen this happen on some other websites and now that it's happening to me, I want to fix it but I'm not sure how to.
I've searched for a solution but haven't found one yet. Here are some links I found:
https://css-tricks.com/content-jumping-avoid/ - This was good but suggests using min-height which doesn't work in my situation.
I've also tried using overflow: hidden which does prevent the jitter effect described above but leaves the user with no way to see the rest of the popup image. This, however, is a better solution than the jitter effect described above.
I'm using AngularJS and JQuery if that affects the answer.
position:absolute on the image, will solve this as it won't change the current flow when you display the image and the scroll bar will remain in it current position.
When you navigate to a page with LongListSelector where items have already been loaded (items are already present in itemsSource), the focus, by default is on top most item. You can scroll down to view other items.
In my application, I have a requirement to focus on bottom most item and user can scroll up to view other items.
One solution is to call ScrollTo function on bottom most item. Here, user can see the list being loaded and then change of focus from top to bottom most element. So, the user experience becomes very bad.
Is there any seamless way to do it?
I think ScrollTo is most efficient for a LongListSelector. But if you need to have the experience more seamless you might want to wait/halt your app with a loading screen while the LLS is populated and the focus is changed to the bottom. Async commands or a simple loading status bar could do the trick.
im nearly ready to launch my website but i have a problem i cannot sort out.
ive built the whole website using wordpress and buddypress.
due to the picture in my header being very big and ending 450px down the page, you have to scroll down to access the buddypress menu in the relevant page (the one above the activity stream etc) which is exactly where i want it, removing my header is not an option, now the only problem i am having is that when i click the tabs in the buddypress menu say from activity stream to say my messages instead of the page laoding and taking me back to this section it takes me to the very top of my header so i have to re-scroll back down to the page i was after.
I need the page to stay at the same point after page reload so that the menus can be flicked through without having to scroll down to it again everytime a link is pressed. how do i achieve this? can you please help me sort this out….i have no problems adding or editing codes if i know what code needs changing and what to add to make it do this. thx
Im guessing that if you look in the url bar it is adding a # to the end of the url. You need to override the default click event on the a tag so that it doesnt jump you to the top. Im not sure how that will affect the stuff that is going on in the BuddyPress plugin.
I've had an intermittent problem that I thought was due to un-cleared floats. What happens in Chrome (my main development browser) is the vertical scrollbar will lock in the top position and I cannot scroll down the page. Initially when the page starts to load it will allow you to scroll and then when the page is loaded it will jump back to the beginning and lock itself.
I've just been ripping apart my pages looking for un-cleared floats and missing tags and finally found out that it is due to a URL having a # at the end (which gets programatically added and remains when I refresh the page).
This issue only happens in chrome - does not appear to happen in other webkit browsers.
I assume its looking for an anchor and not finding it and then giving up. Its definitely a bug but was wondering about a workaround, or why it is only doing it on my site - I can't duplicate it for instance here.
Shift click the URL to open in new browser:
URL that will lock : /faq#
URL that doesn't lock (same but without the #): /faq
For me, the solution was in a popup div's style: I had to make sure a div with a z-index and no float but surrounded by floating divs was given the style float:none and an explicit width (floating this was not needed as it was absolutely positioned). I have a thread working through this here.