0

I am using Cycle's pagerAnchorBuilder function to create custom pager links. However, there is already an element inside the pager container (and empty span) and I need to ensure Cycle inserts the generated li elements before the span, not after.

(I am using the span element for even spacing of menu elements within a container. I have tried appending the span after Cycle is called but that doesn't work, presumably because CSS is parsed before Javascript.)

HTML

<nav class="one">
<ul>
  >>  INSERT HERE <<
<span></span>
</ul>
</nav>

JS

pager:  'nav ul',
pagerEvent: 'mouseover',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#">'+ $(slide).attr('title') +'</a></li>';
}

Can anyone help? Thanks!

Jacob
  • 31
  • 3
  • Probably not the answer you are looking for, but in general the only tags that should be direct children of
      should be
    • . Can you find a way of fixing the spacing without putting a inside the
        ?
     – Bryan Jan 29 '14 at 16:44
  • Thanks Bryan, I realize but it is an exceptionally useful trick for evenly spacing menu items across a container. See it in action here: http://tomenyc.com – Jacob Jan 29 '14 at 18:08
  • How about using the technique from Danield here (2nd highest): http://stackoverflow.com/questions/5060923/how-to-stretch-html-css-horizontal-navigation-items-evenly-and-fully-across-a You won't need a span if you use the :after css piece. – Bryan Jan 29 '14 at 18:48
  • That's a very elegant solution and works perfectly on my footer, but unfortunately doesn't seem to work on the pagerAnchorBuilder insertion... I also tried to prepend a set of lis into the ul without Cycle and it doesn't work either. Is this to do with css being parsed beforehand? Such a shame. – Jacob Jan 29 '14 at 20:32

0 Answers0