issue when remove display:none with JQuery

Question

I am using Jquery buttons set, which is built into Jquery UI. And selectmenu which is a ui addon.

.buttonset(); takes a group of buttons and makes thhem into radio buttons .selectmenu(); takes a select menu and truns it into a nice looking popup list.

However when I place these items in a div with the property display:none and then in my javascript code I remove the display:none the buttonset does not have it's rounded corners, and the select menu shows up about 2 px wide, although I can still click on those two pixels to open the menu.

Any ideas? I'll post my code:

.hidden
{
    display:none;
}


        $("#test").selectmenu();
        $("#radioset").buttonset();

<div id="mydisplay" class="hidden">
    <div id="radioset">
                        <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1testetstes</label>
                        <br /><input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
                        <br /><input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
                    </div>
    <select name="test" id="test">
            <option value="slow">Test1</option>
            <option value="test2">Test2</option>
            <option value="test3">Test3</option>
            </select>
</div>

And at some point I call this:

$("#mydisplay").removeClass("hidden");

But the objects do not display properly... can I force them to re-render or something?

Hari Pachuveetil · Accepted Answer · 2010-10-13 12:21:14Z

1

Rather than removing a class that sets the elements' display to none, use display: block; in the css for the .hidden class. And then use $('.hidden').hide() along with $('.hidden').show() to hide and show the whole thing.

Like so:

$(document).ready(function(){
    $('.hidden').hide();
    $('.someButtonThatShowsStuff').click(function(){
        $('.hidden').show();
        $("#test").selectmenu();
        $("#radioset").buttonset();
    });
});

EDIT: Modified the code to apply the visual plugins after showing the elements.

edited Oct 13, 2010 at 12:21

answered Oct 13, 2010 at 10:55

Hari Pachuveetil

10.4k3 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kralco626 Over a year ago

same effect of the select object not showing properly when I call show.

Hari Pachuveetil Over a year ago

You might want to try applying the plugins after the elements are shown. I have modified the answer to that effect.

kralco626 Over a year ago

ugh. i hope I don't have to do that. I have many divs which I hide and show regularly. It was be very annoying to have to to apply the plug-ins dynamically after showing/hiding a div. I'll try and let you know...

Collectives™ on Stack Overflow

issue when remove display:none with JQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related