Horizontal Navigation

[Gino]

I want to create something like youtube.tv
In the youtube app, in horizontal navigation, the active element alway stay on left or "Almost" in the middle of the window. How can we recreate this?
https://www.youtube.com/tv

[Luke Chang]

Although I never tried it, I think it can be done by doing something similar to demo 3.1. For example:

elements.addEventListener('sn:willfocus', function(evt) {
  // prevent the element from getting focus. We'll focus it manually after the animation is done.
  evt.preventDefault();

  // pause it so there won't be accidental moves during the animation.
  SpatialNavigation.pause();

  // do the animation and manully move the element to the middle.
  moveElementToMiddle(this, function callback() {
    // focus the element manually.
    SpatialNavigation.focus(this);

    // resume everything.
    SpatialNavigation.resume();
  });
});

[Gino]

Hi, i'm right now working on a first try without js spacial navigation.
i'm just trying to create a jQuery plugin to center clicked element.
in the next few hours i will try to make it work as a utile plugin for spacial navigation.
http://jsfiddle.net/onigetoc/6bfuspkq/
I want to make it work with only adding class to the container like .overflowX or overflowY
It will be easier if ja spatial navigation added class to the focused or active element

[Luke Chang]

It will be easier if ja spatial navigation added class to the focused or active element

Usually the :focus CSS pseudo-class works for me. Or sn:focused and sn:unfocused events may help to set your own classes.

[cap0581]

Hello,
I believe I am trying to accomplish a similar goal. I have the Spatial Navigation working on a horizontal list of items. However, when I navigate to items off the screen, the menu jumps to the item that is off screen and I want something alittle more refined similar to your example, 2.1_multiple_sections, except horizontal instead of vertical. When the user navigates to the items outside of view the menu slides up instead of jumping to items in the overflow. Is it possible to get the same interaction to work horizontally. Here is a link to the working projects. https://chriss-fantastic-project-ebe2fa.webflow.io/activities-balance-ws-copy