Solution For The Panels 3.9 In-Place Editor Added Div Problem

The Panels In-Place Editor, or IPE, is a great tool for enabling the user to customize panes in a simple way. However, in Panels 3.9 there is a problem that the IPE causes. For each pane, it adds a div with a non-breaking space ( ) without any css classes. This creates a blank space which you can't get rid of either with php or css. Why? These divs are added by a javascript called panels_ipe.js which rules out php manipulation. So, what about css? Well, you can actually get rid of them but you don't really want to, because these divs are used for place markers when you use the IPE, so if you hide them with css rules the IPE won't work correctly. So, what you want to do (unless you want to hack panels, which is a bad idea) is to create a javascript which handles the display of the div. This does the trick:

(function($){
var _oldShow = $.fn.show;
    $.fn.show = function(speed, oldCallback) {
        return $(this).each(function() {
                var
                        obj         = $(this),
                        newCallback = function() {
                                if ($.isFunction(oldCallback)) {
                                        oldCallback.apply(obj);
                                }

                                obj.trigger('afterShow');
                        };

                // you can trigger a before show if you want
                obj.trigger('beforeShow');

                // now use the old function to show the element passing the new callback
                _oldShow.apply(obj, [speed, newCallback]);
        });
    }
})(jQuery);

(function($) {
$(document).ready(function() {
  $('.panels-ipe-sort-container > div').each(function() {
   if($(this).html()==' ') {
    $(this).addClass('hide-when-no-ipe');
    $(this).hide();
   }
  });
  $('.panels-ipe-off').click(function() {
   $('.hide-when-no-ipe').show();
  });
  $('.panels-ipe-off').bind("beforeShow", function() {
            $('.hide-when-no-ipe').hide();
        });
});
})(jQuery);

Load this code from your theme or in an init function and you will find that these divs are only there when they're actually needed. What this script does is basically two things: First it sets a class to the div aptly named "hide-when-no-ipe". Then it keeps track of when the IPE is switched on and off and hides, or shows, respectively, all elements with that class.