Warn user before closing browser window OR catch browser close event

Is there a way to catch the browser close event? No.. No..a big No

        But we can do some workaround to achieve this functionality, I cannot say it is a straight forward solution but it is the only way of doing it. Since there is no way you can catch a browser close event, here i am demonstrating how we can use the onbeforeunload event which will fire before every document unload. So here document unload can be anything like close, refresh, redirect, submit...etc.

    In my example I have created a JavaScript global variable called xCheck and initialize to 'Y'.

var xCheck;
xCheck = 'Y';

Create a JavaScript function called windowClose which checks the flag and returns a message string

function windowClose()
{
  if(xCheck=='Y')
   {
    return "Are you sure you want to logout from this app?";
   }
}

Now assign the window onbeforeunload to the above JavaScript function

if ( $v('pFlowStepId')!='101' )
{
 window.onbeforeunload = windowClose;
}

But this will fire the windowClose function each time the document is unloaded which will be annoying. So it is easy to exclude all submits, redirects, JavaScript functions, anchors...etc

$(document).ready(function() {
   $("[href]").click(function () {
       xCheck='N';
    });
   $(":button").click(function () {
       xCheck='N';
    });
   $(document).click(function () {
       xCheck='N';
    });
   $(document).mouseover(function () {
       xCheck='Y';
    });
 });

Oracle Apex 4.1 Released

Oracle Application Express (ApEx) 4.1 is released now with all improved..

Error Handling            Use of ROWID
Data Upload               Calendar
Tabular Forms             Plugins
Dynamic Actions        Accessibility

to find more about these new features please click New Features in Release 4.1

Apex Standard Textfields with clear option -- easy on apex 4

If you are on oracle apex 4 then it is easy to add clear functionality to  textfields, because we can use jquery after method and achieve that.

 Add this bit of code to your html header of the page

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

$(':text').each(function(index) {

  // Build anchor tag for clear

   var clrLink = ' <a href="javascript:clearVal(\'' +

$(this).attr("id") + '\');" class="clr">

<img src="/i/menu/inline_error_16x16.gif" alt="Clear" title="Clear"></a>';

  // Add it after the text items

   $(this).after(clrLink);

  });

});

function clearVal(pId)

{

  $s(pId,'');

  // Do whatever you want here ...

}

Click here to see a live example of this...  
If you are on apex 3 you have to integrate jquery which can be downloaded from here







Floating Toolbar

Floating Region

Click here to see a live example of this...
 
Add a floating div tool bar that appears on all pages in your apex application and add buttons, items and images... onto the tool bar.
Create new region template as a floating div as shown below
Go to shared components > Templates > create



Then go to page 0 and create a region using newly added floating region template and give it a REGION_STATIC_ID example: floatdiv

Add the below css code for id floatdiv as shown below

<style>
#floatdiv {
position:fixed;
    top:95%;
    z-index:4000;
    height:35px;
    width:100%;
    background-color:#6C6C6C;
    border-style:solid;
    border-width:1px;
    border-color:#191919;
    align:center:
    valign:center:
    text-align:center:
   }
</style>