No description, website, or topics provided.
CoffeeScript CSS Ruby
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Space Frame

Space Frame

Space Frame allows you to use up to 4 pieces of content to transition between using a scrubber. You can use 2 pieces of content and restrict movement to just horizontal or vertical as well.

The example above (as well as the demo) use 4 images, but you can use any html content to transition between.


  • Chrome
  • Firefox
  • Safari
  • IE9



Load both the css and javascript on your page.

You can install through bower

bower install brewster1134/jquery-space-frame -S

Or... Download the JS Download the CSS


To use a 2 panel space frame, add a space-axis-x or space-axis-y class to the space-frame element. x will create a left/right space frame on the x axis, and y will create a top/bottom space frame on the y axis.

Panels are not only restricted to images. Any content can be used however the space frame is sized based on the computed width/height of the first panel. Being explicit with the sizing of content will present more desirable results :)

<div class="space-frame" id="four_panel">
  <div class="space-panel"><img src="kitty.jpg" /></div>
  <div class="space-panel"><img src="kitty_red.jpg" /></div>
  <div class="space-panel"><img src="kitty_green.jpg" /></div>
  <div class="space-panel"><img src="kitty_blue.jpg" /></div>
  <div class="space-scrubber"></div>

<div class="space-frame" data-space-axis="x" id="two_panel_left_right">
  <div class="space-panel"><img src="kitty_red.jpg" /></div>
  <div class="space-panel"><img src="kitty_blue.jpg" /></div>
  <div class="space-scrubber"></div>

<div class="space-frame" data-space-axis="y" id="two_panel_top_bottom">
  <div class="space-panel"><img src="kitty_green.jpg" /></div>
  <div class="space-panel"><img src="kitty_blue.jpg" /></div>
  <div class="space-scrubber"></div>


Initialize the space frame.

The space frame sets its size based on the width and height of the first panel. This means the content needs to be loaded (esp images!), or the size be explicitly set before initializing the space frame.

  • Explicitly set the width and height on the .space-panel elements with CSS
  • If you are using images, you can use a library such as imagesloaded or explicitly set width and height on your space-panels to ensure the desired behavior.
  • You may also be able to use jquery's .load event.



Animate the space frame to given coordinates.

The animate method accepts 4 arguments. Required x & y coordinates, and optional duration and timing values.

X & Y coordinates are relative to the top left of the space frame.

Duration & timing values can be any allowed CSS3 values. duration timing

$('#my-space-frame').spaceframe 'animate', 50, 100, '2s', 'ease-out'


Reset the scrubber back to its initial position and resize the space frame based on the computed width/height of the 1st panel.

This is helpful for responsive sites where the content in the panels might change.

The refresh method accepts no arguments.

$('#my-space-frame').spaceframe 'refresh'


Remove the scrubber, and show only the first panel content.

The destroy method accepts no arguments.

$('#my-space-frame').spaceframe 'destroy'


A full working demo is available at demo/index.html

Development & Testing


Use yuyi to install your dependencies

yuyi -m
bundle install
npm install
bower install

Run testem to watch for file changes, compile them, and run the tests.

Do NOT modify any files in the lib directory! Modify the files in the src directory and compile them into the lib directory. This will be done automatically if you are running testem.