13 Replies Latest reply on Nov 21, 2013 3:32 PM by user638545

    Enkitec Navbar vertical list appears momentarily

    Nick Walsh


      Firefox 22.0, IE 8


      Just started using the Enkitec Navbar, and we have noticed that when a page is rendered a vertical list always appears momentarily before being replaced with the Navbar list. It happens on all applications we have installed it on, and every time a page is refreshed.


      I uploaded demo to apex.oracle.com to demonstrate it but it happens so rarely on there that it's not worth looking at. I am guessing it is something to do with our setup (network speed, caching?).


      If anyone else has experienced this and overcome it, I'd be grateful for some suggestions as to where we could start looking.


      Many thanks,



        • 1. Re: Enkitec Navbar vertical list appears momentarily
          Jorge Rimblas

          Your suspicion about speed and network performance are correct. What you're seeing is the list of elements before the CSS is applied to them.

          Would it be an option for you to move your plugin assets to the file system (the webserver)?

          What you do is download all the assets that the plugin uses (CSS, js, png, ...).  Place them in your webserver.  Don't place them in the /i/ directory, use a custom one like /c/navbar/ (but use whatever you like)

          Then go to the plugin and change the "File Prefix" from #PLUGIN_PREFIX# to "/c/navbar/" so that the plugin uses the files form the file system.

          This helps because then the plugin doesn't need to fetch those resources from the database every time it renders.




          • 2. Re: Enkitec Navbar vertical list appears momentarily
            Nick Walsh

            Thanks Jorge. It works perfectly now.

            • 3. Re: Enkitec Navbar vertical list appears momentarily
              Jorge Rimblas

              That's great Nick!


              FYI, in some cases I've taken this a step further and compiled the Plugin PL/SQL Code in the database so that the code is not compiled every time it's used.

              For example, you create a package enavbar with the enkitec_navbar_render function in it.

              Then where the plugin says "Render Function name" I would change it from enkitec_navbar_render to enavbar.enkitec_navbar_render. This way the plugin will use the pre-compiled package code which could also bring some more speed enhancements.




              1 person found this helpful
              • 4. Re: Enkitec Navbar vertical list appears momentarily
                Nick Walsh

                Excellent. I'll try that tomorrow.. Thanks again for the quick reply.

                • 5. Re: Enkitec Navbar vertical list appears momentarily

                  Just to add a note here. In general, CSS should be added to the head section of an HTML document and JavaScript should be added to the end of of the body. When CSS is in the header, the browser should wait will it has downloaded and parsed the CSS before rendering and showing the page.


                  Oddly enough, the substitution string for CSS generated by plug-ins (#GENERATED_CSS#) is in the footer section of page templates in APEX. I'm not sure why it was put there but it's the cause of the problem.




                  1 person found this helpful
                  • 6. Re: Enkitec Navbar vertical list appears momentarily
                    Patrick Wolf-Oracle

                    Hi Dan,


                    the reason why the #GENERATED_CSS# placeholder has to be in the footer is because it will contain CSS markup generated by components of the page. At the time when the HTML header is rendered, that CSS markup is not yet available, because the processes, regions, plug-ins of the page have not yet been executed which tell APEX which additional files to load.


                    I know from a CSS performance perspective this is not optimal, but currently that's the only way plug-ins can include there own CSS/JS without modifying any page template.


                    If a developer wants to optimize the rendering, he can add the plug-in CSS file into his page template (property "Cascading Style Sheet - File URLs") or at page level (property "CSS - File URLs") to always load it at the beginning of the page. If the plug-in tries to loads the same CSS file (note, it has to be the same URL) it will not be included a second time.




                    Member of the APEX development team

                    My Blog: http://www.inside-oracle-apex.com

                    APEX Plug-Ins: http://apex.oracle.com/plugins

                    Twitter: http://www.twitter.com/patrickwolf


                    Message was edited by: PatrickWolf

                    • 7. Re: Enkitec Navbar vertical list appears momentarily
                      Nick Walsh

                      Quick bonus question if I may,


                      Could this also be the reason why the buttons on the Modal LOV plugin take a while to render (for us)? If so, is there a way of downloading all the files associated with that plugin in one step rather than having to do them one at a time, so I can place these on the webserver too?





                      • 8. Re: Enkitec Navbar vertical list appears momentarily
                        Nick Walsh

                        I'll answer my own question, in case anyone else has the same issue.


                        Yes you can change the Modal LOV as well, with a small amount of extra work. The following css files also refer to #PLUGIN_PREFIX#, and must be amended before being copied to the web server.








                        If you place all the files in the same place on the webserver, you can replace references in the css files to #PLUGIN_PREFIX# with ./ (dot forward slash) which will tell it to look in the same directory.


                        If I've made any blunders feel free to point them out, but it seems to be working for us, and the modal lov items now render without any delay.



                        • 9. Re: Enkitec Navbar vertical list appears momentarily

                          I don't understand how /c/navbar/ maps to a directory on the file system. Please explain.  What is the full path wrt the webserver root directory. I need both a Linux and Windows solution.



                          • 10. Re: Enkitec Navbar vertical list appears momentarily
                            Jorge Rimblas

                            Hi Paul,

                            Basically your webserver can be mapped to "serve" files in your filesystem.  The /i/ path is not really /i/ or C:\i in your webserver, is most likely something pretty long (like for example: (/app/oracle/product/HTTP10gR2/apex/images )

                            So, what /c/ can be is /app/oracle/product/HTTP10gR2/apex/custom

                            and /c/navbar would be /app/oracle/product/HTTP10gR2/apex/custom/navbar


                            So it doesn't matter if it's windows or linux, because the webserver would still map /c/ to whatever local filesystem destination you decide.


                            As to how to do this exactly... the syntax depends on if you're using Apache, IIS, APEX Listener, etc...

                            If you have followup questions about this mapping it's best to start a new thread or see the APEX Installation Guide


                            Hope this helps.



                            • 11. Re: Enkitec Navbar vertical list appears momentarily

                              Hi Nick,


                              The only "blunder" I see is that you did a bit more work than needed. I include a "server" directory (actually many plug-in developers do) that allows you to move the files without making any changes. Just upload and change the File Prefix in the plug-in to point to the correct location on the web server.




                              • 12. Re: Enkitec Navbar vertical list appears momentarily

                                Hi PaulP,


                                You can take Jorge at his word or you can believe me when I tell you it's magic - pure and simple magic. Perhaps even the black kind... Who knows what kinds of sorcerers are making these "web severs"! More like black magic servers!!!




                                • 13. Re: Enkitec Navbar vertical list appears momentarily

                                  Hi All,

                                  I too experienced the latency issue and i coped the files to ../apex/pluigins/nav directory in my linux where apex is installed. The i modified the #PLUGIN_PREFIX# with the /pluigins/nav.

                                  When i run the app, i get an "Authentication Required" popup appears.

                                  Any idea why could be wrong with my setting?