Coder Social home page Coder Social logo

dom-minimap's Introduction

dom-minimap

npm version downloads JavaScript Style Guide ecoonline

Simply lovely dom minimap

Vertical only (for now)

Use when you have looong pages and want an intuitive way to see where you are and navigate around.

alt tag

Demo

Usage

You can easily add minimap to existing dom structures, by hooking on to existing id, classes or adding your own.

<main id="content">
  <div class="section" data-title="1">Lorem<div>
  <div class="section" data-title="2">Ipsum<div>
  <div class="section" data-title="3">Gotsum<div>
</main>
<aside id="minimap"></aside>
const Minimap = require('dom-minimap')

var minimap = Minimap({ content: 'content', sections: 'section', title: 'data-title' })

var el = minimap()
document.getElementById('minimap').appendChild(el)

// now... call this everytime you think that your content might have changed. Its ok... its cheap.
minimap()

Options

// Defaults:
{
  content: 'minimap-content' // id of element containing sections, or the element directly
  sections: 'minimap-section' // css class used for finding sections, or a function (containerElm) => return Array(sections)
  title: 'data-section-title' // element attr containing section title, or a function (sectionElm, px-size) => return title
  tooltip: 'data-section-tooltip' // element attr containing section tooltip, or a function (sectionElm) => return tooltip
  paddingBottom: 0 // because sometimes you need more then 0.0001 px between sections, put <value>px or <value>%
}

Styling

If you want to style the minimap, you can override some of the default styles. The styles are added first in head so adding this to any of your css files should overwrite the styles.

sections:

.dom-minimap-section {
    background-color: lightgrey;
    color: grey;
    font-size: 11px;
    padding-left: 2px;
    border-radius: 2px;
    left: 5px; right: 5px;
}
.dom-minimap-section:hover {
  background-color: #e6e6e6;
}

the scroll 'hidden' overlay:

.dom-minimap-scroll {
  background-color: rgba(0,0,0,0.15);
}

dom-minimap's People

Contributors

reminyborg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

dom-minimap's Issues

React gist crashes

The React gist linked to in README.md crashes with the following error message a few seconds after being opened:

Bundling error:

---FLAGRANT SYSTEM ERROR---

--- error #0: ---

(logs uuid: 2b4cb310-dd5e-11e6-a3c0-3185b0a829d8 )

Error: "browserify exited with code 1"

code: 1
stderr: Error: Cannot find module 'react/lib/ReactDOM' from '/tmp/react117018-20996-1qouz3u/node_modules/react'
at /home/admin/browserify-cdn/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
at process (/home/admin/browserify-cdn/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
at ondir (/home/admin/browserify-cdn/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
at load (/home/admin/browserify-cdn/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/home/admin/browserify-cdn/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /home/admin/browserify-cdn/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)

dirPath: /tmp/react117018-20996-1qouz3u


This is probably an issue with the package, and not browserify-cdn itself.
If you feel differently, feel free to file a bug report at:

https://github.com/jfhbrook/browserify-cdn/issues

Include the ENTIRETY of the contents of this message, and the maintainer(s)
can try to help you out.

Have a nice day!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.