jquery slider pointers not working inside a css flyout menu
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?
Megan posted this at 15:27 — 10th September 2012.
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 aout 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.
Megan
Connect with us on Facebook!
barricades posted this at 15:57 — 10th September 2012.
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
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.