Hi Michel! Thanks for the reply!
Not sure if there are plugins to simply slide up/down. I already tried with positioning instead of display:none , but using slideUp and slideDown. It almost worked but I couldn't figure it out what was missing. The last ul wouldn't show up. I'll give a try again using animate instead. Will post my result here later. On Nov 10, 6:22 pm, Michel Belleville <michel.bellevi...@gmail.com> wrote: > Sorry for previous mail, I misclicked on send before finishing it. > > So : > First try the examples for > .slideUp()<http://docs.jquery.com/Effects/slideUp>and > .slideDown() <http://docs.jquery.com/Effects/slideDown>. You'll notice > slideUp() is a way to make an element disappear "as if" it was sliding up, > and slideDown() is a way to make an element appear "as if" it was sliding > down, as explained in the doc. That's not exactly what you're looking for > apparently. What you are looking for is a way to move all the uls at once up > or down. > > Now if I wanted to do that, I'd do it this way : > > - in the div#calendar, put another div.slider that'll actually be moving > wrapping the uls > - through css give div#calendar a relative positionning so it'll be the > offset parent for div.slider, give div.sider a relative positionning too so > it'll also be an offset parent for the uls, make div#calendar overflow > hidden so it'll act as a content window rather than get bigger to fit > around > the uls > - on click on previous / next, detect current ul, get the previous / next > ul, read it's position using > .position()<http://docs.jquery.com/CSS/position>to determine how much > sliding is needed for div.slider to slide it just > right, then use .animate() <http://docs.jquery.com/Effects/animate> to > trigger the slide > > Though there may very well already be plugins that do just what you need so > check wether you will be re-inventing the wheel here. > > Michel Belleville > > 2009/11/10 Michel Belleville <michel.bellevi...@gmail.com> > > > > > First try the examples for > > .slideUp()<http://docs.jquery.com/Effects/slideUp>and > > .slideDown() <http://docs.jquery.com/Effects/slideDown>. You'll notice > > slideUp() is a way to make an element disappear "as if" it was sliding up, > > and slideDown() is a way to make an element appear "as if" it was sliding > > down, > > > Michel Belleville > > > 2009/11/10 Marco Barbosa <marco.barbos...@gmail.com> > > > Hi all! > > >> So what I'm trying to do is so simple but it's not working.. > >> All I want to do is to slide up/down to the next/previous content. > > >> Here's the code: > >> <id="calendar"> > >> <a href="#" class="arrowUp">Previous</a> > >> <h3>Calendar</h3> > >> <ul class="events current"> > >> <li>Content1</li> > >> <li>Content2</li> > >> <li>Content3</li> > >> </ul> > >> <ul class="events"> > >> <li>Content4</li> > >> <li>Content5</li> > >> <li>Content6</li> > >> </ul> > >> <ul class="events"> > >> <li>Content7</li> > >> <li>Content8</li> > >> <li>Content9</li> > >> </ul> > >> <a href="#" class="arrowDown">Next</a> > >> </div> > > >> Clicking arrow up down should bring up Content4, 5 and 6 and so on. > > >> Here's how I'm trying to do it: > >> $('.arrowUp').click(function(){ > >> $('.events.current').removeClass("current").previous().slideDown > >> ("slow").addClass("current"); > >> }); > >> $('.arrowDown').click(function(){ > >> $('.events.current').removeClass("current").next().slideUp > >> ("slow").addClass("current"); > >> }); > > >> the .events has display:none; > >> and .events.current has display:block; > > >> What am I doing wrong? > >> Is there a easier way to do this?
