3 Replies Latest reply on Oct 25, 2012 1:28 PM by nasim_zoubeiri

    Adding Indicator Updates to New Navigation Elements

    nasim_zoubeiri

      Hello,

       

      I've created a custom navigation by making changes to the navbar.soy file, where I recreated the left sidebar links above so that I could get rid the sidebar. I now want to also move the update indicator numbers (orange oval numbers in image below) to the new navigation bar.

       

      Moving Notification Items.jpg

       

      I found the code in navbar.soy that generates the Home button indicator, which relies on the JavaScript file at /resources/scripts/apps/navbar/menu/home/navbar_menu_home_main.js

      but the code seems to be specific for the Home nav item.

       

      I tried cloning the span indicators from the left sidebar with JavaScript, but the data-count of the indicator always copies over as data-count='0' inside the span.

       

      EDIT: I'm convinced the failing of my JavaScript attempt is because my JavaScript runs before the script that assigns the value to the indicator. I've put my JavaScript code into template/decorator/default/footer/javascript.ftl

      Is there anyway to make it so that my JavaScript code will run last?

       

      Any suggestions would be greatly appreciated!

       

      Thanks,

      Nasim

        • Re: Adding Indicator Updates to New Navigation Elements
          aperrotte

          What you'd need to do is have your code wait for an OnComplete function. Whether inject into the code yourself or perusing the JIVE JavaScript functions. (I'm not familiar enough with JIVE's JS to make any suggestions).

          To make certain it's a time issue simply inject a multi-second pause to your JS. Below is a 3 second example. Let the code wait for x number of seconds and see if you get better results. If your code still doesn't work, at least you'll know it is in fact a timing issue.

           

          (ex.)

          setTimeout(function() { document.getElementById('whatever').submit() }, 3000);

           

          Sincerely,

          Aaron J. Perrotte

            • Re: Adding Indicator Updates to New Navigation Elements
              nasim_zoubeiri

              Hey Aaron,

               

              Thanks for the reply.

              I did a similar test and have confirmed that the problem is that my JS code runs before the badge number is sent to the page (by their JS code).

              Ideally I'd like to modify the navbar soy file and put the indicator content in directly, but finding the code in the soy files that generates the indicator icons for the Inbox and Activity links has proved challenging.

               

              Thanks,

              Nasim

            • Re: Adding Indicator Updates to New Navigation Elements
              nasim_zoubeiri

              In case anyone is interested in my solution to this - I'm currently implementing a less-than-ideal solution, where I move the left-nav way off screen, but then move the indicators back into view by moving them back the same distance in the opposite direction (and then fine-tuning their positioning into the header).

               

              So here's where I move the entire left-nav out of view:

              ul#j-home-side-nav{

                position: relative;

                left: -9699px;

              }

               

              And here's where I move back into view only the indicator bubbles for the Inbox and Actions link:

              li#jive-nav-link-communications a span.j-navbadge-count{

                position: relative;

                left: 9958px;

                top: -229px;

              }

              li#jive-nav-link-actions a span.j-navbadge-count{

                position: relative;

                left: 10070px;

                top: -270px;

              }

               

              I then collapse the menu which held the left navigation and remove the menu's remaining border line:

              .j-body-home .j-layout-sl .j-column-s {

                width: 0;

                border-right: 0;

              }

               

              Finally, so that I increase the width of the main body into the (now blank) left-nav area, I set the main body's left-margin to zero:

              .j-body-home .j-layout-sl .j-column-l {

                margin-left: 0;

              }

               

              If anyone has a better solution than this, please post it!

               

              Best regards,

              Nasim