I like letting my popovers stay open until the user explicitly closes them.
One of the nice features of the new Bootstrap Popovers is that they automatically re-position when the user changes device orientation, scroll or resize the window. They even follow along as the content re-flows - e.g. as a paragraph is wrapped and the element grows or shrinks in length while you resize the window - all the popovers on the screen will keep re-positioning to be near their target.
How does the Popover plugin know that the page is being re-flowed so that it triggers the popover re-positioning?
My webapp is dynamic, user actions cause elements to grow/shrink, toggle on/off, etc. At the moment, when I change the page via code, the popovers get left behind - they don't get re-positioned near their target.
One workaround to this, as a user, is to just scroll the screen a little bit and Bootstrap will re-position the popovers and everything looks right again.
I'm trying to figure out a way to re-position the popovers when I change the page layout via code.
Hence the question: how does Popover re-positioning work (and can I hook into it so I can trigger it automatically).
EDIT: I've just noticed that the popovers will re-position just fine if the "dynamic" content happens to be the Bootstrap navbar collapsing/expanding because of a tap on the navbar-toggler.
There's two parts to this question.
How does popper.js know when to update the popovers?
How does the popover change position?
Answering these backwards:
2: How does the popover change position?
You need the update method of the popover:
$('#element').popover('update')
I've done a quick demo here:
https://jsfiddle.net/pktyptyp/
First, click the green button to open the popover. Then use button 2 to move the popover toggle. Now the toggle and the popover no longer line up. So finally use button 3 to reposition the popover by its toggle.
The docs for this are tucked under the popover methods section here:
http://getbootstrap.com/docs/4.0/components/popovers/#methods
If you wanted to update every popover on your page and not just a specific one, then you could do:
$('[data-toggle="popover"]').popover('update')
How does popper.js know when to update the popovers?
Popper will be subscribing to events like window.scroll and window.resize. You can see this in a bit of their source code:
https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js
The update method won't be called immediately in that event handler - there'll be something that gets passed back to the Boostrap widget, which in turn will call the popover update method.
I am fairly sure Popper & the Popover widget will not be looking at the position of the individual toggles. This is partly because unless the toggles are positioned, their left/top properties will always be 'auto' so it will be hard to work out if they are moving. Or to put it another way, when the window scrolls, the toggle has not moved within the document, but the popover (which is absolutely positioned) needs updating. So this is a bit of a broad brush - they are looking out for the entire window changing, assuming the popovers are out of position, then triggering more events to update them.
If anyone knows more about this, though, please tell me in the comments!
You have a bit of an advantage in that you know when you change your UI, so you can call 'update' on all the Popovers at will. This to me seems like the ideal approach.
However, if your toggles are absolutely positioned, you could do this a bit more automatically by watching their position. Here's an example with an absolutely-positioned toggle and in this example, the popover moves automatically without the third button click.
https://jsfiddle.net/pktyptyp/1/
I don't know how the logic work behind that because on Bootstrap we use Popper.js to handle that so if you want to understand the logic behind that you can browser this : https://github.com/FezVrasta/popper.js
Related
I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...
To view web:
Click Here
if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...
Thank You!
You want to listen for window scroll events and check to see if the main button is visible. You can do this by checking it's position inside the window using Element.getBoundingClientRect();
The bottom property tells you how many pixels the bottom of the element is from the top of the screen. If the number is below zero, it means the bottom of the element is off the top of the screen.
At that point, just toggle the hidden button into view. In my demo, I did this by adding a CSS class to that button.
If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.
JS Fiddle Demo Here
Using scroll event with getBoundingClientRect may decrease performance
You can use intersection observer for checking an element enter in viewport
https://developers.google.com/web/updates/2016/04/intersectionobserver
Ionic Version: 1.x
Platform: all
I have an ionic app which uses an ionic popover. However, when the popover is active (open), I can no longer interact with things in the background, for example scroll down my list of items. I have tried looking for existing answers for this question, but did not see the question being asked.
The popover itself does not have to be bound to any active element on the page, since it currently has position:fixed and will always appear in the same position.
So basically the question is, is there a way to prevent the popover from preventing me interacting with everything in the background?
I found this codepen someone put up:
https://codepen.io/ionic/pen/GpCst
This may do the trick?
.popover-backdrop {
display:none;
}
I have found an answer, however, not sure if there is a better way to do this, perhaps an option that turns interacting with the background on and off, but for now the answer seems to be as follows:
Ensure the .popover-backdrop class is the same size and position (height and top margin in my case) as the actual fixed popover element. The default is height 100%.
Ensure that for the .popover-open class (applied to the body) you disable pointer-events: none;
Keep in mind that this will change the behaviour where if you click outside of the popover that it will close it by default. So in ionic, I will have to make sure that on the event where I leave the view that closes the popup if active.
I've got a page using Cycle2 to run a slideshow with a hide show element to it.
It's all working great, except when I expand the slide and close it again, the height goes off. If I slightly resize the window, this will trigger the recalculation and then the space from the height gets put back right.
I'm using
data-cycle-auto-height="container"
I basically just need to trigger this action that happens on a resize.
Any tips?
The cheat way to do it would be to assign a listener to your plugin's open/close events that triggers a window resize.
$(window).on('your_event_name', function() {
$(this).resize();
});
If you've got the time though, you should dig in a little deeper and figure out what's actually happening. Ideally, your plugin would handle this stuff on it's own.
I'm trying to put a custom dropdown into a div that I use as a jquery UI modal. The problem is that when the dropdown is revealed, it appears inside the modal—overflowing the modals height, giving the modal a scrollbar and not showing the entire contents of the dropdown as I would expect (with the z-index set to a very high number) outside the modal.
It will make more sense when you see it: I've made a simplified ugly version at JSBIN. Why is the z-index no good here? Thanks!
I am using jQuery Isotope for my personal website:
http://www.ryanpays.com
The issues i am facing are when a user clicks either 'Websites' or 'HTML-Email' after the page has loaded there is no animation of the project thumbnails when filtering. However, they do animate when either link is clicked again.
Also i would like to preserve the layout of the 'Clients and projects' section after the animation. It seems to break onto a new row/s when there should be enough room for the last child to be positioned on the first row. When 'show all' is clicked it does not return to the original layout either. I am unsure if there is something i need to do in the CSS to achieve this or maybe re-structure my HTML.
Update
I have worked around this issue by initialising isotope on page load and then again on click. Doesn't look right in IE6 (can live with that for now) and is not really the functionality i would ideally like to achieve.
You need to set your #UL to #UL.isotope because it is adding that class on click, and it needs to already be applied for the css3 animations to work. Just had this issue today, www.mactyler.net you can see it working.