[Pro] Apple Store Cart

Spike_Lupton · April 5, 2013, 4:08am

I’ve used this code, thanks to Walter’s post on the apple store cart effect. Is it possible to make it work on multiple items on a page? For example the first item would be a menu then as users scroll down the page as images appear they stick to the top of the page aswell as if they are laying on top of each other under the menu.

gist.github.com

https://gist.github.com/walterdavis/942402

gistfile1.js

var sticker = $('yourElement');
var origin = sticker.cumulativeOffset();
var width = document.viewport.getWidth();
var offset = 10; //pixels from top
var test = new Element('div',{style:'position:fixed'});
var cantBeFixed = (test.style.position.toLowerCase() != 'fixed');
//or, if you also want to simulate the effect on iOS, uncomment the following line
//var cantBeFixed = (Prototype.Browser.MobileSafari || test.style.position.toLowerCase() != 'fixed');
sticker['_style'] = sticker.readAttribute('style');
function stick(){

This file has been truncated. show original

Thanks,
Spike

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · April 5, 2013, 2:07pm

This is pretty much exactly the code for Sticker, with the exception that it won’t work in Freeway 6 (it lacks the fix I just added for that in the Action). You can apply Sticker to as many elements on the page as you like, but because they are each going to be set to position:fixed, you will need to work out the exact number of pixels apart (vertically) they will need to be in order to appear as though they are acting the way you want them to. The issue is that position:fixed elements don’t respect one another’s boundaries. You could easily end up stacking them on top of one another without further effort.

Walter

On Apr 5, 2013, at 12:08 AM, Spike Lupton wrote:

I’ve used this code, thanks to Walter’s post on the apple store cart effect. Is it possible to make it work on multiple items on a page? For example the first item would be a menu then as users scroll down the page as images appear they stick to the top of the page aswell as if they are laying on top of each other under the menu.

gist:942402 · GitHub

Thanks,
Spike

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Spike_Lupton · April 5, 2013, 2:12pm

Thanks Walt, I used your latest fix for the Sticker Action and it works brilliantly for what I want http://spyk.co.uk/sticker/ now all I need to do is figure out the anchors. They work scrolling down the page but if the page needs to scroll up to get to an anchor it just scrolls all the way back to the top of the page!!

Spike

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · April 5, 2013, 2:31pm

When an anchor scrolls all the way to the top of the page, that’s a sign that the anchor code itself is wrong. The default browser behavior when you link to an anchor that doesn’t exist is to scroll all the way to the top of the page. How are you creating these anchor links?

Walter

On Apr 5, 2013, at 10:12 AM, Spike Lupton wrote:

Thanks Walt, I used your latest fix for the Sticker Action and it works brilliantly for what I want http://spyk.co.uk/sticker/ now all I need to do is figure out the anchors. They work scrolling down the page but if the page needs to scroll up to get to an anchor it just scrolls all the way back to the top of the page!!

Spike

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Spike_Lupton · April 5, 2013, 2:35pm

I’m selecting a graphic element and adding the anchor from the edit menu. They work fine scrolling down the page but, for example, if the page is at the third anchor and I click to go to the second anchor the page scrolls all the way to the top.

Spike

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Spike_Lupton · April 5, 2013, 2:50pm

I’ve carried on playing about and instead of using the large ‘BG’ images as anchors I’ve used empty graphic elements and made those the anchors and it seems to have fixed the problem.

Spike

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · April 5, 2013, 2:56pm

Yay! I forgot to mention, sometimes what you see is what you asked for. It is common for Freeway to show an element in a particular location on screen, but for that element to actually live somewhere entirely different in code.

Walter

On Apr 5, 2013, at 10:50 AM, Spike Lupton wrote:

I’ve carried on playing about and instead of using the large ‘BG’ images as anchors I’ve used empty graphic elements and made those the anchors and it seems to have fixed the problem.

Spike

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Spike_Lupton · April 5, 2013, 2:58pm

It’s all a huge learning curve for me and so far I’m more than happy with with the results. Now I’ve got the base of the site figured out I can start adding some content.

Thanks for your help, if I could I’d buy you a beer!!

Spike

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options