Looking for a certain effect...

[deficit]

Hello,

I'm looking for a certain JavaScript/DHTML effect for my website, but I'm not much of a JavaScripter. I specialize mainly in graphic design, (X)HTML, CSS, and lightweight PHP. Anyhow, the effect I'm looking for is a bit hard to explain, so I'll start with giving you a bit about the layout itself to visualize: the navigation for the site is in the form of a horizontal set of icons at the top, within the header. The content for each "page" is in layers, which will be able to slide in and out of the header vertically when the corresponding navigation icon is clicked. All I need basically is a script which will be able to:

a.) When the site initially loads, the index page contentent layer should slide down by default, but without using "body onload()", so that it can remain XHTML 1.0 Strict compliant (body onload() is considered depreciated).

b.) When the user clicks a navigation link, the currently displayed layer should slide up, and the layer corresponding to the clicked link should slide down.

c.) The width of the layers should be able to stretch to the width of the browser window.

d.) An acceleration and deceleration effect on slide would also be great.

The closest thing I can find to what I'm looking for is at http://www.dyn-web.com/dhtml/slide/slide-onclick.html. This example is almost EXACTLY what I'm looking for, only it slides horizontally, and does not appear to be able to be dynamically adjusted to fit the screen width. You can use the code in that example if you'd like, it might be easier just to edit what's there. If you can help, or know of an existing script that can do the above mentioned, I'd greatly appreciate your guidance.

Thanks SO MUCH in advance to any and all who opt to help with this.

[deficit]

Maybe it would help to have a better visual? My current site is http://www.wickedmethod.com. I'm looking for the above mentioned code for my redesign project, and the redegned layout will be VERY similar to the current one. I'm looking for this code so that instead of taking the visitor to a new page every time they click on a navigation link, the content for each page will vertically slide down from the header. The example contained in the link in my previous post is almost exactly what I need, only the slide should be vertical rather than horizontal. The layout will also be able to stretch up to 1280px width depending on resolution, so of course the content layers should be able to do the same.

Here is another example that is VERY close to what I'm looking for...
http://www.harrymaugans.com/2007/03/...g-animated-div
I posted a comment under the username "Chris" in the above linked site, so any additional questions about what I'm trying to accomplish might be answered in there.

Here an image of the (incomplete) redesign...

[tech_support]

MooFX can do these kind of "visual" effects.
See here: http://moofx.mad4milk.net/

[Bob90]

If you use moofx use the robert penner equations for the slide effect you want.

there is a link to robert penner on the moo page under "whats new"

[deficit]

Well, I checked out MooFX, thanks for the tip, tech_support. Only problem I'm having at this point is, while I believe that MooFX is quite capable of doing what I'm trying to do, I'm not much of a JavaScripter. The way it is set up by default, it's made to be used for an "accordian" effect. The problem with this is that my navbar, as you can see, is horizontally aligned with the content area below it. The accordian would be fine if I was setting my navigation up like that on http://moofx.mad4milk.net/. This is probably a simple 2 second solution for some of you, whereas I know practically nothing about JavaScript.

Is there any way someone could make a demo page with at least 2 horizontal links, with the content areas sliding down and up underneath onclick? Even just a simple 2 link example would be enough to get me going - I know enough about JavaScript to be able to follow by example.

Many thanks again for turning me on to MooFX, and to anyone who wishes to help!!

[psilos]

Well actually moo.fx has been replaced by a newer javascript framework: mootools which i recommend in using.

Although, it needs some effort to learn it, since you are not so good in javascript (as you mentioned), but finally it worths the try..

[mwinter]

Well actually moo.fx has been replaced by a newer javascript framework: mootools which i recommend in using.

Generic frameworks tend to obscure the language, and by extension, hinder the the understanding of it by its users. They also tend to be a waste of space: in this case, over 38kB of data, much of which will never be used, packaged in a way that make it hard to strip out the unnecessary junk.

Mike

[psilos]

Generic frameworks tend to obscure the language, and by extension, hinder the the understanding of it by its users.

I absolutely agree with you for that.

They also tend to be a waste of space: in this case, over 38kB of data, much of which will never be used, packaged in a way that make it hard to strip out the unnecessary junk.

I quit disagree with that..
It depends on what you want to do with this framework. It gives you many options on downloading this framework by selecting which modules(scripts) you want to include in and also if it will be packaged or not. mootools.net/download

I also agree that is not proper to discuss in this forums about other javascript frameworks..
I have no problem if u want to delete this posts.

psilos

[deficit]

Ok so what do you guys recommend then? The best thing for me would be a simple example, as I said earlier. Simple is best, but in functionality, it has to work exactly how i need it to work, but if it's a smaller scale (i.e. 50px wide, only consists of 2 links) that would be ok too. All I'm asking for is a simple, small scale example of the effect I described earlier. If anyone already know of an existing one and can send me on down that way, that'd be awesome. If it's not too much trouble and someone could build me a sample demo, that would be just as good or better. I'm seriously considering letting this idea go, but I hate letting go of part of a vision once I have it. When I originally thought the idea up, I figured I'd be in for a little trip to Dynamic Drive or Hotscripts to pick up a little vertical slider script, which would be a whole one hour process. Here it is, almost a week later and I've researched, and searched, and posted, and emailed, and still got nothing. That's the wonderful world of web development for ya!

Cheers!

[deficit]

Ok, I've managed to muster up a demo using mootools which does exactly as I asked for help to do. Now I have a new issue on the technical end of it. Everything appears to be working as planned, but if you mess around with randomly clicking the navbar links, you'll see that sometimes you can get the "about" page content to slide in under the "home" page content. Check out the demo here to see what I mean: http://www.wickedmethod.com/FxSlideTest.html

How do I fix this so that whenever another menu option is clicked, the currently displayed content will ALWAYS slide out first? Basically, I need to prevent 2 content areas from ever being displayed at the same time.

Thanks!

PS - If you mess around with the code, try taking away the "delay" property, and you'll see that the "about" content area never actually slides up for some reason whenever you click to go back to the "home" content - the "home" content actually just slides down over it or something. The delay actually helps to hide this fact, but I think my problem is caused by the fact that "about" never actually slides back up when it is displayed and you click "home".

EDIT: Ok, I just figured out that it only happens if you click "about" while "home" is still in the process of sliding down. Anyone know why this is happening or how to fix it?