Link to home
Create AccountLog in
Avatar of dazspain
dazspain

asked on

java script, i would like to create a full page slide transition

i would like to know how to get a full page (div A) slide out to the left and bring another full page (div B) in from the right, using a top navigation with java script. (and so on with different links)
a simple version of the effect is at http://demos.mootools.net/Fx.Slide
i am just starting with java script so a point in the right direction or some code would be very usefull
many thanks
Avatar of favoretti
favoretti
Flag of Netherlands image

What's the issue of using the same Fx.Slide library to do that?
Download FX.Slide, click on "js code" link top right of that link you gave us, and look at how they do it :) 3 lines of code.
Avatar of dazspain
dazspain

ASKER

they have 1 div, slide out, (left) and slide in again (from left)
i am trying to understand how to make a div on the page slide out (left) and a new one (div2) slide in (right) to replace div 1.
I am new to java script, i can see how theirs works but hit a brick wall trying to bring one in from the right
best wishes
ASKER CERTIFIED SOLUTION
Avatar of favoretti
favoretti
Flag of Netherlands image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
thanks, this is a good tutorial on a collapsing slide div from the top, which mootools cover.
the effect i want to achieve is on this web site http://www.teamviget.com/
full page slide out new page slides in
best wishes
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
thanks. this is definitely something they have used (our positions links)
so this is the perfect link for that particular effect.
however, i will study it much longer.  i am still looking for the page slide out left and new page slide in right.
i have been on this a copule of days now.
it has got to be a bit of code. i would of thought mootools would of covered this.
i will take this code and have a mess with it.
thanks i won't close this just yet.
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
that would be brilliant if you could do that, i will attempt it myself, it is something i would like to use a lot.
it is only straight forward when you know how.
best wishes.
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
hi thanks for the above, any chance you can tell me what part is saved in html and js,
i can not seem to get it workin.......
i am new to js.
best wishes
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
One thing, it will work in IE _only_ :)
OK thanks for your input, a couple of days ago i would have been jumping through hoops.
your code made me smile, i liked it. but since posting this i found that adobe spry has the effect i needed, which i never new about. the code seems to be smoother, runs a bit better, not much, also it is cross browser friendly. I couldn't get yours  to work at first in firefox. which you have explained.
so my next question for some help would be..
could you tell me how i would use a graphic on a page to trigger off the  js code from the site below.
http://gsgd.co.uk/sandbox/jquery/easing/ 
(from favoretti)
i don't want the graphic inside the accordion but to the bottom so when accordion opens the graphic is pushed downwards.
the effect can be seen at http://www.teamviget.com/ 
meet our designers / see our positions

best wishes
then i can close this ticket, you have been a great help
many thanks.
> could you tell me how i would use a graphic on a page to trigger off the  js code from the site below.
The graphic on a page? What do you mean?
sorry mate, what i mean is.....
on the spry accordion and mootools accordion and jQuery Easing (the button is contained inside)

i want a button (which i called a graphic) outside the container which can trigger off the accordion opening so the button is at the bottom and is pushed down with the rest of the page.
rather than the button being at the top.
please see http://www.teamviget.com/
meet our designers / see our positions

does that make more sense ?
mate i am losing the plot
the code i require is this i think

$('slidein').addEvent('click', function(e){
      e = new Event(e);
      mySlide.slideIn();
      e.stop();
});

i just want to trigger off a slide (down) which is back in mootools.
i am going to take a break for now. go lay in the sun for a bit.
i am new to java script.
if this works later i will close this ticket. and thanks for offering to write out the code..