7 Replies Latest reply on Jan 18, 2013 10:31 AM by phrough

    Styling j-pop menu near satallite menu

      Hey guys, I want to do some specific edits to the satellite menu's pop up menu, however this isn't easily done through CSS since the menu is a child element of the generic .j-pop:

       

      <div class="j-pop js-pop popover" style="visibility: visible; position: absolute; top: 43px; left: 1114.5px; ">  
      <div id="j-satNav-menu" class="clearfix j-pop-main" style="">
      

       

      I would like to give this an ID. I even wrote some javascript to grab the child's ID and add it to the j-pop element but since it is done with AJAX it doesn't exist on ready. I also looked into using jQuery's live() method but it doesn't support ready() or load(). So how do I go about editing just this menu and not ALL items that have a class of .j-pop. Another thing that I want to edit, is pull the positioning that is placed by the JS. Here is a side by side of current setup vs how I want it to look:

       

      satallite-nav.jpg

        • Re: Styling j-pop menu near satallite menu

          Hey guys,

           

          I figured out a way around it. After digging into core js files that manage the pop-up I wanted to try as hard as possible to avoid editing them, to ease updating. So, I found a jquery plugin that basically adds ready() like capabilities to live(). You can find the plugin here: https://github.com/brandonaaron/livequery

           

          I added the following into my custom js footer file:

           

          $j('.j-pop').livequery( function() {
                 $j(this).addClass( $j("> *", this).attr('id') );
          } );
          

           

          This will basically look at the popups very first child element and if it has an ID attribute it will append that ID as a class to the j-pop div container. So as a result my sitenav markup now looks like this:

           

          <div class="j-pop js-pop popover j-satNav-menu" style="visibility: visible; position: absolute; top: 43px; left: 1106.5px; ">
          <div id="j-satNav-menu" class="clearfix j-pop-main" style="opacity: 1; ">
          

           

          So now I have a container that I can call with my css using:

           

          .j-pop.j-satNav-menu 
          

           

          Here is an end result:

           

          it-works.jpg

           

          I do suggest as a feature request that the j-pop do this by default so that we will always have a way to target individual items. Adding a simple unique class paramater shouldn't be too complicated to add in, then have that pull from the rel of an item that has the class to fire the popup.

           

          Hope this helps!

           

          Greg

            • Re: Styling j-pop menu near satallite menu

              Sounds like an interesting idea and a clever work around. I'm adding Jesse Hallett and Aron Racho to this thread so they can look at this.

               

              Jesse & Aron, do you think it makes sense to add this to the container??

                • Re: Styling j-pop menu near satallite menu

                  Yes, that is a relatively small change that sounds like it would make customization easier.

                   

                  Greg, please be aware that the livequery plugin can substantially slow down the application.  In some browsers it has to scan all elements on the page every few milliseconds to catch when the change that you are watching for takes place.  I suggest testing with the oldest and slowest browser that you expect people to use to access your community to make sure that performance is still acceptable.

                   

                  I think that you can achieve the same effect more efficiently with a little monkey-patching.  This bit of code intercepts popover creations to hook in your change:

                  (function($) {
                  
                  
                      var origPopover = $.fn.popover;
                  
                  
                      $.fn.popover = function() {
                          var ret = origPopover.apply(this, arguments);
                          myPopoverHook();
                          return ret;
                      };
                  
                  
                      // Copies default options onto the new method.
                      $.extend($.fn.popover, origPopover);
                  
                  
                      function myPopoverHook() {
                          var $pop = $('.j-pop');
                          $pop.addClass($pop.children().attr('id'));
                      }
                  
                  
                  })(jQuery);
                  
              • Re: Styling j-pop menu near satallite menu

                Ok, what if we started a WIKI where this could be built on a issue by issue basis. Also, is there a snippet location?

                • Re: Styling j-pop menu near satallite menu
                  phrough

                  An easier solution would be to modify/add satelliteNav.soy to your theme. Then look for the approximate code:

                   

                          {call jive.shared.soy.resourceInlineJs}{param code}

                              $j(function(){lb}

                                  new jive.Navbar.Menu.Satellite.Main('#j-satNav-more2','#j-satNav-menu',{lb}darkPopover:false,onLoad: yookos.satNav.reposition, addClass: 'custom-satNav-pop', arrowAdjust: 11, user:{buildJson($user)|noAutoescape}{rb});

                              {rb});

                          {/param}{/call}

                   

                  The addition of the addClass option to the arguments list will append a class to the containing div, allowing you to target the specific pop with your stylesheet. Keep in mind, you'll need to repackage and restart your server in order for soy changes to be incorporated.

                  1 person found this helpful