Question

I use a jQuery UI dialog in which there is another pop-up.

$("#dialog").dialog({
    autoOpen: false,
    show: "blind",
    hide: "explode"
});

$("#opener").click(function() {
    $("#dialog").dialog("open");
    return false;
});

// BUTTONS
$('.fg-button').hover(function() {
    $(this).removeClass('ui-state-default').addClass('ui-state-focus');
}, function() {
    $(this).removeClass('ui-state-focus').addClass('ui-state-default');
});

// MENUS        
$('#hierarchybreadcrumb').menu({
    content: $('#hierarchybreadcrumb').next().html(),
    backLink: false
});

See here the live version: http://jsfiddle.net/nrWug/1

If I open the iPod menu and than drag the dialog, the iPod menu is displaced. How can I bind these two to make the dialog draggable and resizable?

Answer 1

To make it work you have to use the “drag” event from jQuery dialog and adjust with that the position of the menu.

If you want to add custom callback functions into the iPod style menu, go into fg.menu.js line 244 and add your custom functions.

If you are here because of the neat iPod style menu, wait for jQuery UI to update to version 1.9. This feature will be integrated directly taken from Filament Group (a major contributor). You can see the actual status and download the 1.9 version. here is the current demo which did not yet include the iPod style menus.

I decided not to use that menu since there are major cross browser compatibility issues with the menu if used with jQuery UI (especially dialog). If jQuery UI has taken over the feature in 1.9 stable, there will be no-doubt that this space-saving menu/selectbox will be seen more regularly on the web.