Screens + MagicGellan2 in Foundation?


(Arvin Rapadas) #1

I’m trying to create a Table of Contents-like page inside a Screens Page.
Can I use MagicGellan2 to create anchor links that scroll to other Screens pages?


(Andrew Tavernor) #2

@arvrap You can use MagicZones set to link mode to create the Magicgellan2 menu. The link in each zone would then simply be the Screens page or slide anchor link. Here is how to link to specific screens pages or slides.

What you cannot do is use scroll markers (magic marker stacks) as Screens does not scroll the page in the conventional sense.


(Andrew Tavernor) #3

@arvrap I’ve made a little demo of using MagicGellan2 zones to link to other slides on a screens page. You could also use the same technique to link to other screens pages (using the anchor links you set) or using a link to another page in your project entirely.

In this example the MagicGellan2 is set to static and is just on the second page containing the slides, you could however use it floating over all screens pages.

I should say however that if you only need to scroll to pages then you should use the Screens menu if you can, it is automatically generated and saves you a lot of setup time.

http://sandbox.bigwhiteduck.com/screens-mag/

I’ve added this to the MagicGellan Wiki page where there is also a link to the project file if it helps with understanding what I did.


(Arvin Rapadas) #4

Hi tav,

Thanks for all your help, this is fantastic. What I’m currently trying to do is use the MagicLink2 stack to turn a paragraph into a link that scrolls to a Magic Marker 2 stack, on a separate screens page. I’m currently using the Screens Menu for a sticky top bar, but I’d like the ToC links to work as well. Does that make sense?


(Andrew Tavernor) #5

Hi @arvrap,
I see what you want to do now. I’ll try and explain the issues a little.

MagicGellan, of course, uses the Foundation Magellan JS component to smooth scroll in a page. Now, it also has a fall back anchor link that will behave as a normal non-scrolling link in the event that javascript is disabled, or if that link refers to another page.

In your case, if you are linking to another page, it really makes no difference whether you use a magellan link (Magic link stack) or any other link (such as Joes free link/anchor stack) as the secondary target page will not smooth scroll to the link anchor, rather it will just open immediately at that point.

Now, if that secondary page is a screens page, the same principle applies except that you will need to use Screens proprietary anchor format as described in the link in my first post.

This is essentially because screens does not scroll the page in the conventional sense. Think of it as a full browser height, vertical slider. All the content is just in different slides that are hidden behind the currently active slide. The page itself is not scrolling, rather just the content of each slide is slid in and out of view to give the appearance of scrolling. This is the reason that you need to use the special anchor links that you define in each of the screens page stacks.

I hope that helps.