Keyboard control for navigation?

(oliver lerone schultz) #1

this is maybe a stupid newbie question… forgive if so, as I am just new into Hype (or rather contemplating to use it more extensively)

there is one very simple thing I would need/want to make Hype my go-to-solution for everything outside of wordpress (and leave ReadyMag, which was my solution up to now, but has gone “beserk” on subscriptions):
I would need page/scene transitions to also work via keyboard navigation (esp. “left”/“right”).
I have seen some similar topics in the forums here; but to me they all seemed to be related to keyboard-navigation in the backend (for keyframes). I am looking for keyboard navigable scenes for users in the output.
– is that possible already? or, alternatively, how would I get there (I guess via javascript)?

thanks for any hints + help, and also helping me to jump into Hype more generally :slight_smile:


Hi oliver … stupid is as stupid does!

Anything “navigation” using the keyboard you would need to get your hands dirty with Javascript.

In the “Scene” panel within Hype there are some behaviours you can use. On Key Down is one of them (important if you want to use arrow keys). You would need to “Run Javascript…” as the action and choose a “new function…”. Once you are in the Javascript editing screen you will see some parameter that are available to you. “hypeDocument, element, event”. Event you would need to use like so:

if (event.keyCode === 37) { // the left arrow key
    hypeDocument.showSceneNamed('scene2', hypeDocument.kSceneTransitionCrossfade, 1.1)

(oliver lerone schultz) #3

hey Darren,

thanks a load! this is a very helpful pointer/way-in!
and I am assuming the “need to get your hands dirty with Javascript” is what will be the price to switch from a slick (but restrictive) consumer platform like ReadyMag to a blank-slate powerhorse like Hype.

so, this will be a good testing ground, whether I will be made for that. certainly now I know where to start looking into. thanks!


The “need to use Javascript” all depends on what you want to do within Hype. Most things can be done using Hype’s interface but for some projects the need to add a little Javascript (Hype has it’s own API that you can use) is a must.

It’s worth learning the basics of Javascript so you can interact with the API when needed.

The example above uses the API

hypeDocument.showSceneNamed .....

It’s possible that within the future of Hype there will be more functionality for people that don’t understand Javascript. i.e using the behaviours in Hype to do these sort of things. e.g

When using the dropdown under the “On Key Down” behaviour instead of “Run Javascript…” there might be an option to input the key you want to act on and then use “Jump to Scene”.

For now you have to use Javascript. :slight_smile:

(oliver lerone schultz) #5

thanks again Darren!

I guess this has two strands (but I have to grant I am also a newbie to the whole Hype “cultural approach”).

part is just me, and having to adjust to the consequences of getting into hype. :slight_smile: I feel ok with this transition asking me to bent forward and get to know javascript more. after all it´s the same with things like wordpress etc. if you really want to make use of what it offers, you have to learn to hack your way through html, css etc… after all it seems Hype also offers a lot of reward for that.

then, there might be another dimension involved. and this might also link up to some other strands of discussion I found in the forum, discussing how Hype lends itself to the development of full web-page projects (which is also a background/tendency implied in my inquiry here):
I would think from experience with other systems/frameworks/platforms etc. that having an easily navigable transition from one page (scene) to another is by now what defines a lot of tools for buiding sites with (full-)page navigation. in that respect most systems that adress this kind of websites/microsites etc (ReadyMag, Wordpress, Sliders of all kind, Klynt etc.) do have keyboard page-navigation built in (at least as an option not requiring coding).
that doesn´t neccessarily mean anything for Hype. but as you are talking about future-directions, and there are related discussions here on the forums, I wanted to highlight that page-navigation/scene-transition might certainly be a good candidate for thinking about…

so, thanks again for giving me some first orientation marks here!


not quite understanding here. Just to clarify, maybe, Hype does have scene transitions built in (which in turn can be used in a page like way). You can build a navigation easily by using button elements and choosing “jump to scene” on Mouse Click

Of course as mentioned above (wanting to do this with the keyboard) you have to use Javascript for the moment.

(oliver lerone schultz) #7

yes, it was not phrased very exactly :slight_smile:

I was referring to keyboard navigation as something to consider/highlight here

  • in relation to page-navigation/scene-transition
  • strictly in relation to the question of possible functionality “for people that don’t understand Javascript” (like me) and “the future of Hype”, as you said.
    I thought this might also feed into the discussion that seems to be especially concerned with the fitness of Hype for (micro-)site-building in other parts of this forum.

otherwise and for now, I will have to simply dive into Hype, and see how this can be achieved. and I am sure, I will have some learning to do, before re-surfacing with ‘smart proposals’ :wink:

(Jonathan Deutsch) #8

Just wanted to link to @DBear’s related post here:

(oliver lerone schultz) #9

thanks @jonathan + especially to @DBear for the constructive feed-forward of this question.
I would certainly be one of the delighted users, if this is implemented this way!