using xterm 3.14.4 for Reactjs. Writing many text chunks to terminal. When a chunk is written, the terminal always scrolls down displaying lastly written lines.
What I need to do is, optionally freeze the terminal scroll. i.e., text chunks will still be written to terminal, but not automatically scroll down. User is supposed to scroll manually.
I tried to handle this using onScroll event like this;
myterminal.onScroll(function (e: any) {
return 0;
});
or,
myterminal.onScroll(function (e: any) {
return false;
});
Unfortunately no luck. How can I stop this auto scroll and start it again if needed?
Thanx
You can try set
term.setOption('disableStdin', false)
but you need emulate Stdin in your code.
Related
In Vaadin 12, I have created a button which, when clicked, sets the split layout position to some non-zero, non-100 value, as shown below:
btnHelp.addClickListener(event -> {
log.info("info pressed");
MainApp.sp.setSplitterPosition(80);
MainApp.iFrameHelp = new Html( "<iframe src=\"https://docs.readthedocs.io/en/latest/intro/getting-started-with-sphinx.html/intro/getting-started-with-sphinx.html\"></iframe>");
//btnHelp.setIcon(new Icon(VaadinIcon.INFO_CIRCLE));
});
This works great. However, if I pretend to be a user and, via the Chrome browser, I adjust the split layout (by dragging the vertical layout) such that I "close" (or just reduce the size of) the second vertical "panel", and THEN I click on the button again, it does NOT seem to obey the command to reset the splitter position to 80. It only seems to obey the command on the first call. Is this a bug? If so, is there a workaround? (Or, should I do this differently?)
This is a side effect of https://github.com/vaadin/vaadin-split-layout-flow/issues/50. What happens is basically that the server-side still believes that the split position is set to 80 which makes it ignore the setSplitterPosition(80) call.
You can work around this by using low-level APIs to set the position in a way that bypasses the server's dirty checking logic:
MainApp.sp.getPrimaryComponent().getElement().executeJavaScript(
"this.style.flexBasis='80%'");
MainApp.sp.getSecondaryComponent().getElement().executeJavaScript(
"this.style.flexBasis='20%'");
So I have a multi-line TextView on my C# Android application. I'm using this as a kind of "status" logger..
So, I might have things like this:
Probing widgets
Proper widget found
Configuring widget
Where each line might take a few seconds to appear because it's something relatively slow.
So, I have a TextView inside of a ScrollView like so:
<ScrollView
p1:minWidth="100px"
p1:minHeight="100px"
p1:layout_width="fill_parent"
p1:layout_height="match_parent"
p1:id="#+id/scrollView1">
<TextView
p1:id="#+id/terminalOutput"
p1:layout_width="fill_parent"
p1:layout_height="fill_parent" />
</ScrollView>
This works fine and I can just append to the TextView using the .Append method. However, the problem is that eventually there are so many status messages that the text goes down and off the screen. At this point, you have to manually drag in the scroll view to read the latest status messages.
I want it so that whenever a piece of text is appended and it goes off screen for it to scroll the scrollview down so that users can read the latest message without manual scrolling.
How can I do this?
This is what I've tried so far:
Logger = new TextLogger((s) =>
{
RunOnUiThread(() =>
{
var textview=FindViewById<TextView>(Resource.Id.terminalOutput);
textview.Append(s + "\n");
var scrollview=FindViewById<ScrollView>(Resource.Id.scrollView1);
scrollview.ScrollTo(0,scrollview.Bottom);
textview.ScrollTo(0, textview.Bottom);
});
});
This kind of works, but it seems like it never quite scrolls to the actual bottom. It scrolls down, but is always like 2 lines away from the bottom, leaving some text still hidden
Try using ScrollView.FullScroll method instead:
scrollview.FullScroll(Android.Views.FocusSearchDirection.Down)
Today I'm facing "a typical" problem on iOS with a page scrolling when a user selects an input text. The point is that I'm using a scrollable page including a lot of texts and I need this. So I can't use a solution that disables scolling by preventing default, minimizing the view etc..
I basically need to open a software keyboard without scrolling the page.
I also need to find a solution that will be suitable for my users - no screen blinking, etc... After some research I finally managed to find a working solution.
Please see my answer below.
The idea is to return the page to its original position as soon as possible and thus prevent the iOS scrolling animation.
You simply add a focus handler to your input text field and in this handler you firstly read the window.scrollTop property and than set it back with a delay of 0 ms.
Here is my code (using jQuery):
$("#myinput").on("focus", function() {
var scrollTop = $(window).scrollTop();
setTimeout(function() {
$(window).scrollTop = scrollTop;
}, 0);
});
I hope there is no bug in this - actually I'm using TypeScript so if you want to see my original code here it is:
this._inputText.on("focus", () => {
var jQueryWin:JQuery = <JQuery>$(window);
var scrollTop:number = jQueryWin.scrollTop();
setTimeout(() => {
jQueryWin.scrollTop(scrollTop);
}, 0);
});
OK - I hope this helps you guys to better control an unwanted page scrolling when dealing with input elements.
I need to keep the scroll offset of an element in sync with another (the window actually) and I'm having trouble doing so during the inertial "roll off" phase of scrolling on Mobile Safari (iPad).
I have a couple of divs with position:fixed; overflow:hidden and I need to keep their scroll offset in sync with the window's one (meaning the entire body scroll.) Usually I'd code it like this (jQuery):
var $win = $(window),
$div1 = $(...)
$win.scroll(function() {
$div1.scrollTop($win.scrollTop())
})
But testing the interface on an iPad, I noticed that the div was not being updated neither during the touch phase, when you are dragging the virtual page with your finger, nor during the inertial phase, when you let go and the page slows down to a stop.
I solved it for the dragging phase by registering the handler for the touchmove event as well as the scroll one.
But I can't find a way to solve the problem for the inertial phase. The div stays still (and goes slowly out of sync with the rest of the page) until the inertial movement comes to a full stop, when the scroll event is finally fired and it skips into position.
Here's a working demo.
Try to scroll it on an iPad to see the "inertial scolling" problem. Unfortunately I couldn't get it to work on jsFiddle, due to the iPad's weird behaviour with iframe scrolling.
If I could just run a polling during that phase, I could keep a semblance of synchronization between the two elements. I've tried with setTimeout, setInterval, and requestAnimationFrame, but neither of them fires during the inertial scrolling phase. It seems like all Javascript stops during that phase.
Questions:
Is there any touch or scroll event fired during the inertial scrolling phase?
Is there any way to run a Javascript callback during that phase?
Is there a way to sync the scroll offset of two elements (either X or Y, not both) using CSS or some other technology other than JS?
OldDrunkenSailor beat me to suggesting iScroll.
Unfortunately, out of the box iScroll just replicates the same problem as native inertial scrolling -- there's no event handling during the inertial phase.
Here's a version of your demo with a monkey-patched iScroll to add a custom event that fires even during the inertial stage: https://dl.dropbox.com/u/15943645/scrollingdemo.html
Works great on my 2nd gen iPad.
JS:
// Disable touch events
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
// Patch iScroll for position change custom event
iScroll.prototype._oldPos = iScroll.prototype._pos;
iScroll.prototype._pos = function(x, y) {
this._oldPos(x, y);
if (this.options.onPositionChange) this.options.onPositionChange.call(this);
}
$(function() {
var $win = $(window),
$div_cols = $('#cols'),
$div_rows = $('#rows'),
$div_body = $('#body')
// attach scrolling sync handler and execute it once
function sync_scroll(e) {
$div_cols.scrollLeft(0 - $div_body.position().left);
$div_rows.scrollTop(0 - $div_body.position().top);
}
// initialize iScroll on wrapper div, with position change handler
var myScroll = new iScroll('iscroll_wrapper', {
bounce: false,
onPositionChange: sync_scroll
});
})
CSS:
#iscroll_wrapper {
position:absolute;
z-index: 1;
left: 168px;
top:77px;
bottom:0px;
right:0;
overflow:auto;
}
#body {
position:absolute;
z-index: 1;
width: 2046px;
height: 3376px;
}
Note only the body responds to touch events, but you can extend the technique to the rows and cols divs for the reverse relationship.
iOS actually freezes DOM manipulation and Javascript while inertial scrolling is happening. Here is a simple demo that I made to illustrate the difference between scrolling in a normal desktop environment vs the iPad: http://jsfiddle.net/notjoelshapiro/LUcR6/. This code only has this JS in it:
var num = 0;
function updateNum(){
num++;
$('#awesomeDiv').text(num);
}
$(window).scroll(updateNum);
On scroll it increments a number and displays it on the bottom of the page. You'll see that the scroll number at the bottom of the screen is only being incremented when the inertial scroll has stopped. If Javascript was acting in the background it wouldn't refresh until the scroll ended but the number should be incremented higher.
So to answer your questions specifically:
Is there any touch or scroll event fired during the inertial scrolling phase?
Negative, ghostrider.
Is there any way to run a Javascript callback during that phase?
See above.
Is there a way to sync the scroll offset of two elements (either X or Y, not both) using CSS or some other technology other than JS?
Not quite sure what you mean here, JS can do all of the math'ing that you need but it will have to be when inertial scroll has completed. To be honest though, this may be a symptom of tl;dr since I'm at work right now.
Have you looked at the iScroll library? It simulates intertial (or non-inertial) scrolling for touch and non-touch environments and gives you JS callbacks during/after "scroll" and "inertial scroll" and provides a lot of information that you can use to calculate where you are on the page.
Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.
http://jquerymobile.com/demos/1.0rc1/docs/api/events.html#/demos/1.0rc1/docs/api/events.html
Thats what they had to say under scroll start section
I have a jQuery autocomplete working against my testbox just fine except when I type, get a set of resultss, scroll down a bit, then type more words (new result) the new result stays scrolled to the same poistion as the old result set.
Is there an easy way that I am missing to force the autocmplete result list to scroll to top prior to returning new results?
I hope that the usage $('.ui-menu').scrollTop(0); inside of search will solve your problem. The following code seams me even better:
$("#myinput").autocomplete({
// ... other parameters which you use
search: function () {
$(this).data("autocomplete").menu.element.scrollTop(0);
}
});