We Keep Coding

Auto-Scroll Fast in JS

I have a HTML which is very long. I would like to auto-scroll the content on load. My requirements are:
Go to top when page opened.
Scroll to the utmost bottom.
Here's what I tried:
function pageScroll() {
window.scrollBy(0,7000);
scrolldelay = setTimeout('pageScroll()',1000);
}
This works well but I want it to be faster and also I would like a replacement of 7000.

These are the values which should work best in my opinion
function pageScroll() {
window.scrollBy(0, 3060) //don't set a timeout function
}
pageScroll()

Bootstrap tooltip gets stuck if element changes when visible

I am using Bootstrap 5.1.3 (in Rails). Our application consists of dynamically loaded data, that is not always the fastest to load (some complicated SQL queries / huge amounts of data to make calculations with).
We use tooltips on different elements to show extra information / indicate (click)actions. Tooltips are added like this.
On the element that should get the tooltip:
data-bs-toggle="tooltip" data-bs-placement="top" title={question.questionDescription}
In that Bootstrap file:
componentDidUpdate(previousProps, previousState)
{
// Enable all tooltips.
TooltipHelper.enableTooltips([].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')));
}
And then TooltipHelper:
static enableTooltips(targets)
{
var enabledTooltips = targets.map(function (target) {
return new bootstrap.Tooltip(target, { trigger: 'hover' });
});
}
The tooltips work, but don't always go away. My guess is that when a tooltip is shown (because hovering over something) and then that element (or a parent of that element) gets changed, for example the content of it, the tooltip stays there. No matter if I click somewhere of hover over other elements.
I've tried adding a delay within the enableTooltips()-function. This seems to work, but the needed delay is too big. Also, it still breaks when elements are dynamically added and content is loaded, when the page isn't reloaded.
My hacky solution:
static enableTooltips(targets)
{
setTimeout(function() {
var enabledTooltips = targets.map(function (target) {
return new bootstrap.Tooltip(target, { trigger: 'hover' });
});
}, 5000);
}
Anyone know of a solution? Thanks

$ionicScrollDelegate resize without using $watch

I am building an app in Ionic, and there are certain functions that load new sets of data into an existing view.
When I do this, sometimes if I have scrolled down, and the new data takes less space than the previous one, I am left with a blank screen until I scroll back up to where the new data is.
To prevent this, I am running an $ionicScrollDelegate.resize(); which works, but it doesn't refresh. If I swipe (to reload data) twice, it resizes the view and bumps the scroll up if necessary, however if I do it just once, the scroll resizes, however does not bring the user up automatically. They have to start scrolling first, then it snaps them back to a scroll area that actually has data present.
I managed to solve this by using a watch:
$scope.$watch(function(scope) { return scope.projects },
function() {
$ionicScrollDelegate.$getByHandle('taskScroll').resize();
}
);
But I do not want to use a $watch for performance reasons. I've tried using various methods to get this resize to work from the event that calls the data to be reloaded, including $apply, $evalAsync, $timeout...
None of them worked, except $timeout, but then only when the interval was 500ms. This tells me it is an issue with the speed at which the data is loading and that is why $watch worked cause it keeps looking.
Is there anything else I can do to make the resize work immediately? This is the code for the event handler function:
$scope.onSwipeRight = function () {
var operatingDate = appContextService.getOperatingDate()
.subtract(1,'days')
.startOf('day');
var pastDate = moment().subtract(1,'years')
.startOf('year')
.startOf('isoWeek');
if (isSwipeEnabled && operatingDate.isAfter(pastDate)) {
slideInCacheValidation(-1);
}
// Just one attempt at fixing this below, I've tried so many things that do not work...
$scope.$eval( function() {
$ionicScrollDelegate.$getByHandle('taskScroll').resize();
});
};

ExtJs grid.Panel store: keep scrollbar position after load/reload

I'm using grid.Panel in Sencha ExtJs 4.0.2a and I reload a Json Store every 60 seconds.
I was wondering if there is a way to preserve the position of the scrollbar after a data load.
So that the user can continue to look at the records he was looking before the load..
I reload the data in the grid using a Task:
var task = {
run: function(){
Ext.getCmp(panelGridId).getStore().load({
//Callback function after loaded records
callback: function(records) {
//Hide grid if empty records
if (Ext.isEmpty(records)) {
Ext.getCmp(panelGridId).setVisible(false);
}
else {
if (Ext.getCmp(panelGridId).isHidden()) {
Ext.getCmp(panelGridId).setVisible(true);
Ext.getCmp(panelGridId).doComponentLayout();
}
}
}
});
},
interval: 60000 //60 seconds
};
Ext.TaskManager.start(task);
After the data load the scrollbar position is reset to the top..
Q: Is there a way to maintain the scrollbar position after the data load?
Thanks in advance!

Try this bad boy to preserve scroll position on refresh:
http://docs-devel.sencha.com/extjs/4.2.1/#!/api/Ext.grid.View-cfg-preserveScrollOnRefresh
This works for me on my tree view.
viewConfig: {
preserveScrollOnRefresh: true
}

Here's how you would use preserveScrollOnRefresh in your Grid :
Ext.define('js.grid.MyGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
preserveScrollOnRefresh: true
}
Here's a JSFiddle which demonstrates this :
http://jsfiddle.net/cdbm6r0o/7/
However when you select a row it doesn't seem to work quite right. I am not sure if this is a bug.
The 'refresh' event is triggered from this code :
grid.store.loadData(dataToLoad);
I'm unaware of any other events which trigger a 'refresh'
Additional Notes :
I had the Ext.toolbar.Paging as a require. Even though I didn't use it, it screwed up the scroll preserve when I had one or more rows selected, so make sure you remove the Paging from your requires.
The scroll preserve does not appear to work if I use the bufferedrenderer plugin on the table at the same time.
tablePanel.getView().focusRow(recrow) is also interesting to look at, but also does not work with bufferedrenderer.

You can use the preserveScrollOnReload view config property:
viewConfig: {
preserveScrollOnReload: true
},

cannot get jscrollpane api for dynamic size to work

I have been experimenting with jscrollpane to add custom scrollbars to some content. The data is being pulled in via ajax and the jscrollpane api works nicely for that.
But I'm trying to make the scrollpane have a height that is always, say, 70% of the height of the users browser window. The jscrollpane site says that I can use the following code to make it work, but i'm having no luck.
$(function () {
$('.scroll-pane').each(
function () {
$(this).jScrollPane({
showArrows: $(this).is('.arrow')
});
var api = $(this).data('jsp');
var throttleTimeout;
$(window).bind('resize', function () {
if ($.browser.msie) {
// IE fires multiple resize events while you are dragging the browser window which
// causes it to crash if you try to update the scrollpane on every one. So we need
// to throttle it to fire a maximum of once every 50 milliseconds...
if (!throttleTimeout) {
throttleTimeout = setTimeout(
function () {
api.reinitialise();
throttleTimeout = null;
}, 50);
}
} else {
api.reinitialise();
}
});
})
});
When I change the css to a percentage, the custom scrollbar fails entirely, and I get a default chrome scrollbar that is 100% of the height of the window.
http://jsfiddle.net/loren_hibbard/2yEsG/
Thank you very much!

It appears that there is some compatibility problem with the api for resize and jsfiddle. jscrollpane continues to be an amazing extension. thanks.