Positioning jQuery Roundabout in WordPress

[TXChetG]

I have [jQuery Roundabout](http://fredhq.com/projects/roundabout/ “jQuery Roundabout”) loaded up into a WordPress install. The goal is to have it so that I can flip through the posts as the carousel. Functionally speaking everything goes well. I am running into some real trouble with the positioning however.

It appears that Roundabout applies position:absolute to the child elements to make its job of positioning them in the carousel easier. This is all well and good, except I am having the classic problem with absolute positioning pulling the elements out of the flow of the page, and ending up with my main body’s height being short, and the elements floating above and outside of it.

I have tried setting several layers up the parent chain to position:relative to no avail. I am honestly out of ideas.

If you’re familiar with jQuery Roundabout, you may notice that I commented out Line 495, which affects the css property top for .roundabout-movable-item.

I’ve included code snippets below, but moved the theme in question to a live test environment. You can view it, and all of it’s problematic glory here: [http://chetgassett.com/projects/testWP/](http://chetgassett.com/projects/testWP/ “”).

If, in the end, anyone who takes a look at this would like me to load it into a Pen, I will. I just, for now, was uncertain of the best way to recreate my issue since it’s all dynamically generated content.

Thanks everyone!!

My Roundabout Code:

$(document).ready(function() {
$(‘#main’).roundabout({
childSelector:”.post”,
enableDrag: true,
autoplay: false,
duration: 1000,
clickToFocus: true,
shape: “square”,
debug: false
});
});

My basic HTML structure:

Wordpress Content

Wordpress Content

Wordpress Content

Appropriate CSS:

#content {
margin-top: 1.5em;
}
#content #inner-content {
background-color: #FFFFFF;
padding: 0 20px;
position: relative;
}
#content #inner-content #main {
margin: 25px auto;
width: 85%;
min-height: 965px;
}
#content #inner-content #main .roundabout-holder {
list-style: none;
padding: 0;
margin: 0;
height: 5em;
width: 100%;
}
#content #inner-content #main .roundabout-moveable-item {
height: 95%;
width: 85%;
cursor: pointer;
background-color: #ccc;
border: 1px solid #999;
margin: 20px 0;
}
#content #inner-content #main .roundabout-in-focus {
cursor: auto;
}

[imjoeybrennan]

Hey TXChetG,

I’m actually trying to accomplish using Roundabout in WordPress as well with posts and I believe I have found a solution for you and hopefully you can help me. Its Roundabout with a simple modification that utalizes a destroy method on the width to make it more responsive.
It works pretty well.

[https://github.com/mattstauffer/roundabout](https://github.com/mattstauffer/roundabout “https://github.com/mattstauffer/roundabout”)

Now I’m in need of your assistance since your Roundabout is working much smoother then mine. I happen to also be using Bones frame work, btw.
Its WordPress using Bones and at the top are posts( just the thumbnail and title) being pulled into Roundabout. As you can see when you click to focus or using the arrow navs it has a strange stutter and keeps popping in the top post before going to the clickToFocused post.
My index.php is where the round about is and this is the loop I’ve constructed:

array(2), ‘posts_per_page’ => -1 ) ); ?>


• ” rel=”bookmark” title=”“>

  printf(__(‘Posted %2$s on the %4$s.’, ‘bonestheme’), get_the_time(‘Y-m-j’), get_the_time(get_option(‘date_format’)), get_the_category_list(‘, ‘));
  ?>

[imjoeybrennan]

Trying one more time to post this loop code from my site… not sure how im doing this wrong.

array(2), ‘posts_per_page’ => -1 ) ); ?>


• ” rel=”bookmark” title=”“>

  printf(__(‘Posted %2$s on the %4$s.’, ‘bonestheme’), get_the_time(‘Y-m-j’), get_the_time(get_option(‘date_format’)), get_the_category_list(‘, ‘));
  ?>

d

[Author]

Posts