How can I use CSS classes as selector items with nested HTML elements in serialScroll?

Question

Trying to build a slideshow of HTML slides with jQuery serialScroll. However, if my slides contain nested elements that match the element I'm trying to scroll, then it acts a little weird.

Is there a way to use CSS classes as selector items instead of HTML elements?

Here is an example of the typical usages I've seen:

$('#screen').serialScroll({
    target:'#sections',
    items:'li',
    prev:'img.prev',
    next:'img.next',
    navigation:'#navigation li a',
    duration:700,
    force:true,
    step:1,
    interval:1000
});

I would like to do the following (note: CSS class used as items value):

$('#screen').serialScroll({
    target:'#sections',
    items:'.mycssclass',
    prev:'img.prev',
    next:'img.next',
    navigation:'#navigation li a',
    duration:700,
    force:true,
    step:1,
    interval:1000
});

In the above example, if you attached the .mycssclass to a list item elements and the have further list items nested in the slide HTML, your slides will bounce around in odd directions.

My markup looks like this:

<div id="screen">
<div id="sections">
 <ul>
  <li class="mycssclass">
   <h2>Section 1</h2>
    <ul>
      <li>Nest li</li>
    </ul>
   <p>Lorem ipsum dolor sit amet...</p>
  </li>
  <li class="mycssclass">
   <h2>Section 2</h2>
    <ul>
      <li>Nest li</li>
    </ul>
   <p>Lorem ipsum dolor sit amet...</p>
  </li>
 </ul>
</div>
</div>

score 2 · Accepted Answer · answered Nov 23 '10 at 13:58

2

items already takes a selector, it's used here:

function getItems(){
  return $( items, pane );
};

So...just use exactly what you want in the question, it'll find any .mycssclass elements inside #screen, equivalent to:

$(".mycssclass", "#screen")
//or..
$("#screen").find(".mycssclass")

answered Nov 23 '10 at 13:58

Nick Craver

623,446
136
1,297
1,155

Sorry, I'm quite new to this, would you mind showing me how my code should look? – jnthnclrk Nov 23 '10 at 14:02
@trnsfrmr - exactly as you have in the question :) I was just showing *why* it already works :) – Nick Craver Nov 23 '10 at 14:03
No, that still doesn't solve the nested element problem. Will update the question and try and explain more. – jnthnclrk Nov 23 '10 at 14:07
Update. In a sense you're right, the class does select the slide, but it registers all similar nested elements as well. This causes the slideshow to try and scroll to every nested element as well as their parents. – jnthnclrk Nov 23 '10 at 14:10
@trnsfrmr - do you only want to select the first level of that class or...? You can also do `'> .mycssclass'` to only get direct children for example. – Nick Craver Nov 23 '10 at 14:11
Yes, I just want the parent list items or divs. – jnthnclrk Nov 23 '10 at 14:12
@trnsfrmr - I'd need to see your markup, but you can certainly adjust the selector to select only those elements. – Nick Craver Nov 23 '10 at 14:14
@trnsfrmr - where is `#screen`? – Nick Craver Nov 23 '10 at 14:17
Wrapping everything. Just added it to question. – jnthnclrk Nov 23 '10 at 14:18
@trnsfrmr - In that case your selector would be : `'#sections > ul > li'` or `'li.mycssclass'` – Nick Craver Nov 23 '10 at 14:19

How can I use CSS classes as selector items with nested HTML elements in serialScroll?

1 Answers1