Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm stuck in searching a way to access the quicktag buttons on the html editor with jQuery. I tryed to access the buttons with .each() and .children() but both won't work.

jQuery( document ).ready( function( $ ) {

  $( '#ed_toolbar input.ed_button' ).children().css( 'color', 'red' );

  $( '#ed_toolbar input.ed_button' ).each( function() {
    $( this ).css( 'color', 'red' );
  });


});

I think the buttons are not inserted when the DOM is ready.

share|improve this question
    
Any progress? Could you find a later event to add your callback? –  toscho Jan 17 '13 at 23:09
    
I found a solution, see my answer below. –  Ralf912 Jan 21 '13 at 1:23
add comment

1 Answer

up vote 1 down vote accepted

I wrote a jQuery plugin to check every 0.5 seconds if the toolbar has the requested element.

(function( $ ) {
/**
 * Wait until element has finish loading requested elements, then execute callback 
 * @param string element Element to wait for
 * @param object callback Callback to execute
 * @param integer timeout Optional timeout to stop testing the element if none of the requested element was found
 */
$.fn.waitEdToolbarLoaded = function( element, callback, timeout ) {

    var interval = null;
    var target = this;
    var timeout = typeof timeout !== 'undefined' ? timeout : 5000;

    interval = window.setInterval(

        function () {

            var length = $( target ).find( element ).length;
            timeout -= 500;

            if( 0 > timeout  ) {
                window.clearInterval( interval );
            }

            if( 0 < length ) {
                window.clearInterval( interval );
                callback();
            }
        },
        500
    );

}
})( jQuery );

And a simple example how to use it

jQuery( document ).ready(
function( $ ) {

    // callback to execute if the requested element was found
    function alarm() { alert( 'Toolbar ready!' ); }

    // wait for elements
    $( '#edtoolbar' ).waitEdToolbarLoaded( 'p', alarm );

    // create the elements after 3 seconds
    setTimeout(
        function () {
            for ( var i=1; i<4; i++ ) { $( '#edtoolbar' ).append( '<p>'+i+'</p>' ); }
        },
        3000
    );

}
);

Maybe the plugin need some improvements, but it could be usefull in other situations too.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.