1. Overview
This document explains how to create a Display Time in Navigation Bar using Oracle APEX.
2. Technologies and Tools Used
The following technologies has been used to achieve Display time in Navigation Bar.
- Oracle Apex
- JavaScript
3. Use Case
Any requirement for display time in navigation bar for add on customization it can be used. Please take the Below Screenshot as example.
4. Steps with Screenshot
Steps to be followed
Step 1: Create a region in the Global Page, region name as Global Region.
Step 2: Paste the below code source section in global region.
<style>
.disp_time {
animation: disp_time 1s ease-in-out infinite alternate;
font-family: cursive;
position: fixed;
left: 47%;
top: 2%;
}
/*Time*/
@-webkit-keyframes disp_time {
from {
transform: scale(1);
text-shadow: 0 2px 4px #000, 0 8px 32px rgba(0, 0, 0, 0.5);
}
</style>
<script>
function clock() {
var now = new Date();
var TwentyFourHour = now.getHours();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var mid = ‘pm’;
if (min < 10) {
min = “0” + min;
}
if (hour > 12) {
hour = hour – 12;
}
if (hour == 0) {
hour = 12;
}
if (TwentyFourHour < 12) {
mid = ‘am’;
}
$(‘.disp_time’).text((’00’ + hour).slice(-2) + ‘:’ + (’00’ + min).slice(-2) + ‘:’ + (’00’ + sec).slice(-2) + ‘ ‘ + mid);
setTimeout(clock, 1000);
}
Step 3: Go to Appearance section, Change the template as Blank with attributes (No Grid).
Step 4: Then, create a dynamic action and event as ‘Page Load’, We should give condition to fire this event.
Step 5: In the dynamic action, Action should be ‘Execute JavaScript Code’ and paste the given code in code section.
Step 6: Create a another action as ‘Execute JavaScript Code’ and paste the given code in code section.
var l_time = ‘<div class=”disp_time”></div>’
$(‘#t_Header > div.t-Header-branding > div.t-Header-logo’).append(l_time);
Step 7: Finally, Save and Run the page.
Output:
Below screen shot shows the output.
