Here's a doozy. I have a TableView with programmatically added custom TableViewRows. They are custom in that they have a left-aligned label and a right-aligned switch (think of it as a browse filter). I inserted the same type of row at the top to programmatically toggle all switches on/off.
All of this works as intended EXCEPT when I have more rows than can fit on the screen and attempt to toggle all. In this case, the custom row switches off-screen haven't rendered when the view loaded and therefore don't fire their changed event when handled programmatically.
If I manually scroll to the bottom to force render all rows then attempt to toggle all, it works just fine.
Is there a way to force all TableView rows (even those off screen) to render when the view loads? Or is there a workaround that I can live with?
Here is my current workaround. In the window OnOpen event, I call my function to initialize table data. This is important because this makes sure the first load works.
Then I force scrollToIndex to the last row then immediately scrollToIndex back to the first row. Since I do this right after adding rows, I need to do use setTimeout to make sure it covers load time.
setTimeout(function() {
$.tblOptions.scrollToIndex(lastIndex, { animated: false, position: Titanium.UI.iPhone.TableViewScrollPosition.BOTTOM });
}, 0);
Since this creates a jumpy user experience, I hide the table during load, show an activity indicator, then re-show table after load.
This will work for now but I'm still wondering if there is a simpler solution.
Related
I'm using Tabulator to display a table and clicking on the row displays a popup. The popup appears next to where the mouse is, but will sometimes break the popup window if the contents are too large. Occasionally the popup will display on the top left of the table and just have most of the content hidden. Even using popupContainer:true will cause this behavior.
I am looking for a way to have the popup have a static location a few pixels to the right of where the click event happened. That way it will always display to the right. I can change the position of the tabulator-popup element, but it will not be inside the tabulator-popup-container. If I change both elements, the dropdowns used in the header filters become offset as well.
Is there a way to adjust the position of both tabulator-popup and tabulator-popup-container without having to create a separate module or class for header filters and row click popups?
I have a navigation bar which becomes hidden when the user scrolls down and is shown when the user scrolls up. Similar behavior is implemented in the Headroom.js library. The logic of hiding and showing is called on the scroll event.
I also have a large table where I prepend some rows from time to time. I want this table to keep the user's view position even when the new rows are added. This is implemented as proposed in this answer.
The problem is that when I prepend some rows, scroll position changes (It is changed via setting scrollTop property to keep scrolling position unchanged) and the navigation bar is hidden. I want to hide the navigation bar only if scrolling is initiated by the user, not by the software.
Can I prevent firing scroll event when changing scrollTop property? How can I combine this two techniques - adaptive navigation bar and table which holds its viewport unchanged when the data is added?
If there is no easy way of controlling the default scroll functionality. Then You can apply condition using custom flag, when to trigger scrolling event and when to prevent it.
Check this thread for further understanding. https://stackoverflow.com/a/12763950/10664244
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
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
In my project I have a long scrolling page that has a project grid. when you click on a project, I ajax load that project, then slide open a window pushing the project grid down, displaying the chosen project. Each projects will have different heights based on the content. I need the content that shows below the project grid to always show at the end of the page. Currently when the grid slides open it slides right over the "footer" content (rough example at the bottom).
The skrollr documentation says that if the window resizes, you should call the refresh function.
I run this function on init, on project grid click, and I don't see the window adjusting to the new height of the content. The goal is to have the footer appear always a couple hundred pixels after the project grid whatever it's current height/position.
http://caava.elusiveform.com/example.html
I don't think this is related to skrollr. If you want the footer to appear after the content, then make sure it's there in the document flow. You are using position:fixed and mix it with other stuff. I recommend to first create the page without skrollr and then add animations using relative mode. The skrollr.css file you are using is outdated, it doesn't exist any more.
After you made sure the footer is correctly placed, then you can call refresh to make your animations work (they depend on data-end, which changes and needs to be recalculated). In your case, that would probably be enough:
s.refresh(document.getElementById('footer'));
Btw, the skrollr documentation says
Window resizing is handled by skrollr.
refresh is only needed when you change the DOM and skrollr can't detect that.