Closing the Message Box
The easiest way to deal with closing the message box is to have a link that performs a Javascript function that, through some arcane relational computation, determines the parent DOM element of the actual message box and uses the “removeChild( )” function from the parent DOM element.
Note: the “remove( )” Javascript function cannot be used for this function. The purpose of this function under Javascript is to remove elements from selection lists, not the DOM structure.
However, that procedure is quite ungainly and can be done much easier through a jQuery call.
The implementation makes use of the same functionality used by the regular message boxes but adding the functionality of the “Close” link linked to the jQuery functionality.
1 2 3 4 | <div class=“updated fade avp-message-box”> <div class=“icon32” id=“icon-avp-success”></div> <a style=“float: right; cursor: pointer;”>Close</a>Options initialized. </div> |
Common set activated, all other sets deactivated.
Examination of the existing message boxes would disclose they are built primarily around a &;lt;div> statement with the class attribute either being “updated” or “error”. The class attribute value is what determines the different colors of the border and background that designate success or failure.
a) Displaying the “Close” link
The first addition to the message box was the “Close” link. This is a standard URL link but with a couple of changes: first, there is actually no link, as jQuery will handle the functionality of the message box closing; second, as there is no “href” attribute, the cursor must be defined through the “style” attribute; and finally, it is displayed on the upper right hand corner of the box through the “float: right” value of the “style” attribute.
b) Actually Closing the Message Box
The key element in closing the message box is the “avp-message-box” parameter of the “class” attribute in the surrounding element, which is used by the jQuery function to link the “Close” element to the actual function that closed the message box: it has no corresponding CSS function. The secondary element is the <a> element which is the actual element that is to be clicked to close the message box.
1 2 3 4 5 | jQuery(document).ready( function($) { jQuery( ‘.avp-message-box > a’ ).click(function(){ $(this).parent( ).remove( ); }); }); |
The function binds the click event of the <a></a> element within the <div> element with the “avp-message-box” class attribute to the actual routine that would handle closing the message box. The interior routine does the actual closing of the message box: it is passed the identifier of the <a> element, then uses that identifier to determine the parent element, in this case, the <div> element, and uses the “remove( )” function in jQuery to remove that element from its parent: don’t confuse it with the Javascript function of the same name but different application. This jQuery function takes care of determining the actual parent of the element in order to remove its child element (the message box) from it: it also removes all related links and instances from the DOM structure so the jQuery function relationship is also removed.
c) Adding the jQuery Files
The final part is to make sure the jQuery files are inserted into the resulting page. This is accomplished by registering the jQuery function file and then entering the registrations into the script load queue.
1 2 3 4 5 6 | wp_register_script( ‘avp-unicode-charkbd-close’, plugins_url( ‘js/avp-unicode-charkbd-close.js’, __FILE__ ), array( ‘jquery’ ) ); wp_enqueue_script( ‘jquery’ ); wp_enqueue_script( ‘avp-unicode-charkbd-close’ ); |
Loading the actual jQuery script is needed for the jQuery functionality: using the WordPress queuing mechanism is a highly recommended programming practice, as the jQuery script may be used by other plugins; this allows WordPress to determine which script file to load.
Personal Links