Yeah, I though someone had to have already made such a plugin. Glad you found what you needed.
Michel Belleville 2009/11/11 Marco Barbosa <marco.barbos...@gmail.com> > 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? >
