ansaurus

Question

Answer 1

+1 A:

I would go about it in the following approach...

Make sure your content divs have a transparent background and then create another div at the top of the list that is also transparent until the selected event occurs and then set it's background color so it appears but be sure that it's z-index is lower than that of the content divs... then you could look into using a library like scriptaculous to animate the div moving downward, you can get the position it needs to go to from the div that is marked selected so you know when to stop... I'm sure they have some cool velocity effects to make it a little more flashy (I am envisioning it quickly scrolling to its desired location and then slowly "locking" in to place)

Hope this helps your design planning some

Flash84x 2010-03-24 23:25:50

Thanks for the input. I was hoping to stick with jquery.

Andy 2010-03-24 23:37:26

Well you can omit the scriptaculous and simply use jQuery http://api.jquery.com/category/effects/

Flash84x 2010-03-25 00:06:14

Answer 2

+1 A:

Interesting request :) You can do this with .animate() and a little bit of CSS, like this:

<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   </script>
   <style type="text/css" >
    #content div { width: 200px; z-index: 2; }
    #content div.slider { position: absolute; background: #99AABB; z-index: -1; }
   </style>
 </head>
 <body>
<script language="javascript" type="text/javascript">
$(function(){
  $("#content div:not(.slider)").click(function() {
   $(".slider").animate({ top: $(this).offset().top, height: $(this).height() });
  });
});
</script>
  <div id="content">
    <div class='slider'></div>
    <div>Content 1 Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test</div>
    <div>Content 2<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test</div>
  </div>
 </body>
</html>

Try it out :) Just click on either div to see the effect. See a demo here

The important bits:

Ignore the .slider div in the click handler
.animate() to same offset/height as destination div
Lower z-index so it shows up as the background
You could use an image, whatever's in the CSS for the .slider div will work

Nick Craver 2010-03-25 00:17:04

You legend! Thats exactly what i was after. Thank you so so so much.

Andy 2010-03-25 07:56:19

Useful site as well that you had your demo on.

Andy 2010-03-25 07:56:47

@Andy - Welcome! That was interesting to do, might end up using it myself somewhere :)

Nick Craver 2010-03-25 10:45:09

ansaurus

tags:

views:

answers:

Jquery Slide to position on click

related questions