jQuery Waypoints

Dial Controls

Font Size:

  • 8px
  • 9px
  • 10px
  • 11px
  • 12px
  • 13px
  • 14px

Line Height:

  • .75
  • 1.0
  • 1.25
  • 1.5
  • 1.75
  • 2.0
  • 2.25
  • 2.5

Text Color:

  • #000
  • #222
  • #444
  • #666
  • #888
  • #aaa
$('.dial li').waypoint( function(direction) {
  var $active = $(this);
  var property, value;

  /* The waypoint is triggered at the top of each list item representing a dial section. When triggering in the down direction we want to use the dial section the waypoint is attached to. But in the up direction we want to use the previous dial section. */
  if (direction === "up") {
    $active = $active.prev();
  }

  /* If we triggered in the up direction and the result from 'prev' came back with an empty set of elements, it means we were on the first element in the list, and we should just use the original element. */
  if (!$active.length) {
    $active = $(this);
  }

  /* The property the dial controls is a data attribute on the ul. */
  property = $active.closest('.dial').data('property');

  /* The value for that property is a data attribute on each li. */
  value = $active.data('value');
	
  $('#example-target').css(property, value);
}, {
  context: 'ul' // Make the scroll context the nearest ul.
});