asked on

How to achieve javascript / ajax horizontal sliding?

Greetings ...

I have a series of divs that are floated left each with some content. On clicking a link I want the appropriate div to slide out to the left and then slide back when the link is clicked. Currently I have them just disappearing by changing the className of the element. I've been using Scriptaculous to achieve various nice effects but i can't figure out how to do horizontal sliding with it. Can anyone suggest a decent solution?

Many thanks!

Michel Plungjan

sliding is dhtml and not ajax. ajax is fetching data from a server without reloading the url...

I am not sure which slide you want.
I added slideXXX and slideXXXXIntoView
to the effect.js from here
http://wiki.script.aculo.us/scriptaculous/show/EffectsTreasureChest

but I was not super impressed - could be my css is off

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script src="scriptaculous/prototype.js"></script>
<script src="scriptaculous/scriptaculous.js"></script>

</head>
<body>
<a href="#" onclick="Effect.SlideRight('slideDiv'); return false;">Slide</a><br />
<div id="slideDiv" style="display:none; position: absolute; top: 100px; left: 500px;"><span style="width:200px;" >hi, this is a text</span></div>
</body>
</html>

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

swintec

thx!

swintec

But in the new version (1.8) you have to use this example:

ul>
  <li><a href="#" onclick="$('slide').morph('background:#747474; width:149px;'); return false;">Menu 2</a></li>
  <li><a href="#" onclick="$('slide').morph('background:#fff; width:1px;'); return false;" >Menu 1</a></li>
</ul>

Open in new window