search

jmpressjs / jmpress.js

A jQuery plugin to build a website on the infinite canvas
http://jmpressjs.github.com/jmpress.js
1.5k stars 237 forks source link

Slide position offset? #132

Closed alejandroamoretti closed 10 years ago

alejandroamoretti commented 10 years ago

Is there any way to offset the position of the window with respect to the centerpoint of a step? In case that sounds utterly nonsensical here's a less succinct but (hopefully) more illustrative phrasing of my question: Can you designate a point on the "canvas" other than the center point of a given step that the "camera" will center on when that step is navigated to?

(And I'd be happy to explain why I'm trying to do this in case you're bewildered.)

Cheers, Alejandro

sokra commented 10 years ago

I think adding a padding to the jmpress element will offset the slide.

<div class="jmpress" style="padding-top: 40px"> <!-- offset y by 20px -->
  ...
</div>
alejandroamoretti commented 10 years ago

In the implementation of jmpress that I'm trying to work out, the "overview" step (in which you can see all of the other steps) serves as a kind of navigation menu. Each other step serves as a header for each "page" of the site (e.g. contact, about, etc.). When you click on a step, the "camera" should rotate/zoom/etc. in on it but then also pan down until the step's text is at the top of the window. From there, I'd implement some method for revealing the page content in a separate div or lightbox underneath the "header" (and potentially layered on top of other headers).

The problem with using padding is that the step's div grows with the padding which would, in some cases, lead to overlapping steps. It is also worth noting that this implementation uses click navigation only (no keys) so padding would also add unwanted click territory below the "header".

Hopefully that explanation isn't too abstruse. And I understand if this issue runs too far astray from jmpress's core functionality to merit further consideration. But if you have any ideas I'd greatly appreciate them.

Cheers, Alejandro

sokra commented 10 years ago

I added a parameter to configure the step center position...

$(...).jmpress({
  originY: "0%"
});

This should align the step with the top border of the page.

sokra commented 10 years ago

You need to build jmpress.js from source to use it. See http://jmpressjs.github.io/docs/contribute.html

alejandroamoretti commented 10 years ago

Thanks a million Sokra