Hi all,
Any idea how to implement (or at least, which should be the pieces of the puzzle for) something like this on Ionic? Namely, like in FourSquare, having on top a map, below a list of places (possibly pointed out in the map) and by pulling down getting the map enlarged and zoomed in?
Elia
Let me put something together, it’s possible to mimic this effect. Basing this off the shrinking head demo gives a good start.
http://ionicframework.com/demos/shrinking-header/
I’ll report back with what I have.
@elia how does this work?
The code still could use some cleaning up (renaming variables mostly) but the basis of it is all there. Hope this helps!
(Note, you may need to resize your browser a bit)
Mike where do you go to get a listing of the available demos from the above url.
I tried ionicframework.com/demos and get a 404
cheers
odd, it doesnt 404 for me, anyway heres the link to the codepen page for it.
cheers
I don’t get 404 if I click your url with the /shrinking-header suffixed but if you try just ionicframework.com/demos to get a listing of avail demos it does 404 assume there is no index.html with a listings page.
@mhartington It works great! A really helpful basis, thanks.
There would be some extra features in order to mimic foursquare’s views (they seemed to me general enough the be mentioned in the forum). I will list list them below. The first two seem to me easy, and I should probably solve them by myself. But the last to look harder and any help/suggestion would be much appreciated.
By default, the map should be shrinked at its minimum size (not maximum). This should be easy.
When the map is rolled out at its maximum size, it zooms-in in a little bit automatically. This should be also easy.
In foursquare, when I shrink the map, it dinamically resizes. in other words, it maintains the red flag always in the middle, while in the example above it is static. This seems harder to implement.
There should be just two positions when the drag is released, namely minimum os maximum map size. If the dragging ends before reaching one of the two end positions, it should automatically go for one of the two options (e.g., by picking the nearest). This is done with an animation that continues the dragging for the user up to the end position. This seems also harder to me.
@mhartington: Hei, probably a very trivial question, but in the codepen below I’ve combined tabs and your example on map scrolling, so that each tab has its own map and item list. The problem is that as soon as I switch from one tab to the other I loose the shrinking.
What d’u think I’m doing wrong?
Thanks as usual,
Elia
Hmm, I was able to switch between each tab and keep the shrinking effect.
Any way you could make a screen cast or gif of this?
Hope is enough
I just did a screen cast and got this. The scroll position won’t be remembered from tab 1 to tab 2 because each tab is it’s own separate view/history. What you are describing is the default behavior.
Yes but I wasn’t referring the the scroll position, but to the fact that the shrinking is lost (for each of the three tabs).
(I meant the shrinking capability. If you notice, also in your screen cast once you switch to the second tab, the map does not shrink anymore. And the capability isn’t there for each of the three tabs)
Hello !
I’m looking for something very close to what is discussed here, any better way to do this now, 8 months later ? 
The codepen still works, just need to be cleaned up a bit.
I had to modify the padding-bottom of the map to
padding-bottom: 46.25%;
In order for the list of items to display because of my screen size ^^
I don’t know how the FourSquare app is (never downloaded), but seeing @elia’s link I ended up with something like this:
Oh nice!
Now to figure out the blur when you pull down 
Something like this?
Very nice! I love it