How can I do something like this: TapTapTap.com

Freeway
1

I just saw this website and I just loved the way how the content got scrolled in and out! How would I be able to do something that would work like that? I see that this is done with the MooTools framework, but I don’t know that.

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

2

The easiest way to do this in Freeway would be to use the Observer Action (part of Protaculous) to apply the Effect.Move function from the Script.aculo.us effects library. If you work out the correct x/y coordinates, it should be pretty simple to do. Let me know if you want to try, I can post some sample code. You’ll need to do a little math to figure out the position of everything, but it should be simple enough to do.

Walter

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

3

I like it… indeed… I have used scrolling effects in a website already thanks to Walters carousel (www.healtschool.nl), but this is a nice effect I would love to try as well.
Any tips would be appreciated!

Paul

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

4

Could you please explain to me step by step what to do? I don’t seem to find the Effect.Move action.

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

5

There isn’t an Action per se for the Effect.Move. Protaculous and Observer just give you the tip of the iceberg – they allow you to attach the libraries to your page, and to trigger code when events occur. To actually build this page, you will need to do some math and copy and paste some code.

So I made a very crude model of the TTT page last night, and worked through the problem. There’s a lot of different things going on in that page, and I’ve never used Moo and I’ve only had the slightest brush with this part of Scriptaculous, so it’s really quite bare at the moment. I’ll copy and paste the code bits here, and link up an example and Freeway file at Untitled

The first thing that needs to happen is you have to lay out your page. Once you have it looking the way you want it to on initial load, then you can add the code and make things appear and disappear like magic.

If you get started making your page now, I should have something to show you a little later today. Lay out the base view – what people see when they first come to your site. Then make each of the screens that would appear from the left further on down the page. For simplicity’s sake, make each one by drawing an HTML box, then with that box selected, draw each sub-element directly over that box. Don’t draw anything outside the lines of the original HTML box: what you are going for here is to make a self-contained nested layer for each “pane”.

Walter

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

6

I’ve put the Freeway file and the demo up on scripty, so if you follow that link you can see it working.

Here’s a few notes to hopefully make it a little clearer.

(I just scrolled back and added this: this is not a FEW notes, it’s quite long. Skip if code scares you. Please!)

This page must be laid out with the CSS button On, and everything you draw (that you want to be a part of this effect) must be a layer. If you didn’t have the CSS Layout button on, go back through your layout and check the Layer checkbox in the inspector for each element of the effect.

There is a layer drawn where the panes will appear. Each of the panes is a positioned child of that layer. There are a couple of ways to do this. The hardest would be to draw them in place, the easiest would be to draw your panes wherever you like, then use the Site panel to nest them later. For clarity, I’m referring to the layer drawn where you want the panes to appear as the main layer. This layer must have Overflow set to hidden (which is not default).

Make sure Show Items is on and the disclosure triangle next to your page name is pointing down, or (shortcut) click on the header of the Site panel and it will toggle to show all of the elements of the current page.

Select one of the panes in the site panel (it will highlight in the design view so you can see what you’ve clicked on) and then drag it (within the site panel) until it is beneath and to the right of the main layer. Let go, and the pane should become a child of the main layer. (It will appear indented in the list below that main layer.) Repeat for each of your panes. Now would also be a good time to name these panes something memorable. Using the Inspector, set the top and left values of each pane as follows: left = 0, top = 0 + height of any of the other panes above it. When you’re done, you should have all of your panes visible, one directly above the other.

Adjust the height of your main layer so that all of your panes are visible. (Multiply the height of one pane by the number of panes and set that as the height of the main layer.)

There’s a function defined in the Page > HTML Markup which resets the position of the trigger elements and the panes. This is where we start with the math part of this exercise.

<script type="text/javascript">
function resetAll(){
    $('shell').childElements().each(function(elm){
        if(elm.positionedOffset().left == 0)
            new Effect.Move(elm,{x:-700,y:0, duration:0.7});
    });
    $$('div.tab').each(function(elm){
        if(elm.positionedOffset().left > 55) 
            new Effect.Move(elm,{x:-20,y:1,duration:0.4});
        elm.setOpacity(0.5);
    });
}
</script>

The number 700 above is arrived at because it’s much wider than the panes. You could use something that’s just one pixel more than the width of your panes, so in my example, I could have used 371. I may go back and change my example later and see if it makes it any better. But whatever you choose for this number, make sure that you make note of it, because you have to use it again later.

