jquery.hoverIntent.js
line-col.png
line-row.png
screenshots/bullseye-col.png
screenshots/bullseye-hover.png
screenshots/bullseye-row.png
@@ -0,0 +1,64 @@
+bullsEye - a jQuery plugin
+
+==============================================================
+
+Author: Tony Landis
+License: GPL
+Website: http://www.tonylandis.com
+Example: http://tonylandis.com/code-projects/jquery-bullseye/
+ (Same as the index.html file in the repository)
+Screens: http://tonylandis.com/code-projects/jquery-bullseye/
+
+
+==============================================================
+
+This plugin converts a normal table with both row and column
+level headers to an somewhat interactive format - it is named
+bullsEye because the goal was to create a targeting effect
+when the mouse is being moved on the cells and row and
+column headings. Maybe something like "cell lines" or
+"table zoom" would have been more appropriate but I don't
+fell the need to agonize over names.
+
+It was created so that large tables of data can be shown,
+and as the mouse is moved over the cells, visual effects
+are applied to the table so that the corresponding row
+and column header are highlighted so the current position
+within the table of data is revealed.
+
+It also animates lines from the selected cell to the cell's
+corresponding row and column headers, making the
+identification of the cell's headers even easier to see.
+
+When moving the mouse over a column or row header, it will
+highlight all intersecting cells and draw the line to them -
+this enables the quick identification of what cells are
+populated with data, as the application this plugin was
+developed for has intermittent data.
+
+So for example, if the mouse is moved over a column heading,
+only the cells in that column that are populated with data
+will be highlighted and lines will drawn from each those
+populated cells to it's row heading for quick visual
+reference.
+
+The last bit of functionality is to either fade in or zoom
+in extra data on the cell level that is hidden by default
+when hovering over a cell.
+
+The hover content can be HTML formatted and when it is revealed,
+the div used will automatically center over the selected cell
+and will be sized to align with total amount of cells
+configured - for example it can be 3 rows and 5 columns, or 3
+row and 3 columns. This is visually appealing because the
+hover content will fit in the existing grid lines.
+
+This is my first jQuery plugin - if anyone finds bugs or has
+usability suggestions let me know. I have tested it in Firefox,
+Opera, and Safari and the behaviors are pretty much identical.
+
+If anyone wants to develop just fork and contact me if you
+have developed something you feel should be merged into
+this repository.
+
+==============================================================
\ No newline at end of file
README
@@ -0,0 +1,108 @@
+div#bullseye {
+ font-size:85%;
+}
+
+div#bullseye th {
+ border-color:#ccc;
+ font-weight:900;
+}
+div#bullseye th:hover, div#bullseye .th-sel {
+ color:#fff;
+ background:#333;
+}
+div#bullseye .th-hid {
+ color:#ccc;
+ background:#eee;
+}
+
+div#bullseye th.col {
+ text-align:center;
+ vertical-align:bottom;
+ padding:2px;
+ height:26px;
+ overflow:hidden;
+ border:1px solid #eee;
+ border-bottom:1px solid #222;
+ border-top:1px solid #fff;
+ width:50px;
+}
+div#bullseye th.row {
+ text-align:left;
+ height:20px;
+ padding:2px;
+ padding-left:4px;
+ height:20px;
+ overflow:hidden;
+ border:1px solid #eee;
+ border-right:1px solid #222;
+ border-left:1px solid #fff;
+}
+
+
+div#bullseye td {
+ text-align:center;
+ overflow:hidden;
+ border:1px solid #ccc;
+ padding:0;
+ margin:0;
+}
+div#bullseye td.no,div#bullseye td.na {background-color:#eee; color:#eee; }
+
+div#bullseye td.hot:hover {
+ background:#ffffcc;
+ font-weight:900;
+}
+
+div#bullseye td div.hidden {
+ display:none;
+ position:absolute;
+ border:2px solid #eee;
+ opacity:.9;
+ color:#fff;
+ background-color:#333;
+ font-weight:normal;
+ font-size:78%;
+ margin:0;
+ padding:2px;
+ overflow:auto;
+ z-index:100;
+}
+div#bullseye td div.hidden div {
+ padding:2px;
+ margin-bottom:6px;
+ font-size:125%;
+}
+div#bullseye td div.hidden p {
+ padding:1px;
+ font-size:110%;
+}
+div#bullseye td div.hidden a {color:#fff;}
+div#bullseye td div.hidden div a {
+ color:#ffffcc;
+ font-weight:900;
+}
+
+
+.sv {
+ background-color:#ffffcc;
+ font-weight:900;
+}
+
+.sh {
+ background-color:#ffffcc;
+ font-weight:900;
+}
+
+.line-col {
+ background-image:url('line-col.png');
+ background-repeat:repeat-y;
+ color:#ccc;
+ opacity:.6;
+}
+
+.line-row {
+ background-image:url('line-row.png');
+ background-repeat:repeat-x;
+ color:#ccc;
+ opacity:.6;
+}
\ No newline at end of file
bullseye.css
@@ -0,0 +1,1038 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>jQuery Bullseye Example</title>
+ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
+ <style type="text/css" media="screen">
+ h1 {
+ font-size:130%;
+ }
+ </style>
+
+ <link rel="stylesheet" href="bullseye.css" type="text/css">
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+ <script type="text/javascript" src="jquery.hoverIntent.js"></script>
+ <script type="text/javascript" src="jquery.bullseye.js"></script>
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function(){
+ $('div#bullseye').bullseye({
+ 'use_rows':3,
+ 'use_cols':3,
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div id="doc" class="yui-t7">
+<div id="hd" role="banner" style="text-align:center;">
+ <h1>jQuery bullsEye Plugin Live Example</h1>
+</div>
+
+<div id="bd" role="main">
+<div class="yui-g">
+
+<p> </p>
+<p> </p>
+
+
+<!-- bullseye example table # 1 -->
+<div id="bullseye">
+ <table>
+
+ <tr>
+ <th></th>
+ <th class="col">Jan</th>
+ <th class="col">Feb</th>
+ <th class="col">Mar</th>
+ <th class="col">Apr</th>
+ <th class="col">May</th>
+ <th class="col">Jun</th>
+ <th class="col">Jul</th>
+ <th class="col">Aug</th>
+ <th class="col">Oct</th>
+ <th class="col">Sep</th>
+ <th class="col">Nov</th>
+ <th class="col">Dec</th>
+ </tr>
+
+ <!-- ROW A -->
+ <tr>
+ <th class="row">2009</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for A0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ A0
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for A2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ A2
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for A3</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ A3
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for A4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ A4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for A5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ A5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for A6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ A6
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for A8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ A8
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for A10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ A10
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for A11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ A11
+ </td>
+ </tr>
+
+ <!-- ROW B -->
+ <tr>
+ <th class="row">2008</th>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for B1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ B1
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for B2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ B2
+ </td>
+ <td class="na"></td>
+ <td class="na"></td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for B6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ B6
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for B8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ B8
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for B10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ B10
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for B11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ B11
+ </td>
+ </tr>
+
+
+ <!-- ROW C -->
+ <tr>
+ <th class="row">2007</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for C0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ C0
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for C1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ C1
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for C3</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ C3
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for C4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ C4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for C5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ C5
+ </td>
+ <td class="na"></td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for C8</div>.
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ C8
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for C9</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ C9
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for C10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ C10
+ </td>
+ <td class="na"></td>
+ </tr>
+
+
+ <!-- ROW D -->
+ <tr>
+ <th class="row">2006</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for D0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ D0
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for D1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ D1
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for D2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ D2
+ </td>
+ <td class="na"></td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for D5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ D5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for D6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ D6
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for D7</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ D7
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for D8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ D8
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for D9</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ D9
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for D11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ D11
+ </td>
+ </tr>
+
+
+ <!-- ROW E -->
+ <tr>
+ <th class="row">2005</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E0
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E1
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E2
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E3</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E3
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E6
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E8
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E9</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E9
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E10
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for E11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ E11
+ </td>
+ </tr>
+
+ <!-- ROW -->
+ <tr>
+ <th class="row">2004</th>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for F1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ F1
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for F2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ F2
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for F4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ F4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for F5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ F5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for F6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ F6
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for F8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ F8
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for F9</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ F9
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for F11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ F11
+ </td>
+ </tr>
+
+ <!-- ROW G -->
+ <tr>
+ <th class="row">2003</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for G0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ G0
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for G1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ G1
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for G2</p>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ G2
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for G3</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ G3
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for G4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ G4
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for G6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ G6
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for G7</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ G7
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for G8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ G8
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for G9</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ G9
+ </td>
+ <td class="na"></td>
+ <td class="na"></td>
+ </tr>
+
+ <!-- ROW H -->
+ <tr>
+ <th class="row">2002</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H0
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H1
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H2
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H6
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H8
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H9</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H9
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H10
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for H11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ H11
+ </td>
+ </tr>
+
+ <!-- ROW I -->
+ <tr>
+ <th class="row">2001</th>
+ <td class="na"></td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for I2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ I2
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for I3</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ I3
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for I4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ I4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for I5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ I5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for I6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ I6
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for I7</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ I7
+ </td>
+ <td class="na"></td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for I10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ I10
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for I11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ I11
+ </td>
+ </tr>
+
+ <!-- ROW J -->
+ <tr>
+ <th class="row">2000</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J0
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J1
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J2
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J3</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J3
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J6
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J8
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J9</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J9
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J10
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for J11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ J11
+ </td>
+ </tr>
+
+ <!-- ROW K -->
+ <tr>
+ <th class="row">1999</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K0
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K2
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K3</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K3
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K6
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K7</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K7
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K8
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K10
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K11
+ </td>
+ </tr>
+
+ <!-- ROW L -->
+ <tr>
+ <th class="row">1998</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K0
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K1
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K2
+ </td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K6
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K7</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K7
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K8</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K8
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K9</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K9
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K10
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for K11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ K11
+ </td>
+ </tr>
+
+ <!-- ROW L -->
+ <tr>
+ <th class="row">1997</th>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L0</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L0
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L1</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L1
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L2</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L2
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L3</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L3
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L4</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L4
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L5</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L5
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L6</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L6
+ </td>
+ <td class="na"></td>
+ <td class="na"></td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L9</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L9
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L10</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L10
+ </td>
+ <td class="hot">
+ <div class="hidden">
+ <div>Hover for L11</div>
+ <p><a href="#">More info</p><p><a href="#">Another link</p>
+ </div>
+ L11
+ </td>
+ </tr>
+ </table>
+</div>
+
+<p> </p>
+<p> </p>
+
+<h1 style="text-align:center">
+ bullsEye Screenshots
+</h1>
+
+<div style="margin-top:14px;">
+ <img src="screenshots/bullseye-col.png">
+</div>
+
+<div style="margin-top:14px;">
+ <img src="screenshots/bullseye-row.png">
+</div>
+
+<div style="margin-top:14px;">
+ <img src="screenshots/bullseye-hover.png">
+</div>
+
+
+
+</div>
+</div>
+<div id="ft" role="contentinfo">
+ <p> </p>
+ <p style="text-align:center;">
+ <a href="http://www.tonylandis.com/" title="Tony Landis">Back to tonylandis.com</a>
+ </p>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
index.html
@@ -0,0 +1,285 @@
+//
+// bullsEye interactive table jQuery plugin
+//
+(function($) {
+
+
+ $.fn.bullseye = function(options) {
+
+ // override bullseyes's default settings
+ var opts = $.extend({}, $.fn.bullseye.defaults, options);
+ $table = this;
+
+ // set the private max rows/cols values
+ opts.max_cols = $table.find('th.'+ opts.class_th_col).length - opts.use_cols;
+ opts.max_rows = $table.find('th.'+ opts.class_th_row).length - opts.use_rows;
+
+ // set cell row/col
+ row=-1;
+ this.find('tr').each(function() {
+ col = 0;
+ $(this).find('td').each(function() {
+ $(this).attr('rel', row + ',' + col);
+ col += 1;
+ });
+ row += 1
+ });
+
+ // column heading handling, set column number and listeners
+ var col = 0;
+ $table.find('th.'+ opts.class_th_col).each(function() {
+
+ // set col number for expression lookup later
+ $(this).attr('rel', col);
+
+ // set column heading listeners
+ $(this).bind('mouseover', function() {
+ var icol = $(this).attr('rel');
+
+ // loop on all cells
+ $table.find('td[rel$=,'+ icol +']').each(function(){
+ var xy = $.fn.bullseye.get_cell_xy( $(this) );
+
+ if( $(this).attr('class') == opts.class_td_hot) {
+ // this is a hot cell, highlight it and draw a line to it from the row heading
+ $table.find('th.'+ opts.class_th_row + '[rel='+ xy.row +']').addClass('th-sel');
+ $.fn.bullseye.lines_draw_col($table, opts, icol, xy.row);
+ } else {
+ // hidden cell
+ $table.find('th.'+ opts.class_th_row + '[rel='+ xy.row +']').addClass('th-hid');
+ }
+ $(this).addClass('sv');
+ });
+ }).bind('mouseout', function() {
+ $table.find('td.sv').each(function(){
+ $(this).removeClass('sv');
+ });
+ $table.find('th.'+ opts.class_th_row).each(function() {
+ $(this).removeClass('th-sel').removeClass('th-hid');
+ });
+ $.fn.bullseye.lines_clear($table);
+ });
+ col += 1;
+ });
+
+
+
+
+ // row heading handling, set row number and listeners
+ var row = 0;
+ $table.find('th.'+ opts.class_th_row ).each(function() {
+
+ // set col number for expression lookup later
+ $(this).attr('rel', row);
+
+ // set column heading listeners
+ $(this).bind('mouseover', function() {
+ var irow = $(this).attr('rel');
+
+ // loop on all cells
+ $table.find('td[rel^='+ irow +',]').each(function(){
+ var xy = $.fn.bullseye.get_cell_xy( $(this) );
+ if( $(this).attr('class') == opts.class_td_hot) {
+ // this is a hot cell, highlight it and draw a line to it from the row heading
+ $table.find('th.'+ opts.class_th_col + '[rel='+ xy.col +']').addClass('th-sel');
+ $.fn.bullseye.lines_draw_row($table, opts, irow, xy.col);
+ } else {
+ // hidden cell
+ $table.find('th.'+ opts.class_th_col + '[rel='+ xy.col +']').addClass('th-hid');
+ }
+ $(this).addClass('sv');
+ });
+ }).bind('mouseout', function() {
+ $table.find('td.sv').each(function(){
+ $(this).removeClass('sv');
+ });
+ $table.find('th.'+ opts.class_th_col).each(function() {
+ $(this).removeClass('th-sel').removeClass('th-hid');
+ });
+ $.fn.bullseye.lines_clear($table);
+ });
+ row += 1;
+ });
+
+
+
+ // set cell-level listeners
+ return this.find('td.' + opts.class_td_hot).each(function() {
+
+ $cell = $(this);
+ var xy = $.fn.bullseye.get_cell_xy($cell);
+
+ $cell.bind('mouseover', function() {
+ // add the selected class to this cell's column and row headings
+ $table.find('th.'+ opts.class_th_col + '[rel='+ xy.col +']').addClass('th-sel');
+ $table.find('th.'+ opts.class_th_row + '[rel='+ xy.row +']').addClass('th-sel');
+ // draw the lines from this cell's column and row headings to this cell
+ $.fn.bullseye.lines_draw_row($table, opts, xy.row, xy.col);
+ $.fn.bullseye.lines_draw_col($table, opts, xy.col, xy.row);
+ }).bind('mouseout', function() {
+ // remove the selected class from this cell's column and row headings
+ $table.find('th.'+ opts.class_th_col + '[rel='+ xy.col +']').each(function() { $(this).removeClass('th-sel') });
+ $table.find('th.'+ opts.class_th_row + '[rel='+ xy.row +']').each(function() { $(this).removeClass('th-sel') });
+ // clear the lines to this cell
+ $.fn.bullseye.lines_clear($table);
+ });
+
+ // Conditional hover action
+ // Enable with {'cellhover':true}
+ // Requires Brian Cherne's excellent hoverIntent class: http://cherne.net/brian/resources/jquery.hoverIntent.html
+ if (opts.cell_hover == true)
+ {
+ $cell.hoverIntent({
+ sensitivity: opts.cell_hover_sensitivity,
+ interval: opts.cell_hover_interval,
+ over: function(e) {
+ child = $(this).children(":first")[0];
+ $.fn.bullseye.set_hover_position($table, opts, this, child);
+ },
+ out: function(e) {
+ var child = $(this).children(":first")[0];
+ var pos = $(this).position();
+ $(child).stop().fadeOut('slow');
+ }
+ }
+ );
+ }
+
+ });
+ };
+
+
+ //
+ $.fn.bullseye.set_hover_position = function(table, opts, parent, child)
+ {
+ xy = $.fn.bullseye.get_cell_xy(parent);
+ var row = xy.row
+ var col = xy.col
+
+ // determine start col
+ start_col = col - ( (opts.use_cols-1) / 2 );
+ while ( start_col < 0 ) start_col += 1;
+ if( start_col >= opts.max_cols) start_col = opts.max_cols;
+ end_col = start_col + opts.use_cols-1;
+
+ // determine start row
+ start_row = row - ( (opts.use_rows-1) / 2 );
+ while ( start_row < 0 ) start_row += 1;
+ if( start_row >= opts.max_rows) start_row = opts.max_rows;
+ end_row = start_row + opts.use_rows-1;
+
+ // get the start row,col cell
+ var start = table.find('td[rel='+start_row+','+start_col+']')[0];
+ var start_pos = $(start).position();
+
+ // get the end row,col
+ var end = table.find('td[rel='+end_row+','+end_col+']')[0];
+ var end_pos = $(end).position();
+
+ if (opts.cell_hover_effect == 'zoom')
+ {
+ // zoom in the cell hover content
+ var pos = $(parent).position();
+ $(child).css({
+ 'top': pos.top,
+ 'left': pos.left,
+ 'height': parent.scrollHeight + 'px',
+ 'width': parent.scrollWidth + 'px',
+ 'opacity': .95
+ });
+ $(child).animate({
+ 'top': start_pos.top,
+ 'left': start_pos.left,
+ 'margin-top': '-2px',
+ 'margin-left': '-2px',
+ 'height': (end_pos.top - start_pos.top + (end.scrollHeight - 10)) +'px',
+ 'width': (end_pos.left - start_pos.left + (end.scrollWidth - 10)) +'px'
+ });
+
+ }
+ else if (opts.cell_hover_effect == 'fade')
+ {
+ // fade in the cell hover content
+ $(child).css({
+ 'top': start_pos.top,
+ 'left': start_pos.left,
+ 'height': (end_pos.top - start_pos.top + (end.scrollHeight - 10)) +'px',
+ 'width': (end_pos.left - start_pos.left + (end.scrollWidth - 10)) +'px'
+ }).fadeIn();
+
+ } else {
+ // error
+ }
+
+ };
+
+
+ // get the row/col of the selected cell
+ $.fn.bullseye.get_cell_xy = function(cell) {
+ var s = $(cell).attr('rel').split(',');
+ return {
+ 'row': s[0],
+ 'col': s[1]
+ }
+ };
+
+ // draw horizontal lines
+ $.fn.bullseye.lines_draw_row = function(table, opts, row, col) {
+
+ // get the height of this row
+ var parent = table.find('th.' + opts.class_th_row)[0];
+ var width = parent.clientWidth;
+ var height = parent.clientHeight;
+ var center = width/2;
+
+ var count = 0;
+ table.find('td[rel$=,'+col+']').each(function(){
+ if (count < row) {
+ $(this).addClass("line-col");
+ }
+ count++;
+ });
+ }
+
+ // draw vertical lines
+ $.fn.bullseye.lines_draw_col = function(table, opts, col, row) {
+ var count = 0;
+ table.find('td[rel^='+row+'],').each(function(){
+ if (count < col) $(this).addClass("line-row");
+ count++;
+ });
+ }
+
+ // clear all lines
+ $.fn.bullseye.lines_clear = function (table) {
+ table.find('td[class*=line]').each(function(){
+ $(this).removeClass("line-col");
+ $(this).removeClass("line-row");
+ });
+ }
+
+
+ //
+ // bullseye default settings
+ //
+ $.fn.bullseye.defaults = {
+
+ // cell hover settings
+ 'cell_hover': true, // (true|false) enable/disable cell level display of extra content on mouseover
+ 'cell_hover_effect': 'fade', // (fade|zoom) the effect to use when showing/hiding the extra content
+ 'cell_hover_sensitivity':1, // (int) passed directly to hoverIntent
+ 'cell_hover_interval':120, // (int) passed directly to hoverIntent
+ 'use_cols':3, // (an uneven number >= 3) how many columns to span
+ 'use_rows':5, // (an uneven number >= 3) how many rows to span
+
+ // class names
+ 'class_td_hot': 'hot',
+ 'class_th_row': 'row',
+ 'class_th_col': 'col',
+
+ // private
+ 'max_rows':0,
+ 'max_cols':0,
+ };
+
+}) (jQuery);
\ No newline at end of file
jquery.bullseye.js
d55b35daf08b8940113fa3331f8938017e10797a
Tony Landis
tony.landis@gmail.com
http://github.com/tony-landis/jQuery-bullsEye/commit/d65d7aaa914a744789cebef53938fdf5e2e208a4
d65d7aaa914a744789cebef53938fdf5e2e208a4
2009-06-09T18:04:40-07:00
2009-06-09T18:04:40-07:00
First Commit
5e83331df5ca9fb8d5e85231aa40bb888f094c13
Tony Landis
tony.landis@gmail.com