[bazzle]

Hi people.

I've been working on my site:

Barry Richards Web Designer Portfolio

I've designed it so, as you have probably guessed it's all one page, but divided into sections/pages the up/down control is intended to let you cycle between these sections.

Now it's come to implement it, I've hit a wall and started to doubt if it's possible. I've trawled the web for sites with a similar navigation but only found ones that have up/down buttons on each section.

The way I see it, is I need some javascript that, for every time a viewer clicks on the down button, the script detects where on the page the viewer's browser is focussed and skips to the next section - and for up, skips to the previous section.

Does anyone have any ideas? or seen any sites that have done this? (I'm sure I have in the past but my googling can't turn anything up right now)

[iandevlin]

jQuery will do that for you. A mixture of tabs and localScroll should sort it out.

[bazzle]

I've had a look into localScroll. It seems to only refer to horizontal scrollers within containing div's. I want the up/down control to scroll the entire page up and down.

Think I might be over my head here.

[iandevlin]

Look at HTML5 Laboratory, which uses localScroll() for the internal navigation.

Isn't that the kind of thing that you want? You can link the up and down buttons to the scrolling.

[delatorre]

With MooTools you could use scrollTo - it takes coordinates rather than an element id, so you'd need to either hard code that or get the coordinates of an element first.

MooTools Docs - Element/Element.Dimensions

[bazzle]

Originally Posted by iandevlin

Look at HTML5 Laboratory, which uses localScroll() for the internal navigation.

Isn't that the kind of thing that you want? You can link the up and down buttons to the scrolling.

Sort of, only I want the buttons to stay static on the page, and consist of next and previous buttons.

Basically, each section of the page is a div with an ID (#page-1, #page-2, #page-3) I want the scroller to work by going to the next or previous ID's relative to where the user is on the page.

Sort of like how horizontal carousel scrollers work, but not really because I don't want each page to be of the same dimensions, and I want the whole site to scroll up and down, and not a div within a container.

[iandevlin]

I was just talking about the movement that you wanted, that it was the same as what my site does, which you have confirmed.

Not 100% sure how to have the buttons stay static, but I have seen it done, so it's possible.

I'm sure this can be done the way you describe, but I haven't done anything like that myself (I do like the idea though) so I can't say for sure how. I'd have to play with it for a while to see how it could be done. I know that you can see which item it's currently on and navigate accordingly.

[bazzle]

Originally Posted by delatorre

With MooTools you could use scrollTo - it takes coordinates rather than an element id, so you'd need to either hard code that or get the coordinates of an element first.

MooTools Docs - Element/Element.Dimensions

That could work if I made the button scroll the element x pixels each time it's pressed.

only drawback is that I'd need to make each page exactly the same height to work.

[bazzle]

Originally Posted by iandevlin

I was just talking about the movement that you wanted, that it was the same as what my site does, which you have confirmed.

Not 100% sure how to have the buttons stay static, but I have seen it done, so it's possible.

I'm sure this can be done the way you describe, but I haven't done anything like that myself (I do like the idea though) so I can't say for sure how. I'd have to play with it for a while to see how it could be done. I know that you can see which item it's currently on and navigate accordingly.

Yes, I would like a nice scrolling movement effect. That's the easy part though.

If you work out how to do it or find a website that does it effectively let me know.

[Pete Nice]

surely it's just going to be something like this:

Untitled Document
Sticky (Fixed) SideNav Layout with CSS – DesignM.ag

[iandevlin]

Originally Posted by Pete Nice

surely it's just going to be something like this:

Untitled Document
Sticky (Fixed) SideNav Layout with CSS – DesignM.ag

Ah yes, that combined with scrollTo should do the trick. Now all you have to do is combine them!

[bazzle]

Yes like that, the complication arises because I want a static up/down button that can move to the next or previous pages.

[Pete Nice]

Originally Posted by bazzle

Yes like that, the complication arises because I want a static up/down button that can move to the next or previous pages.

I don't understand? Ian's given you the scrolling, I've supplied the static menu element how does the combination of the two not satisfy what you're trying to achieve?

[Rotuy]

bazzle, that should do it. Just use anchors for each section and the menu is static so it will always be in the same place.

[pagey]

I think he wants it so you can click to go to the previous, or next bit. So if you're on section 2, you can click up to go to 1, or down to go to 3.

Not really sure why this is necessary though, seems more trouble than its worth, and a bit of a usability nightmare.

[bazzle]

Originally Posted by Rotuy

bazzle, that should do it. Just use anchors for each section and the menu is static so it will always be in the same place.

But you would still need individual buttons, each one to link to it's own section of the page. I'd be able to do that in 2 seconds. if that's what I wanted.

What I want is the functionality for an up/down control so if you press down, it will scroll to the next section down, as opposed to going to a specific section.

Argh no one understands where I'm coming from.

[bjzaba]

Is it sort of like the ffffound controls? But with animation? Dropular had that kind of thing too....

[bazzle]

Originally Posted by pagey

I think he wants it so you can click to go to the previous, or next bit. So if you're on section 2, you can click up to go to 1, or down to go to 3.

Not really sure why this is necessary though, seems more trouble than its worth, and a bit of a usability nightmare.

Yes exactly, just like this STUDIO E-SPACE INC. only I want buttons that go down to the next section and up to the previous aswell.

I've seen it done a million times before, but with the up/down buttons within each section. This can be done easily because you can hard code where each anchor should end up. Not seen it done where the button is positioned static though, which is what I'm trying to do.

[iandevlin]

I know what you mean bazzle.

In the thread posted yesterday (can anyone tinker with this jquery?) there was something similiar with regards to the "relativeness" in jQuery.

e.g. with

$('.slideshow:eq(0)').cycle...

so sometime similiar would need to be done.

[bazzle]

Originally Posted by bjzaba

Is it sort of like the ffffound controls?

yes, that's the bugger.

Thanks for that. I'm gonna rip that site apart now and work out how they did it.