Home

Awesome

A minimap for websites, a la Sublime Text

For a live demo please refer to this page.

Let's jump right in with an example:

<html>
  <head>
    <title>My Website</title>

     <!-- Include xivmap.css -->
    <link rel="stylesheet" href="xivmap/xivmap.css">

    <link rel="stylesheet" href="css/my-styles.css">
    <script src="js/my-script.js"></script>
  </head>
  <body>
    <h1>Example header<h1>
    <p>Sample content</p>

    <!-- Container div, use the provided positioning and animation classes -->
    <div class="xivmap top-right slide-in"></div>

    <!-- Include xivmap.js and run it -->
    <script src="xivmap/xivmap.js"></script>
    <script> xivmap(); </script>
  </body>
</html>

Files

Xivmap is composed of three files:

Minified files are also provided, they should be used if you don't have a build process set up

To use Xivmap, you need to add four things to your page: the two required files, a container for xivmap to use, and a line of JavaScript to start it up.

CSS Classes

You should add one of the positioning classes to your xivmap container, one animation class is also recommended.

Positioning classes

top-right, right, bottom-right
top-left, left, bottom-left

Animation classes

slide-in, fade-in

jQuery version

Xivmap uses a hybrid model, both the jQuery and vanilla JavaScript versions are available in the same file. If jQuery is detected as being available, Xivmap will add its function to it.
For the examples on this page, simply replace the calls to xivmap() with $('.xvmap').xivmap()

Short Instructions

Step by step for beginners

Let's add Xivmap to this example page:

<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="css/my-styles.css">
    <script src="js/my-script.js"></script>
  </head>
  <body>
    <h1>Example header</h1>
    <p>Sample content</p>
  </body>
</html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="xivmap/xivmap.css"> <!-- XIVMAP'S CSS -->
    <link rel="stylesheet" href="css/my-styles.css">
    <script src="js/my-script.js"></script>
  </head>
  <body>
    <h1>Example header</h1>
    <p>Sample content</p>
    <script src="xivmap/xivmap.js"></script> <!-- XIVMAP'S JAVASCRIPT -->
  </body>
</html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="xivmap/xivmap.css">
    <link rel="stylesheet" href="css/my-styles.css">
    <script src="js/my-script.js"></script>
  </head>
  <body>
    <h1>Example header</h1>
    <p>Sample content</p>
    <div class="xivmap top-right slide-in"></div> <!-- XIVMAP'S CONTAINER -->
    <script src="xivmap/xivmap.js"></script>
  </body>
</html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="xivmap/xivmap.css">
    <link rel="stylesheet" href="css/my-styles.css">
    <script src="js/my-script.js"></script>
  </head>
  <body>
    <h1>Example header</h1>
    <p>Sample content</p>
    <div class="xivmap top-right slide-in"></div>
    <script src="xivmap/xivmap.js"></script>
    <script> xivmap(); </script> <!-- START XIVMAP! -->
  </body>
</html>

Using Docked Mode

Advanced users, feel free to use your own solution. xivmap-docked.css is just one example of the way you can customize the look and feel of your minimap.

  1. Include xivmap-docked.css
  2. Add xivmap-docked-left or xivmap-docked-right to the <body>
  3. Create a wrapper around the xivmap container, using the xivmap-docked-wrapper class:
<div class="xivmap-docked-wrapper">
  <div class="xivmap top-right"></div>
</div>

Enabling Autohide

Autohide makes it so the minimap only shows when hovered or while scrolling, great for minimalist designs.

Change your xivmap() function call to enable autohide:

xivmap({autohide: true});

Disabling Accurate Text

Accurate text is a feature that represents text boxes like headings and paragraphs with the true size of the text they contain, instead of the entire box. It is enabled by default.

Turning off accurate text results in a more stylized look which may benefit some minimalist designs.

xivmap({accurateText: false});

All Options

Below are the options you may pass to the xivmap function, along with their default values

xivmap({
  // Element that will hold the minimap DOM
  minimap: document.querySelector('.xivmap'),

  // CSS selectors for elements that will appear on the minimap
  selectors: xivmap.selectors(),

  // Where to look for the selectors
  context: document.body,

  // Additional elements that will appear in the minimap, even if outside of context
  elements: [],

  // Use text nodes instead of elements, makes text more detailed
  accurateText: true,

  // When accurateText is on, use text nodes for these types of tags
  accurateTextTags: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P'],

  // Whether to show elements with opacity: 0
  renderNoOpacity: false,

  // Only shows the minimap when hovering or scrolling
  autohide: false,

  // When autohide is on, hide the minimap after this many milliseconds
  autohideDelay: 1500,
  
  // A function used for pixel rounding
  roundingFn: Math.round

  // Refresh itself on the window's load event so that images are included properly.
  refreshOnLoad: true
});

Custom styling

Please look at the xivmap.css file, it is fully documented and explains how to modify the way xivmap looks.

Quick example to modify the color of anchor tags on the minimap:
Note: tag names must be capitalized, as per the JavaScript DOM api.

.xivmap [data-tag="A"] {
  background-color: green;
}