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
Related
I have some code using jQuery's scrollTop(0) method which is not working correctly on Chrome (Version 56.0.2924.87).
My code sets a 2 second timeout which does the following:
Scrolls to the top of the screen.
Un-hides a div which has 100% width and height and requests the user to complete some action.
Appends a class to the html tag which sets overflow: hidden.
Once users completes the action it will remove the class and hide the div so they can continue scrolling.
This is working relibaly on Firefox.
On Chrome, if the 2 second timeout executes while the user is not scrolling, then it works as expected. However, if the 2 second timeout is called while the user is in the middle of scrolling, it seems to freeze.
I have created this Plunker containing all the code. The issue does not occur if you test within the in-line demo window, you need to click on the Preview in a Separate Window (blue button top right inside the code demo).
In my demo, this is what happens if the timeout runs while I am not actively scrolling:
And this is what happens if the timeout is executed while I am scrolling down (mid-scroll):
How can I make this work reliably on Chrome even if the user is currently scrolling on the page?
Why you can not see the div when is display. When the event is called in the middle of the scrolling the scroll bar hidden and the div apper at the top of your page, but your viewport is not at the top position. If you set the div CSS position property to fixed it will work, css position. the fixed value of the position property is relative to the viewport.
So the problem is not on your jquery code.
code here
plunker
And check this:
Scrolls to the top of the screen.
Once users complete the action it will remove the class and hide the div so they can continue scrolling.
I think it will be best if they can continue at the position the wear before.
What about if you add stop(). before the .scrollTop(0)?
$('html,body,document').stop().scrollTop(0);
I am not an expert, but may be worth a shot.
Hope it helps.
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.
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.
jQuery/javascript/css
Specifically, I'm working on some code that triggers changes when certain divs hits the window top.
I have 3 divs set that way. And the first two act as expected.
But for some reason, the 3rd div causes the window to instantly jump back up to wherever it was when I began my last scrolling action. i.e. I click the scroll bar and start dragging down, and when I hit the div, boom, the window is back to where it was when I clicked.
Is there any way I can track the code to get exactly what events are being executed? Is there an easier way than sprinkling console.log() all over my code and praying?
I wish I could step through the code at that point to see each change in state including DOM.
I've got a JQueryMobile site, and I want to place a div at the top, that isn't visible on the first page load, but only when the user scrolls up. It's meant to emulate a pull-to-refresh. Basically like what these guys did, using this Javascript. This isn't a pull-to-refresh, but they're doing what I want to, which is 'hiding' a div above the initial view.
Unfortunately, JQueryMobile waits until the site is fully loaded, then automatically scrolls all the way back up to the top. So even though I can scroll the page down immediately, a few seconds later (random time), it'll scroll back up.
Is there any way to either stop the scrolling-back-up of JQueryMobile, or to create this div using HTML/CSS?
You can set display:none on your header so it isn't visible, then show it and scroll at the same time. See http://jsfiddle.net/Lanny/CDhmr/1/. Even if there's a significant delay between your page being rendered and your javascript executing scroll will happen at the same time that you extend the document.
It seems that $.mobile.defaultHomeScroll might help here.
Haven't used JQueryMobile, but noticed this pull request on GitHub:
https://github.com/jquery/jquery-mobile/pull/5751