Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Overview of this book

Table of Contents (18 chapters)
Learning jQuery
Credits
About the Authors
About the Reviewers
Preface

The Finished Code


Our second example page has demonstrated table row striping, highlighting, tooltips, collapsing/expanding, and filtering. Taken together, the JavaScript code for this page is:

$(document).ready(function() {
  var highlighted = "";
  var column = 3;

  var positionTooltip = function(event) {
    var tPosX = event.pageX;
    var tPosY = event.pageY + 20;
    $('div.tooltip').css({top: tPosY, left: tPosX});
  };
  var showTooltip = function(event) {
    $('div.tooltip').remove();
    var $thisAuthor = $(this).text();
    if ($(this).parent().is('.highlight')) {
      highlighted = 'un-';
    } else {
      highlighted = '';
    };
    $('<div class="tooltip">Click to ' + highlighted +
                    'highlight all articles written by ' +
                            $thisAuthor + '</div>').appendTo('body');
    positionTooltip(event);
  };
  var hideTooltip = function() {
    $('div.tooltip').remove();
  };

  $('table.striped td:nth-child(' + column + ')' ...