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.
Related
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
Here is my scenario I have a web page which will navigate through using mousewheel and scrollbar. I have fixed the mousewheel problem.... But the problem where I use the scrollbar it will navigate to the end or go to the first it depending on the scrollbar you pressed up or down.
I know the error is $(window).scroll(function) here due I navigate from Div 1 to Div 2 which will fire the event a lot of times when the scroll bar moving.
Here is my fiddle
The problem is where i when i scroll using the bar beside down or up. It will trigger until the end of my onscroll event.
Is it possible when i press the scrollbar once only trigger once ?
An alternative way i know is hide the scrollbar and design a fixed position button up and down will resolve this problem but is it possible to do this with default scrollbar/overflow ?
Tried your fiddle. When using mouse wheel, it kept pending between headers 4 and 3 after I reached the 4th one. When I removed the $(window).scroll() function, it worked perfectly, both down and up.
The scrollbar, however, is quite a complicated issue - when you click/tap and drag, you simply can't "steal" the scrollbar from your pointer/finger - the user keeps dragging, yet you're trying to reposition the scrollbar/content forcibly. I don't think this is a good idea (from the UX point of view).
Not sure if it fits your requirements but in case I'd want to fully control the content, I'd completely remove the scrollbar in CSS and then use the mousewheel or swipe functions to control it.
I'm using a PolyCalc to polyfill CSS calc(). I need to run it whenever window size changes, but resize event seems not to be fired when scrollbars appear. And scrollbars appear with some delay on my page as some of the content is loaded from a server.
I guess I have to answer my own question. Thanks to #Tricky12 I know it is not likely that there is more elegant solution then checking for resize at some interval.
Anyway I found a jQuery resize plugin that does that and allows to check for resize on any element and also replaces default $(window).resize which then reacts on scrollbars.
I'm trying to affix a toolbar when the user scrolls passed it. The affix portion works fine however I want to adjust the padding on my main container when the affix class actually get applied. http://getbootstrap.com/javascript/#affix-usage Has some events listed However; I can't get any of them to fire. The JSfiddle doesn't look right I'm guessing cuz of the size. But essentially none of those events get fired when the affix is applied to the #nav.
$('#nav').on('affix.bs.affix', function () {
alert('Fired!');
});
You can see more of my code here.. Its essentially just the navbar given in the BS example.
http://jsfiddle.net/dTR4A/1/
The affix.bs.affix event fires when the affixed element is scrolled so if you scroll the page:
This event fires immediately before the element has been affixed.
so make your page content higher.
Demo: http://jsfiddle.net/4vmMd/
Encountered a similar problem..
Turns out that it was older version of bootstrap. It worked just fine with newer version.
Also ensure that your content has enough height.
For future travelers falling into this issue, I was having the same issue but the above solutions did not work for me.
I found out that in a completely remote part of my application, we have:
$(window).unbind('scroll')
$(window).off('scroll')
Which was killing the handler for the scroll event (probably, the Affix library observes the $(window) element in order to fire the scrolling events).
Hope this helps.
I have a Fancybox dialog that loads AJAX content. The user can click a "+" to add a row inside. As the rows add up, the dialog becomes higher than the screen size. A scrollbar appears, but the dialog can't be scrolled down, it keeps going back up.
How do I fix this?
Sorry guys, my bad. For future reference, here's the fix.
Never try to dynamically update and reposition your Fancybox.
What I tried
$('#stuff').fancybox({
... stuff
onUpdate: function() {
$.fancybox.update();
$.fancybox.reposition();
}
});
Ultimately, on every update, the Fancybox should center itself and reposition itself.
However! In reality it attempts to do this every few milliseconds. That causes Chrome's inspector to freeze whenever the Fancybox is active and also causes the scrolling to fail (it keeps trying to update the size/position while you're trying to scroll it causing a fail).
The correct way
Update every time you expect your size to change manually.
When changing the dialog content (if it's an AJAX)
When showing inside-errors or adding new divs inside
etc