Winjs: A flyout inside a flipview does not stay active - winjs

I made a flipview to navigate between pages, so I have a main page that contains the flipview and many other pages that I reference in the flipview so I can navigate between them.
Now I put a very simple flyout in one of the sub-pages and it doesnøt matter how simple it is or where
I put it, it just doesn't stay open. It closes as soon as I click on it (and not only outside of it as it should be).
If I try and put the flyout in the main page instead it works.
Is there any problem with having a flyout inside a flipview?

Most likely this is because your flyout is not a child of the body. According to the documentation http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br211726.aspx "You should add the flyout as a direct child of the body element."

Related

How to implement scroll to a section/fragment on click in Liferay?

I want to implement scrolling to a particular section on click in Liferay, but I have no idea how to add functionalities in Liferay.
I have created a page using multiple fragments and in the top of the page I have headers of the sections and on click of a header the page should be scrolled to that particular section.
Attached page screenshot link below for reference
The easiest way to scroll to some place on the page is to place an anchor there, e.g. with <a name="scrollTarget"/>. In your navigation, you'll just link to this by Scroll to Target and you're set.
Of course, this can be done a lot fancier, with an animated scroll etc, but the basic start is this. There's nothing Liferay-specific hidden here - pick any of the more fancy methods, create fragments with the proper markup, and make sure they're used on your page.

How can I get this slide out nav menu working with react-router and framer-motion?

The animation when tapping the hamburger menu is working perfectly (though the css positioning is off, and needs to be fixed). But when the user taps one of the links in the nav (whether it is a new page or the page they are on), I want the animation in reverse (with either the current page or the new page, depending upon which link they press)
Code in CodeSandbox
Any ideas on the one, or probably many things I am doing wrong?

Is it possible to animate extension popup opening?

I developed a simple chrome extension. Following the answers in this SO post I was able to programmatically open the popup window on certain webpages. The default behavior of the popup is to open a window at the top right. Is it possible to modify this behavior? Ideally, I would like the popup window to slide in from the right after the automatic window.open is invoked in the background script.
No, you have no control over how and where it appears.
If you want something like slide-in, you're better off injecting your GUI elements into the page itself.
How feasible it is depends on whether you need to inject it into an arbitrary page or if you're working with just one specific website. Shadow DOM might help you isolate styles from the parent page.

SharePoint 2007 navigation and removing its delay

In SharePoint 2007, there's a top nav that the user can hover over, which reveals a dropdown menu of subitems. When they remove their mouse from the dropdown, it disappears, but only after a short delay. This can cause problems, as if people are trying to click a link on the page somewhere, but the nav menu hasn't hidden itself yet, they'll accidentally click it instead. This is compounded with the fact that the menu appearing in the first place is delayed as well, so right before they mouse over the link on the page they actually want to click, the menu will suddenly appear and intercept their click when they weren't meaning to.
I've poked at core.js at some suspect areas, but can't seem to nail it down. Any thoughts?
This is the normal behaviour of SharePoint. This control is the asp:Menu control of ASP.Net 2.0 and the only thing you can do is customized the MasterPage or the DefaultPage of your Site.
If you change the core.js file of "layouts" folder you'll lose Microsoft support, so take care about change any of the file from this folder.
I recommend that you modify the existent control or create a new one and put it in this position of the MasterPage.
This bit of CSS will fix it. I just had the same thing in sharepoint 2010 and this was all that was required to make the list disappear as soon as you roll off:
li.hover-off>ul
{
display:none;
}
The way it works is when you hover over an item in the nav it adds a css class called "hover" and as soon as your mouse leaves the area it changes the class to "hover-off" for 1 second before removing it completely. This CSS will hide the unordered list directly below the list item that has the class "hover-off" thus hiding the flyout as soon as your mouse leaves the parent.

ModalPopupExtender adding scrollbars in SharePoint

Whenever I show a ModalPopupExtender on my Sharepoint site, the popup shown creates both horizontal and vertical scrollbars. If you scroll all the way to the end of the page, the scrollbar refreshes, and there is more page to scroll through. Basically, I think the popup is setting its bounds beyond the end of the page. Has anyone run into this? Searching Google, it seems this may be a known problem, but I haven't found a good solution that doesn't include recompiling AJAX, which my boss will not allow.
Hacky answer would be to grab the IE Developer Toolbar, find the tag that has the scrollbar, and alter your CSS file to add the overflow:hidden property to it.
I assume the TargetControl is of sufficient size to hold everything you put in it? If so, try:
Set CSS overflow:hidden;
If the target control is a Panel, set scrollbars="none". Otherwise, put it in a panel and try it.

Resources