teg-ng-make-visible

AngularJS module for making elements visible.

Added by: Sam Deering

GitHub

Repository

exchangegroup/teg-ng-make-visible

Stats

Stars: 1

Watchers: 1

Forks: 0

Module Description

Overview

An AngularJS module. Ensures element is visible to user. If element is not visible - scrolls the window to make it visible.

The way window is scrolled depends on how big the element is relative to the window:

  1. Element is centered in the top half of the screen if element's height is smaller than half of the screen.
  2. If element is taller than half the screen - page is scolled to show element's top.

If jQuery is present it will scroll the page with animation.

Include JavaScript:

<script src="/bower_components/teg-ng-jq/dist/teg-ng-jq.min.js"></script>
<script src="/bower_components/teg-ng-make-visible/dist/teg-ng-make-visible.min.js"></script>

Use in AngularJS app

Add module to your app's dependencies:

angular.module('YourApp', ['TegNgMakeVisible']);

From JavaScript:

tegNgMakeVisible.makeVisible(element);

element argument is a DOM element.

From HTML - for new elements inserted dynamically by JavaScript:

<div class='tegNgMakeVisible'>My element<div>

Development

After cloning the github repo into a dir:

npm install
bower install
npm install -g gulp

Test:

gulp test

Demo in browser:

gulp serve

Build:

gulp

Finally, bump bower version number:

git tag v0.1.[patch number]
git push origin v0.1.[patch number]

Module stats last updated: 2015-04-19 02:51:04

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!