Thursday, November 19, 2009

Oracle APEX: Silly Developer toolbar tricks

At the AUSOUG National Conference in Melbourne on the weekend I presented on "Oracle APEX Themes and 4.0 Plug-ins".

The presentation was about creating a Theme in APEX from scratch, and just to make it interesting I did it using jQuery UI, and integrated the ThemeRoller into my theme.

Audience members were curious how the developer toolbar was moved into the header.

I blogged how to Move the Developer toolbar with ExtJS back in 2008, but since learnt an even easier way - CSS:

table[summary="Developer Toolbar"] {position:absolute;top:10px;left:25%;z-index:1000;}

This positions the toolbar 10 pixels from the top, 25% of the way in from the left margin.

One of the audience members suggested copying it, so you could have 1 copy at the top of the page, and one at the bottom.
So, ditch the CSS, and use the following jQuery code to copy the toolbar to a div.

This time add the following div to the top of your page template:

<div id="topDevToolbar"></div>

Then add the following javascript into your page:

     $('table[summary="Developer Toolbar"]').clone().appendTo("#topDevToolbar");

Now you have 2 toolbars!


Roel said...

Hi Mark,
You can also have the toolbar at the bottom of your browser window. See this post:

Tony F. said...

Hi Mark,

Thanks for the presentation at AUSOUG - really enjoyed it and for letting me know how to duplicate the toolbar to appear at the top and bottom.

Carlos said...

Hi Mark,
I did enjoy your presentation in the AUSOUG. Keep the good work up!

Mark Lancaster said...

Hi Tony and Carlos

Appreciate your feedback.

Hope I have given you 1 or 2 ideas to take back to work.

As always, it's nice meeting people with a common interest and sharing ideas. After 3 years with APEX I'm learning all the time.



Ashish Agarwal said...

Hi Mark,

I would like to discuss something with you with regards to Oracle APEX. Can you please send your e-mail address to me at

Thanks & Regards,