Try our conversational search powered by Generative AI!

menu using vertical scrolling in edit mode

Vote:
 

Hi,

I encountered an issue while working on a page that uses a fixed navigation menu, where each link in the menu, scrolls the page down to a specific section.

The menu navigation works just fine in standalone mode, but it doesn't work at all when the page is in edit mode (the page doesn't scroll to the desired section.

I found that, in edit mode, the page is rendered inside an iframe that has the height set to the entire content (in my case about 5700px), and that the scrollbars are on a div marked as a 'preview container'.

I ended up attaching my own scroll event to the preview container, using jquery, and moving the content and the navigation bar, basically simulating the 'scroll' event inside my page.

Is there a better way of accomplishing this without me sort of 'hacking' my way to EPiServer divs?

Thanks

#119617
Mar 31, 2015 16:09
Vote:
 

Stop building one-page websites ;) /Grumpy old man

I think you solved it in the best way possible.

#119624
Mar 31, 2015 18:40
Vote:
 

Hi, Cristi (and Johan as well :)),

My approach in these kind of situations (or similar editorial issues) is a bit simpler.

For me, edit mode is meant for a nice editorial experience and a clear way to find where you can edit what. Of course, it's always nice to see the results of your work in a way they look in view mode and in your case, you probably needed to enable the scroll to make sure editors actually do see it.

However, for example, we don't show flyout menus in edit mode (since they overlap with edit-on-page that has large z-index), but also it doesn't make sense to make it extra dynamic with flyouts or animations, when you want to lead editor to the parent page where all of the content for the flyout is.

While I don't have a specific advice for your case, these are my two cents on the edit-mode approach.

BR,

Marija

#119683
Apr 01, 2015 15:08
Vote:
 

Hi,

Thank you both for your input.

I just started working with EPiServer and I thought that I missed something easy, like a magical checkbox :)

#119725
Apr 02, 2015 10:26
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.