jquery slider pointers not working inside a css flyout menu

They have: 11 posts

Joined: Apr 2010

I have a css flyout header menu and I also want use the jquery slider widget as one of the options in this menu but when I put it in there the little sliders don't appear correctly, it's like they've collapsed. Or they're hidden or something.

I thought it might have something to do with the z-index because some elements in the flyout header have index's but having changed the index on the slider that didn't help,

can anyone help me out?

http://jsfiddle.net/AUJPh/1/

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Can you post a screenshot of what those sliders are supposed to look like vs. what they look like now? I see two vertical bars on the slider, one slightly to the left of the slider area and one just inside the right edge. I'm assuming these are supposed to line up with the slider box on the left/right sides, is that correct?

Oh, I see, they're supposed to be wider. This line seems to be interfering:

div#dropMenu > ul a {
    width: auto;
}

That code is overriding the width set by the jQuery UI slider classes:

.ui-slider .ui-slider-handle {
    cursor: default;
    height: 1.2em;
    position: absolute;
    <strong>width: 1.2em;</strong>
    z-index: 2500;
}

You might be able to take that div#dropMenu > ul a out completely - I'm not sure what it's doing there (could be a cross-browser fix of some sort...). Or try:

div#dropMenu > ul li > a {
    width: auto;
}

That will just select the link elements that are direct children of the li's and leave the slider link tags alone.

They have: 11 posts

Joined: Apr 2010

Hurray! You absolute gem!

div#dropMenu > ul li > a worked a treat. Thank you so much I'd spent HOURS fiddling with that and couldn't sort it. Good karma to you Smiling

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.