sliding a div

  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Posts: 153
  • Loc: Romania

Post 3+ Months Ago

hi.. i saw tis effect at http://mediasauce.com/ and tried to remake it ever since but with no luck. I tried jquery yet it is very undocumented on its tutorials. Can anyone give me a code on how to make a div slide down and bounce a few times and a reference to where to get the jscripts from for this effects also, thanks?:)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

All I could find was this tutorial on how to make a simple slider: http://www.harrymaugans.com/2007/03/06/ ... t-and-css/

Actually, the code is quite heavy because it allows for multiple sliders on the same page - you can trim the code up a bit if you don't need that.

Unfortunately, I couldn't find any script that does the bouncing effect: you could probably code it yourself - whenever the sliding effect ends, you start if off in the reverse direction with a smaller distance until it reaches a threshold minimum. Let me know if you need any help regarding this.
  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Posts: 153
  • Loc: Romania

Post 3+ Months Ago

hmm indeed it is heavy.. let me show what i eneded up with:
Code: [ Select ]
<head>
<style type="text/css">
div#comm{
position:relative;
float: left;
width:795px;
padding-left:25px;
}

div#comm span#x{
margin-left:5px;
padding-left:3px;
padding-right:3px;
cursor:pointer;
background: url() #a4bda4;
border:1px solid #636363;
}

span#x:hover{
color: #faf4f4
}

div#space{
display: none;
}

div#space p{
margin-top:0;
margin-bottom:0;
width:775px;
background: url() #f2fff0;
border:1px solid #636363;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    
    $("#x").click(function () {
     if ($("#space").is(":hidden")) {
        $("#space").slideDown("slow");
     } else {
        $("#space").hide("slow");
     }
    });

});

</script>
</head><body>
<div id="comm">
<span id="x">Click me!</span>
<div id="space">
<p>
This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
</p>
</div>
</div>
</body>
  1. <head>
  2. <style type="text/css">
  3. div#comm{
  4. position:relative;
  5. float: left;
  6. width:795px;
  7. padding-left:25px;
  8. }
  9. div#comm span#x{
  10. margin-left:5px;
  11. padding-left:3px;
  12. padding-right:3px;
  13. cursor:pointer;
  14. background: url() #a4bda4;
  15. border:1px solid #636363;
  16. }
  17. span#x:hover{
  18. color: #faf4f4
  19. }
  20. div#space{
  21. display: none;
  22. }
  23. div#space p{
  24. margin-top:0;
  25. margin-bottom:0;
  26. width:775px;
  27. background: url() #f2fff0;
  28. border:1px solid #636363;
  29. }
  30. </style>
  31. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  32. <script type="text/javascript">
  33. $(document).ready(function(){
  34.     
  35.     $("#x").click(function () {
  36.      if ($("#space").is(":hidden")) {
  37.         $("#space").slideDown("slow");
  38.      } else {
  39.         $("#space").hide("slow");
  40.      }
  41.     });
  42. });
  43. </script>
  44. </head><body>
  45. <div id="comm">
  46. <span id="x">Click me!</span>
  47. <div id="space">
  48. <p>
  49. This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
  50. This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
  51. This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
  52. </p>
  53. </div>
  54. </div>
  55. </body>

I think it's less code in here but i', stuck on the bouncing in jquery. There is the jquery easing plug but i have no ideea how to make that work!??:P Any alternatives to this code to make it bounce at the end!?
  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

I'm not familiar with jQuery, but I don't think the built-in slideDown method can help with the bouncing, because it performs a full slide. For that, you'll need a function that can perform a partial slide (up to a given height) with a callback provision. (a function to be called when the sliding finishes) Let's say you have such two functions named "mySlideUp" and "mySlideDown"; you would then use it as follows:
Code: [ Select ]
var goingDown = true;
var bounceHeight = 50;
var maxHeight = 200;
mySlideDown(maxHeight, 'bounce()');

function bounce() {
bounceHeight -= 10;

if (goingDown)
    mySlideUp(maxHeight - bounceHeight, 'bounce()');
else
    mySlideDown(maxHeight - bounceHeight, 'bounce()');

goingDown = !goingDown;
}
  1. var goingDown = true;
  2. var bounceHeight = 50;
  3. var maxHeight = 200;
  4. mySlideDown(maxHeight, 'bounce()');
  5. function bounce() {
  6. bounceHeight -= 10;
  7. if (goingDown)
  8.     mySlideUp(maxHeight - bounceHeight, 'bounce()');
  9. else
  10.     mySlideDown(maxHeight - bounceHeight, 'bounce()');
  11. goingDown = !goingDown;
  12. }
  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Posts: 153
  • Loc: Romania

Post 3+ Months Ago

can you give me the full code with the div and the action button please:) i can't seem to make it respond..
  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

I haven't actually tested the code that I posted, it's just a guideline. Maybe when I have more time, I'll try to get a working model.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: ScottG and 96 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.