The number 55 above is the left position of the trigger elements (in my example, the colored blocks on the sushi board, in the TTT original, the application icons). You will see this position in the Inspector when you have one of them selected. In order to use this code, you must make these trigger elements all start at the same left position. You could certainly re-write it to support a different layout, but I leave that as an exercise…

The numbers 20 and 1 above refer to the move that the trigger element makes when it’s clicked. We’ll refer to these again later. These values were arrived at by trial and error, and make the trigger appear to move in a straight line relative to the grain of the sushi board. You will want to adjust these to fit your layout and your desired animation.

So with your code adjusted to match the real layout you drew, you can close the Page > HTML Markup dialog and move on.

Next, apply Protaculous Action to the page. (There’s a copy in the ttt.zip archive linked from the demo above.) Select either scriptaculous-packed or scriptaculous from the Library picker. Click the top Function Body button and add the following code:

$('shell').childElements().each(function(elm){
    if(elm.positionedOffset().left == 0)
        elm.style.top = '0px';
        elm.style.left = '-700px';
});
$('shell').style.height = '332px';

Remember where I said you would need 700 again? Here’s where it goes. Two more things you need to figure out. First, I named my main layer ‘shell’ using the Title field of the Inspector. Click on your main layer, and see what it’s called (change it to something memorable) and replace shell above with your layer’s ID. Also, where I have 332, change that to the height of one of your panes.

What this code does (and it fires before the page is visible, that’s why it’s in the top function, not the bottom one) is gather up all of your panes and set them to a known X/Y location relative to their parent. Because the parent has Overflow set to Hidden, the panes disappear from the page. Then we set the height of the main layer so that the page won’t appear taller than its contents. The reason we do all this with JavaScript is so that anyone who comes to your site with JavaScript turned off will see ALL of your content at once. They won’t see a big nothing, as they would if you set all of this position business with CSS.

The final layer of the cake is to make the individual triggers work. This part is done with the Observer Action (part of Protaculous).

Select the first trigger element, and apply Observer to it. In the first Event field, add the word click. Click on the Function Body button and add the following code:

if($('red').positionedOffset().left == -700){
    resetAll();
    new Effect.Move('red',{x:700,y:0, duration:0.7});
    new Effect.Move(this,{x:20, y:-1, duration:0.4});
    this.setOpacity(0.99);
}

Now we are referring to a bunch of previous code. ‘red’ refers to the ID of the pane that we want to move. 700, again that’s how far to move the pane to the right – change that in both its negative and positive forms. And 20 and -1 are the move of the trigger element. Adjust all to fit your layout and desired animation.

One last thing you must do to the trigger is to apply a classname to it. Freeway doesn’t make this easy, you will need to use the Extended dialog for this. With the trigger element selected, choose Item > Extended from the main menu. Click on the < div > segment of the dialog, then click new, and enter

class
tab

in the Name and Value fields, respectively. While you’re in there, you can move over to the < div:style > segment and add

cursor
pointer

so the “finger” will appear when you hover over the trigger.

Now repeat for each of the trigger elements, adjusting the name of your desired target in the script as you do.

Preview in a browser, and see what (if anything) happens. The very best way to start debugging this (if it doesn’t work out of the box) is to use Firefox with the FireBug extension installed. This will give you line-level error reports and point out what’s gone wrong. As with anything JavaScript related, the actual error will probably result from a typo or case-sensitivity error. Every detail matters in this sort of thing! If you can’t figure it out, then post a link to your page on a public server, and one of us will probably be able to help.

It is critical that you set your Publish preferences to More Readable if you want help, otherwise you will just be making more business for my wife, the eye doctor.

Hope this helps, and happy hacking!

Walter

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

7

Two things: First, you must select the same library in Observer that
you chose in Protaculous, so either scriptaculous or scriptaculous-
packed.

Second, I changed the values in my example from 700 to 371, and the
animation looks much smoother to my eye. I did not update the source
document, so you’ll have to remember that when you try working
through that file.

Walter

On Sep 20, 2008, at 11:55 AM, waltd wrote:

The final layer of the cake is to make the individual triggers
work. This part is done with the Observer Action (part of
Protaculous).

