Navigation or slider effect like www.melissahie.com

[azzcat]

I’m trying to set up a 4-section "page" like http://www.melissahie.com (she has 6 pages). She clearly states in her site that she uses mootools, but I’m not understanding what exactly the javascript code is.

I’d really like to stay within the jquery framework if possible, because I ultimately need to theme this layout for WordPress. My problem is that I cannot seem to find an explanation/tutorial on how to implement this effect–either in mootools or jquery framework.

I’ve set up a dummy site, with CSS. What I ultimately want to do is slow down the navigation and "slide" from one page to the other.

Here’s my test site: http://www.azzcatdesign.com/azzcatdevel … [email protected]/

Thanks in advance for any help or pointing me in the right direction!

–Catherine

[Wes]

Its a moo tools JS pretty easy to use and implement

http://demos111.mootools.net/Fx.Scroll

If you need some more help let me know

[Mr KiTT3N]

first set body css to {overflow: hidden;} /// This hides the scroll bars

Next,

wrap everything in a div (ie div#wrapper) this is what you going to move

all you have to do know is animate the wrapper

Code:

$(function(){

$wrapper = $(‘#wrapper’);
$(‘body’).css(‘overflow’ , ‘hidden’); // change css via js so if javascript isnt allowed users can still use the site

$(#nav a).click(function(){
$wrapper.animate({left: 0px, top: 0px;});
});
});

hope that helps

[azzcat]

Thanks guys! I’ll work on this tomorrow. Happy Sunday!

[azzcat]

"Wes" wrote:

Its a moo tools JS pretty easy to use and implement

http://demos111.mootools.net/Fx.Scroll

If you need some more help let me know

Help! :o

I did work on this all afternoon. I think I’m missing something in the mootools library, but I’m not sure. I get the concept of the inner div being larger than the wrapper. And I can get links to go to right area. But I cannot, no way, no how–get it to scroll or slide slowly–so you know you’re looking @ one big page.

New version loaded at http://www.azzcatdesign.com/azzcatdevel … zcat/#home

Thanks again!

[azzcat]

"Mr KiTT3N" wrote:

first set body css to {overflow: hidden;} /// This hides the scroll bars

Next,

wrap everything in a div (ie div#wrapper) this is what you going to move

all you have to do know is animate the wrapper

Code:

$(function(){

$wrapper = $(‘#wrapper’);
$(‘body’).css(‘overflow’ , ‘hidden’); // change css via js so if javascript isnt allowed users can still use the site

$(#nav a).click(function(){
$wrapper.animate({left: 0px, top: 0px;});
});
});

hope that helps

Hi. And thanks for the suggestion! I tried it but couldn’t get it to work. :( So I went back again to try the Fx.Scroll. Still no luck.

Gonna start reading the moo tools series (30 tutorials) from beginning.

Can this effect be done in jQuery? I was hoping to become competent in one or the other. So far, not so good!

[Mr KiTT3N]

"azzcat" wrote:

Hi. And thanks for the suggestion! I tried it but couldn’t get it to work. :( So I went back again to try the Fx.Scroll. Still no luck.

Gonna start reading the moo tools series (30 tutorials) from beginning.

Can this effect be done in jQuery? I was hoping to become competent in one or the other. So far, not so good!

Keep in mind that /** $wrapper.animate({left: 0px, top: 0px;}); **/
changes to where you want to end up at….

(change left:0px to left: 999px; — whatever is needed)

Secondly,
The div#wrapper should wrap everything…. your nav is going to be static no matter what being that its fixed position….

You can aim me if you need help — MrKitt3n

Thanks

[azzcat]

Thanks MrKitt3n,

I’ve been at this for hours and I’m just not getting it. Here’s my attempt with all content within #wrapper:
http://www.azzcatdesign.com/azzcatdevel … exAlt.html

Here’s my attempt adding duration of 2500–closely following jQuery directions: http://www.azzcatdesign.com/azzcatdevel … AltjQ.html

Got the movement, but I simply cannot get the duration of slow movement (I also tried "slow").
Head banging that this effect just isn’t working for me. :cry:

[azzcat]

Greetings all javascript gurus!

I’m still struggling with this thing. ARGH!

Gone back to mootools and pretty much copied both http://melissahie.com/ Melissa Hie’s code and http://digitarald.de/playground/fly-over-background/>Harald Kirschner’s code. And I’m still not getting it to work. :(

Here are my two examples. The first one is a la Melissa, and menu links do not work at all. The second is like Harald’s–the links work–but not the duration.
http://www.azzcatdesign.com/azzcatdevel … ecopy.html navigation like Melissa Hie’s site
http://www.azzcatdesign.com/azzcatdevel … l#content1 navigation like Harald Kirschner’s example site

If anyone could help, I’d really appreciate it. I know it’s doable, but I’m missing something.

Thanks!
Catherine

[Author]

Posts