ScrollTo Anchor tags using jQuery

Posted on June 8, 2011 by Frank

A quick jQuery plugin to over-ride/replace the jump-to action with a smooth-easing scroll action for anchored links. This will be updated with an option to set the duration

jQuery Plugin

(function($){
  $.fn.weighAnchor = function() {
    this.each(function(){	
    $(this).click(function(){
      var scrollTo = $(this).attr("href");
      $('html, body, #container').animate({scrollTop: $(scrollTo).offset().top}, 2000);
      return false;
    });
  });
 };
})(jQuery);

Javascript

$(document).ready(function(){
  $('.weigh-anchor').weighAnchor();
});

HTML

<a id="container">
  <a class="weigh-anchor" href="#anchors-aweigh">Scroll to Element ID</a>
  <h3 id="anchors-aweigh">Anchors Aweigh</h3>
</div>

It is usually good practice to have a div element wrapping your content, and in this case it is needed for browsers like chrome and safari to make this plugin work properly. They will not animate from html, body like mozilla or ie, but will animate from body, #container.

Posted in Web Development | Tagged , , , , | Leave a comment

TimeDrop Menus with jQuery

Posted on June 3, 2011 by Frank

TimeDrop menu is a plugin for jQuery based on common drop-down methods, but allows for drop down menus that will persist until a timeout triggers them to close. This allows the user to jump off the menu for a short time, then come back to it without the menu closing.
jQuery.timeDrop.js

/*

  Timed drop-down menus using jQuery

  2010 Tier7.net

*/

(function( $ ){

  $.fn.timeDrop = function() {

  //---------------------------------------------------------------

  // jQuery TimeDrop Menus v0.1

  //---------------------------------------------------------------

  var dropTimer = 0;

  var menu = this;

  this.hover(function(){

    $("ul", this).slideDown('fast').not('.time-drop-toggled').addClass('ti
me-drop-toggled');

    menu.parents("ul").not('.time-drop-toggled').hide();

    clearTimeout(dropTimer);

  },function(){

    $("ul", menu).removeClass('time-drop-toggled');

    dropTimer=setTimeout(function(){$("ul", menu).not('.time-drop-toggled')
.slideUp('fast');}, 1100);

  });

  };

})( jQuery );

CSS

  No special CSS required at this time.

Code For Single Drop Down

<div class="time-drop-menu"><a href="#">My Menu</a>

  <ul>

    <li><a href="#">Menu item 1</a></li>

    <li><a href="#">Menu item 2</a></li>

    <li><a href="#">Menu item 3</a></li>

  </ul>

</div>

<script>

  $(".time-drop-menu").timeDrop();

</script>

Code For Multi Drop Down

<ul class="time-drop-menu">

  <li><a href="#">First Menu</a>

    <ul>

      <li><a href="#">Menu item 1</a></li>

      <li><a href="#">Menu item 2</a></li>

      <li><a href="#">Menu item 3</a></li>

    </ul>

  </li>

  <li><a href="#">Second Menu</a>

    <ul>

      <li><a href="#">Menu item 1</a></li>

      <li><a href="#">Menu item 2</a></li>

      <li><a href="#">Menu item 3</a></li>

    </ul>

  </li>

</ul>

<script>

  $(".time-drop-menu > li").timeDrop();

</script>
Posted in Uncategorized, Web Development | Tagged , , , , , | Leave a comment