[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to achieve javascript / ajax horizontal sliding?

Posted on 2007-08-01
4
Medium Priority
?
7,685 Views
Last Modified: 2008-06-08
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!
0
Comment
Question by:equentin
  • 2
  • 2
4 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19607791
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>
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1000 total points
ID: 19607830
Ahh, this is better

<!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>
<script>
var toggle = true;
</script>
  </head>
  <body>
<a href="#"
onclick="if (toggle) Effect.SlideRightIntoView('slideDiv');
else Effect.SlideRightOutOfView('slideDiv');
toggle=!toggle; return false;">Slide</a><br />
<div id="slideDiv" style="border:2px solid green; display:none; position: absolute; top:100px; left:100px;"><span style="height:20px; width:200px; border:2px solid red; " >hi,&nbsp;this&nbsp;is&nbsp;a&nbsp;text</span></div>
  </body>
</html>
0
 

Expert Comment

by:swintec
ID: 21738114
thx!
0
 

Expert Comment

by:swintec
ID: 21738153
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

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month17 days, 21 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question