• Stars
    star
    326
  • Rank 129,027 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Rotate through a series of sentences

substituteteacher.js (demo)

Build status

Substitute Teacher

substituteteacher.js will rotate through a series of sentences, transitioning between each one.

Quick Start

substituteteacher.js is easy to use. Add the script to your page, provide a target container and call run().

Step 0: Install

Download the latest release or install from npm:

npm install substitute-teacher --save-dev

Step 1: Add the substituteteacher.min.js file

<script src="substituteteacher.min.js"></script>

Step 2: Create your container element

<div id="sub">Fallback Text</div>

Step 3: Init substituteteacher.js

var sub = new Sub([
    "A daring JavaScript library for subsitute teachers",
    "A hilarious JavaScript library for awesome taglines",
    "A svelte JavaScript library for sweet taglines",
    "A super fun and wholesome JavaScript library for sliding fun",
    "A JavaScript library for word substitution"
]).run();

API

Sub(sentences, [options])

The Sub constructor create a new instance of sub. The sentences parameter should be a list of sentence strings. Customize the instance by passing the options parameter. The example below uses all options and their defaults:

var opts = {
  containerId: "sub",
  namespace: "sub",
  interval: 5000,
  speed: 200,
  mobileWidth: null,
  verbose: false,
  random: false,
  best: true,
  clearOriginalContent: true,
};
var sub = new Sub([
    "A daring JavaScript library for subsitute teachers",
    "A hilarious JavaScript library for awesome taglines",
    "A svelte JavaScript library for sweet taglines",
    "A badass JavaScript library for sliding fun",
    "A JavaScript library for word substitution"
], opts).run();

Options

Option Description Defualt
containerId Id of the injection point for HTML "sub"
namespace Namespace to prepend to classes used internally "sub"
interval Number of milliseconds between each change 5000
speed Number of milliseconds that each step of the animation should take 200
mobileWidth If defined, the minimum screen size at which to enable the library null
verbose True to enable console logging false
random True if the first sentence to appear should be random false
best True if the sentences should be ordered to minimize the number of changes performed true
clearOriginalContent True to empty out container and fade in the substitute teacher, false to seemlessly transition from the original content to the first item. This only works if random is false true

run()

Starts the rotation between sentences, and attaches resize handlers (for disabling the library on small screens if mobileWidth is defined).

stop()

Stops the rotation between sentences, and remove resize handlers.

More Repositories

1

pig.js

Arrange images in a responsive, progressive-loading grid managed in JavaScript using CSS transforms.
JavaScript
357
star
2

intermediate-flask

A look at some intermediate Flask features
HTML
30
star
3

eventum

An event-driven CMS that syncs with Google Apps
Python
21
star
4

schlosser.io

My personal website
HTML
9
star
5

flask-seed

A Flask boilerplate app
Python
9
star
6

feeding-dan

In 2015, I took a picture of everything I ate. These are those photos.
JavaScript
9
star
7

yosemite-scraper

A Scraper to find last minute cancellations for campgrounds near yosemite
Python
9
star
8

shortener-web

A URL Shortener for the serverless era
JavaScript
4
star
9

wiki-battle

In what language are editors the most excited on Wikipedia right now?
JavaScript
3
star
10

servers

How I run DigitalOcean servers
3
star
11

when-will-the-1-come

When will the 1 train arrive at Columbia?
Python
2
star
12

nav.js

A lightweight, style-it-yourself navbar
JavaScript
1
star
13

notebook

A Firebase-backed markdown notebook built in polymer
HTML
1
star
14

dotfiles

My dotfiles
Vim Script
1
star
15

people-nav

A cool little experiment in JS + CSS
HTML
1
star
16

Chrome.AI-server

The server for SpeakEasy
Python
1
star
17

dfa-roadmap

DFA Design Roadmap
JavaScript
1
star
18

remindr

Let people remind you!
Python
1
star
19

setup.schlosser.io

One script to setup a new Mac, just the way I like it :)
Shell
1
star
20

absent

Connecting the Dots: Chronic Absenteeism in New York City Public Schools
Jupyter Notebook
1
star
21

EtMe

A personal collection of Etsy stores based on Foursquare checkins.
Python
1
star
22

NearBuy

The DevFest Battle of the Hacks Project
Swift
1
star
23

learn-websites

Learn how to build beautiful websites with paralax and scrolling effects!
Python
1
star
24

DropboxScripts

Scripts that seek to simplify the Dropbox user experience
Python
1
star
25

FoodJournal

A Python script that allows users to create an automated WordPress blog with photos and descriptions of the food they eat.
Python
1
star