Grow your CSS skills. Land your dream job.

Positioning jQuery Roundabout in WordPress

  • # March 3, 2013 at 10:58 am

    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;
    }

    # April 15, 2013 at 1:07 pm

    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:



  • < ?php endwhile; ?>

< ?php if (function_exists('bones_page_navi')) { ?>
< ?php bones_page_navi(); ?>
< ?php } else { ?>

< ?php } ?>

< ?php else : ?>

< ?php _e("Oops, Post Not Found!", "bonestheme"); ?>

< ?php _e("Uh Oh. Something is missing. Try double checking things.", "bonestheme"); ?>

< ?php _e("This is the error message in the index.php template.", "bonestheme"); ?>

d

< ?php endif; ?>

Let me know if that Destroy method worked for you and let me know if you can see where I’m getting stuck with the Roundabout!

Thanks!
Joey Brennan

# April 15, 2013 at 1:11 pm

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



< ?php endwhile; ?>

< ?php if (function_exists('bones_page_navi')) { ?>
< ?php bones_page_navi(); ?>
< ?php } else { ?>

< ?php } ?>

< ?php else : ?>

< ?php _e("Oops, Post Not Found!", "bonestheme"); ?>

< ?php _e("Uh Oh. Something is missing. Try double checking things.", "bonestheme"); ?>

< ?php _e("This is the error message in the index.php template.", "bonestheme"); ?>

d

< ?php endif; ?>

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".