Hi,
I am trying to hide the navigation buttons when the page initially loads and only display them once the main load has completed by running some Javascript in the Execute when page loads section.
I have created a sample application on:
https://apex.oracle.com/pls/apex/f?p=4550:1:1515272045532:::::
Workspace TREE_EXPAND
User test
Password test
Application "NAV LIST"
I have created a navigation button called Expand in the Navigation Bar List -> Desktop Navigation Bar. On Page 1 in the Function and Global Javascript I have the following code:
Btn_Expand = null;
Btn = null;
function Expand () {
alert ( "Expand Pressed" );
}
and in the Execute when page loads the following Javascript:
var nav_btns = document.getElementsByClassName('t-NavigationBar-item');
Btn_Expand = null;
Btn = null;
for (i = 0; i < nav_btns.length; i++) {
Btn = nav_btns [i];
console.log ( i + "innerText = " + Btn.innerText + ", textContent = " + Btn.textContent );
if ( Btn.innerText === 'Expand') {
Btn_Expand = Btn;
}
console.log ( 'Btn_Expand = ' + Btn_Expand );
}
So if I run the page and look at the output in the console window I see:
0 - innerText = Expand, textContent = Expand
Btn_Expand = [object HTML LI Element]
1 - innerText = test, textContent = TEST
Btn_Expand = [object HTML LI Element]
and button expand is an object as expected.
But if I set the display to none for the buttons using the inline CSS for Page 1 thus:
.t-NavigationBar-item {
display: none;
}
and re-run the page I see the following in the console window:
0 - innerText = Expand, textContent = Expand
Btn_Expand = null
1 - innerText = TEST, textContent = TEST
Btn_Expand = null
and the Expand Button is now NULL.
I don't understand why, it appears that the button has not been created but I have only asked for it to not be displayed. Since the button is NULL I can't set it to be displayed again and it remains hidden forever
Any advice would be greatly appreciated.
Kind Regards
Dave