Wandering Boxes: My plugin’s alert messages started moving down the page

I thought I was seeing things. When I was writing the admin page for a plugin, my notice and error boxes suddenly started moving around the page on their own. There’s an explanation for this behaviour, buried deep in the Javascript files.

An alert boxWhile working on a plugin, I realized I had forgotten to put on my admin page template the <div class="wrap"> tags, and the margins were off. So I quickly added that, and then started seeing things.

I was testing out actions that give out notices and error messages on my plugin, and I could sometimes literally see the error message jumping from the top part of the page, where I had put it, further down.

Trying to isolate what was causing this using the Chrome debugger tools was no good. I reached to the Javascript sources and looked for anything that might be doing something to a div element with class error or updated.

And there it was:

// Move .updated and .error alert boxes. Don't move boxes designed to be inline.
$('div.wrap h2:first').nextAll('div.updated, div.error').addClass('below-h2');
$('div.updated, div.error').not('.below-h2, .inline').insertAfter( $('div.wrap h2:first') );

This code in the common.js script moves <div> elements that have the class updated or error, and that don’t have the class below-h2 or inline, below the first <h2> element inside the <div class="wrap">.

Because I had just put in the wrapper <div>, this rule suddenly started applying to my page! I had a <h2> element down on my page, and the message boxes were now getting insertAftered below it.

The solution is easy: Use <h2> as your page header, not <h1> as I had done. That’s how all the WordPress admin pages seem to have it. Logical? I don’t know.

Tagged , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: