positioning pager buttons in jquery cycle

Question

Hello,

I am using the jquery cycle on a new website and am having trouble positioning the pager element. Here is the url:

http://www.rockymountainsports.ca/web/layout.html

in the jquery the #nav element is defined with .before(element) I can change the .before to .after and it positions it about 300px below the box. I would like for the buttons to be within the blue square border at the bottom. Any help is apprecaited.

Thanks

Answer 1

You should use the following javascript:

$(document).ready(function() {
    $('.slideshow').after('<div id="navigation"><div id="nav"></div></div>').cycle({
        fx:     'fade', 
        timeout: 5000, 
        pager:  '#nav' 
    });
});

You will also need to remove the height attribute from your CSS for the .slideshow div.