This repository has been archived by the owner. It is now read-only.
an element swapping machine
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images
js
.gitignore
LICENSE
index.html
readme.md

readme.md

Rotor

###A JavaScript tool for HTML element switching###

rotor.js includes the function flipPic(), which will swap out element2 and put element1 in its place when used this way:

flipPic(element1, element2);

The first two parameters can be any valid CSS selector. For example if you wanted to remove the image with id firstImg and put the image with id secondImg there, you would call flipPic like this:

flipPic('img#secondImg', 'img#firstImg');

The flipPic function can be called with no parameters and it will default to trying to remove the first child of the element with id rotor and swap in the next child. More can be learned by looking at the code.

The index.html in this project implements Rotor and its default element swapping behavior can be seen when clicking the button.

Rotor requires jQuery, and by default uses that library's fadeIn() and fadeOut() methods, but that behavior can be overridden by passing in different comparable methods like toggle() in flipPic's 5th and 6th parameters. (The 3rd and 4th parameters allow the default parent and child selectors to be overridden; if you want to skip any parameters in the flipPic function then just pass them 'undefined' or null).

Rotor was created by Dan McKeown and an ES5-transpiled version of it was used in the Northpaw theme for WordPress.