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!
