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?
Stop building one-page websites ;) /Grumpy old man
I think you solved it in the best way possible.
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.
Thank you both for your input.
I just started working with EPiServer and I thought that I missed something easy, like a magical checkbox :)