Hello again! I've found this plugin that does exactly what I needed: Cycle plugin - http://www.malsup.com/jquery/cycle/
You just set a container with a fixed size and overflow hidden. The plugin does all the rest, pretty neat! Just in case someone else runs into this post. Thanks for your slide() clarification :) ~ Marco Barbosa On 10 Nov, 20:04, Marco Barbosa <marco.barbos...@gmail.com> wrote: > 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?
