3

When I do an animated show/hide on the select element it repositions itself during the animation. I can't do anything about the style of the "body"; it's the standard class markup in the app. Is there some simple CSS I can apply to the select element prevent it from repositioning?

Update: Added the third select element to the code and example

example: http://jsfiddle.net/DSULq/8/

<div id="body" style="position: absolute; top: 100px;">
    <div id="toolbar" style="background-color: grey; width: 400px;">
        <select>
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </select>
        <select id="toggleMe">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </select>
        <select>
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </select>
    </div>
<div>
<button>do effect</button>

$("button").click(function () {
    if ($("#toggleMe").is(":visible")) {
        $("#toggleMe").hide("slide", "slow");
    } else {
        $("#toggleMe").show("slide", "slow");
    }
});
Homer
  • 7,594
  • 14
  • 69
  • 109

2 Answers2

3

How about this:

$("button").click(function () {
    $("#toggleMe").fadeToggle("slow");
});

DEMO

palaѕн
  • 72,112
  • 17
  • 116
  • 136
  • `.animate({width:'toggle'},"slow");` looks pretty good. I didn't know you could pass 'toggle'! – Homer May 17 '13 at 18:00
  • Yes, if you look into the [animate docs](http://api.jquery.com/animate/), we have option for that. – palaѕн May 17 '13 at 18:04
  • Thanks, I went with the code from the third fiddle, `$("#toggleMe").animate({width:'toggle'},"fast");`. Here it is with the extra `select` element: http://jsfiddle.net/DSULq/17/ – Homer Jun 03 '13 at 16:37
0

Just use a fixed position for #toggleMe:

CSS:

 #toggleMe {
     position: fixed;
     top: 100px;
     left: 50px;
 }

http://jsfiddle.net/jk46K/1/

sbatson5
  • 648
  • 11
  • 19
  • not really what I'm looking for there since would be some extra work involved to dynamically set the top & left – Homer May 17 '13 at 17:57
  • Right. You would use jquery to find pull the 'top' from the #toolbar. The 'left' would be the width of the other select (plus a few pixels). – sbatson5 May 17 '13 at 18:01
  • Also, `position: fixed` is not what we want if the page happens to be scrollable: http://jsfiddle.net/jk46K/2/ – Homer May 17 '13 at 18:09