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:


$(document).ready(function(){
     $('table[summary="Developer Toolbar"]').clone().appendTo("#topDevToolbar");
 });

Now you have 2 toolbars!

5 comments:

Roel said...

Hi Mark,
You can also have the toolbar at the bottom of your browser window. See this post: http://roelhartman.blogspot.com/2009/07/apex-floating-developer-toolbar.html
Cheers
Roel

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!
Cheers
Carlos

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.

Regards

Mark

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 ashish.agarwal@dbcon.com.

Thanks & Regards,
Ashish