SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery Cycle question

    I have a Jquery Cycle question I'm hoping someone can help me with.

    Consider this:

    <div id="slides">
    <div class="a">content and images</div>
    <div class="a">content and images</div>
    <div class="a">content and images</div>
    <div class="b">content and images</div>
    <div class="b">content and images</div>
    <div class="b">content and images</div>
    </div>

    <a href="#">Reveal A and hide B</a>
    <a href="#">Reveal B and hide A</a>

    If they click 'A' then the divs with class 'a' cycle, while class 'b' don't feature. If they click 'B' then the divs with class 'b' feature and the 'a' don't feature.

    Sounds fairly simple, right? Except when I toggle between the two classes jQuery Cycle doesn't like it the slides get messed up.

    I have tried various code iterations, none of which are that helpful so I won't include them.

    If somebody could assist me, that would be much appreciated.

    Thanks!

  2. #2
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vkloss View Post
    I have tried various code iterations, none of which are that helpful so I won't include them.
    It's always useful to let us know what you have tried, so we don't spend time going over the same things.

    Have you tried creating two separate sets of slides, and hiding/showing the containers rather than the individual slides?
    HTML Code:
    <div id="a-slides">
        <div class="a">content and images</div>
        <div class="a">content and images</div>
        <div class="a">content and images</div>
    </div>
    <div id="b-slides">
        <div class="b">content and images</div>
        <div class="b">content and images</div>
        <div class="b">content and images</div>
    </div>
    
    <a href="#">Reveal A and hide B</a>
    <a href="#">Reveal B and hide A</a>

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could try that - the only thing is each of the slide containers need to reside in the same place. Basically it's a portfolio and each link reveals a specific project. I guess if #a-slides and #b-slides were positioned 'absolutely' that might work? I'll give it a go, thanks!

    For some reason I thought it might be more economical to have one cycle() and just remove/add the divs as one clicks them...?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •