Simple jQuery Dropdown Menu with disabling trigger attached to footer

3 Views

There’s got to be a better way to do this.

  • add hover event to #footer that duplicates (via clone() ) the footer menu and displays it UNLESS the footer is showing in $(window)

NOTE

Read More

  • div#menu child of div#footer is positon:fixed to the bottom of the
    screen.

  • using the stick footer to bottom of content css hack

How could I better optimize the code… Especially the part where I don’t want it to pop-up when the actual footer is showing?

CSS: 

.floatingMenu { display:block; position:fixed; width:100%; }
#menu{position:fixed;bottom:0;width:100%;z-index:10;}
/**footer at bottom**/
html, body, #wrap, #body-container { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
body > #body-container {height:auto;min-height:100%}
#main{padding-bottom:300px;min-height:250px;}
#footer{position:relative;margin-top:-300px;height:300px;clear:both;}
.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display: inline-block}
html .clearfix { height: 1%}
.clearfix {display: block}

HTML 

<body>
  <div id="body-container">
    <div id="main" class="clearfix">
    </div>
  </div>

  <div id="footer">


    <div id="menu">

      <div id="menu-footer" class="menu-container">
        <div class="wrap">
          <?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php file ?>
        </div>
      </div>
    </div> <!-- #menu -->


    <div id="footer-links" class="footer-color">
      <?php wp_footer(); // WordPress footer hook ?>
      <?php echo apply_atomic_shortcode( 'footer_content', hybrid_get_setting( 'footer_insert' ) ); ?>
    </div>
  </div><!-- #footer-links -->


  </div><!-- #footer -->
</body>

JS V1 (there are more versions below) 

<script type="text/javascript">
  function addHoverEvent(varObject, varSpeed) {
    varObject.css("display", "block").addClass('floatingMenu')
    .animate({'bottom': '18px'}, varSpeed / 0.75);
  }
  function exitMenu(varObject, varSpeed) {
    varObject.stop(true,true).delay(1050).animate({'bottom': '-100%'}, varSpeed,
      function(){
        $(this).removeClass('floatingMenu');
        varObject.css("display", "none");
      }
    );
  }
$(document).ready(function() {
  var
    varSpeed = 900,
    varBindObject = $('#footer');

    varObject = $('#footer-links').clone().appendTo('#footer');
    varObject.css("display", "none");

    $(window).scroll(function() {
      var
        varBindObject = $('#footer'),
        y = $(window).scrollTop(),
        w = $(window).height(),
        c = $('#footer-links').offset();

      if(y+w>c.top) {
        //varBindObject.data("events");
        varBindObject.die();
      } else {
          varBindObject
          .live('mouseenter', function() {
            addHoverEvent(varObject, varSpeed);})
          .live('mouseleave', function () { 
            exitMenu(varObject, varSpeed);});
      }
    });

    varBindObject
    .live('mouseenter', function() {
      addHoverEvent(varObject, varSpeed);
    })
    .live('mouseleave', function () { 
      exitMenu(varObject, varSpeed);
    });
});
</script>

JS V2 

<script type="text/javascript">
  function addHoverEvent(varObject, varSpeed) {
    varObject.css("display", "block").addClass('floatingMenu')
    .animate({'bottom': '18px'}, varSpeed / 0.75
             // { duration: 'fast',
             //   easing: 'in-out'
             // }
             );
  }
  function exitMenu(varObject, varSpeed) {
    varObject.stop(true,true).delay(900).animate({'bottom': '-100%'}, varSpeed,
      function(){
        $(this).removeClass('floatingMenu');
        varObject.css("display", "none");
      }
    );
  }
  function isOnScreen(element) {
    var offset = element.offset().top - $(window).scrollTop();

    if(offset > window.innerHeight){
        // Not in view so scroll to it
        return false;
    }
   return true;
  }

$(document).ready(function() {
  var
    varSpeed = 900,
    varBindObject = $('#footer');

    varObject = $('#footer-links').clone().appendTo('#footer');
    varObject.css("display", "none");

    if(isOnScreen($('#footer-links'))) {
    }else{
    varBindObject
    .live('mouseenter', function() {
      addHoverEvent(varObject, varSpeed);
    })
    .live('mouseleave', function () { 
      exitMenu(varObject, varSpeed);
    });
    }

    $(window).scroll(function() {
      var
        varBindObject = $('#footer'),
        y = $(window).scrollTop(),
        w = $(window).height(),
        c = $('#footer-links').offset();

        varBindObject
          .live('mouseenter',
                function() {
            addHoverEvent(varObject, varSpeed);
                })
          .live('mouseleave',
                function () { 
            exitMenu(varObject, varSpeed);
                });

      if(isOnScreen($('#footer-links'))) {
      //if(y+w>c.top) {
        varBindObject.die();
      }
    });
});
</script>
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. If I understand your question correctly, you want to duplicate the #footer-links element within the #menu container; when the #footer element is closed over, but only make it visible if there is not already a #footer element visible within the window.

    If that’s correct, then this should do the trick:

    jQuery('#footer').hover(function () {
    // Clone the element
    new_el = jQuery('#footer-links').clone();

    // Check if it should be made visible
    new_el.attr('hidden', jQuery('#footer:visible', jQuery(window)).length > 0);

    // Append it to the menu container (change this to append somewhere else)
    new_el.appendTo('#footer');
})

    You could also bind this to the jQuery.mouseenter() event instead of jQuery.hover()

    Hope that helps!