Select the first trigger element, and apply Observer to it. In the
first Event field, add the word click. Click on the Function Body
button and add the following code:

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

8

As ever Walter - above and beyond the call of duty.

I will certainly have a go at this now that you have done so much of the hard work.

David

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

9

Wow, I am impressed Walter… I am going to have a go as well!

Paul

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

10

Wow Walter! I can’t believe you actually did all this just for me!!

Sometimes it kinda creeps me out how ‘all-knowing’ you are…

I actually do like paulvw’s " http://www.healthschool.nl " thing to! I’m thinking of doing both. Is that made with the Mootools Suite?

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

11

I actually do like paulvw’s ” www.healthschool.nl ” thing to! I’m thinking of doing both. Is that made with the Mootools Suite?

No, that one is actually done with Walter’s Carousel Action - search the threads here for more on that.

David

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

12

On 26 Sep 2008, 10:59 pm, Egill Sigurdur wrote:

Wow Walter! I can’t believe you actually did all this just for me!!

Sometimes it kinda creeps me out how ‘all-knowing’ you are…

I did it to see if I could – I hadn’t seen that page before, and I’m always looking for new stupid browser tricks to impress my clients. When I discovered it was pretty easy, I posted my result.

The all-knowing bit is a double-edged sword. I read a lot, I remember portions of most things I read, and my Google-fu is very very strong. I worry sometimes that I spend too much time answering questions here, it can be a bit obsessive. But I feel that if somebody can ask a question, and I can answer it, I should. Most of the time the problem isn’t that the information isn’t readily available somewhere, but that the asker doesn’t know where to look or how to frame the question so the answer can be found by other means.

The other part of this is that while I like to write and can do so pretty speedily, my biggest problem is finding where to start. So answering questions is a creative crutch, since it gives me a place to start!

Walter

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

13

Hehe! I’ve never heard this word before. “Google-fu”. Very funny!

You are fantastic!

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

14

Walter aquickie about your example.

I used your file but the onclicks were not attached to red, blue and green so I did that and it worked for me.

But…after I have done the three and go back to any it doesn’t happen the next time I click. Is there a step that has been missed

David

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

15

Could you post a link to the non-working example?

Walter

On Oct 4, 2008, at 7:28 PM, DeltaDave wrote:

Walter aquickie about your example.

I used your file but the onclicks were not attached to red, blue
and green so I did that and it worked for me.

But…after I have done the three and go back to any it doesn’t
happen the next time I click. Is there a step that has been missed

David

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

16

I just downloaded the example, and there are indeed click events
attached to each of the triggers – just not in the spot where you
were looking.

If you create an onclick event in the Extended dialog, then you would
be creating an inline handler. But what the Observer action does is
set up an unobtrusive observer. The code it generates looks like
this:

document.observe('dom:loaded',function(){
	$('redtab').observe('click', function(evt){
		if($('red').positionedOffset().left == -700){
			resetAll();
			new Effect.Move('red',{x:700,y:0, duration:0.7});
			new Effect.Move(this,{x:20, y:-1, duration:0.4});
			this.setOpacity(0.99);
		}
	});
});

Here’s what this does, line by line:

  1. Waits until the DOM is loaded (but the page is not necessarily
    done downloading or displayed) and then fires an anonymous function.
  2. Attaches an observer to the click event on the redtab DIV that
    fires another anonymous function.
  3. If the red DIV is not already showing, then does the next 4 lines
    of things.
  4. Fires the resetAll function, which does what it says on the tin.
  5. Moves the red DIV to the right 700px taking 7/10 of a second to do
    so.
  6. Moves the redtab DIV to the right 20px and up 1px taking 4/10 of a
    second to do so.
  7. Sets the opacity of redtab to 99%

The rest of the lines just end the various loops and tests.

So it’s line 2 that does the work that you might be expecting to be
done by an inline onclick handler. This whole thing works here, in
both major browsers[1], so I’m not sure what’s happening on your end.

Walter

  1. By which I mean, of course, both Safari and Firefox. On a Mac.

On Oct 4, 2008, at 7:28 PM, DeltaDave wrote:

Walter aquickie about your example.

I used your file but the onclicks were not attached to red, blue
and green so I did that and it worked for me.

But…after I have done the three and go back to any it doesn’t
happen the next time I click. Is there a step that has been missed

David

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