Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

56 lines (39 sloc) 1.299 kB

Overlay

Overlays for individual DOM elements.

screen shot 2013-07-26 at 6 00 44 pm

Demo

Installation

$ component install timoxley/overlay

Example

<ul id="target">
  <li>Red</li>
  <li>Green</li>
  <li>Red</li>
  <li>Green</li>
  <li>Red</li>
  <li>Green</li>
</ul>
<div id="redOverlay"></div>
<div id="greenOverlay"></div>
    var overlay = require('overlay')

    // grab some elements to use as overlays.
    var redOverlay = document.querySelector('#redOverlay')
    var greenOverlay = document.querySelector('#greenOverlay')

    // create an overlay over the first item
    var firstItem = document.querySelector('#target li:first-child')
    var firstItemOverlay = overlay(redOverlay, firstItem)

    // create groups of overlays
    var oddItems = document.querySelectorAll('#target li:nth-child(odd)')
    var evenItems = document.querySelectorAll('#target li:nth-child(even)')

    var redGroup = overlay(redOverlay, oddItems)
    var greenGroup = overlay(greenOverlay, evenItems)

    setTimeout(function() {
      redGroup.hide()
      greenGroup.show()
    }, 1000)

License

MIT

Jump to Line
Something went wrong with that request. Please try again.