I'm working on a Firefox extension, and I have created a multiline text box. When the user presses a button, I add text to the textbox by using (Javascript) TextBoxElement.value += "More Text";
The problem with this code, is that whenever more text is added, the textbox scrolls all the way to the top. With much testing, I haven't figured out how to make it scroll all the way to the bottom again. For some reason the scrollTop property is always 0, and setting it doesn't effect the scroll bar.
Is there any ways I can set the scroll bar back to the bottom of the text box?
My extension's purpose is to embed a small chat box. I'm using a textbox to store the chat history. Maybe using a textbox isn't the most efficient way, so any other suggestions would be great as well.
Someone on Chatzilla helped me out on this one. Thank You!
Anyway, here is the solution:
var TextBoxElement = <TextBoxElement>;
var ti = document.getAnonymousNodes(TextBoxElement)[0].childNodes[0];
ti.scrollTop=ti.scrollHeight;
The another solution is to move caret to the end of textbox content. Caret is controlled with selectionStart and selectionEnd properties (which can be set or get).
Here is the sample code:
var TextBoxElement = document.getElementById("myTextboxId");
var pos = TextBoxElement.value.length;
TextBoxElement.selectionStart = pos;
TextBoxElement.selectionEnd = pos;
Related
I'm getting started with Windows 8 App development using WinJS. I'm using the Light UI theme but I have set up a darker area on the left of the page (where the black back button is) and the issue is: you can't see the button.
I've trawled through the MSDN pages and the most I could find is how to style a button which doesn't actually explain how to change the colour of an actual asset.
http://msdn.microsoft.com/en-us/library/windows/apps/jj835822.aspx
I've also tried adding: win-ui-light and win-ui-dark classes to the button with no success.
I wondered if someone could point me in the right direction?
Many thanks for your time
Chris
First of all you have to delete the link tag that contain UI css by default and add it to document head , Dynamically.see below code :
var uistyle;
// call when your app load or resume.
function onappopen(){
uistyle = document.createElement('link');
uistyle.href = "//Microsoft.WinJS.2.0/css/ui-dark.css";
uistyle.rel = "stylesheet";
uistyle.id = "UIstyle";
document.head.appendChild(uistyle);}
// call when you want to change UI Style.
function UIstyle(UIbool){
if(UIbool=='light'){ uistyle.href = "//Microsoft.WinJS.2.0/css/ui-light.css";}
else {uistyle.href = "//Microsoft.WinJS.2.0/css/ui-dark.css";}}
Like: UIstyle('light'); for light UI in Windows 8 or "UIstyle()" for dark;
I used the DOM Explorer to find the buttons default values and overwrite them. It was the child element that needed to be overwritten: .win-back
I'm trying to make an editable control using the HTMLEditor ( I'd like a rich-text pane like Swing's JEditorPane or JTextPane but it seems I need to wait a couple of years for that ). I want to have the user type in text and the control grows to suit. I have tried catching an event when the scroll-bar appears and increasing the size until it disappears but I can't work out how to wait until the JavaFX thread has actually re-sized the control on its parent.
There's probably a better way to do it than that... any ideas? Any ideas how to reduce it if text is removed?
TIA Mike Watts
For the edit control, use a WebView with contenteditable set to true like this example or a customized HTMLEditor.
Interact with it using the Java/JavaScript bridge similar to this editor. You can script the WebView using JQuery. Run a Timeline which polls the edit control's text dimensions using a JQuery dimension query script and adjust the control size appropriately.
[side note: I've added this as an answer even though it is just the details from jewelsea's - I couldn't format the code when replying as a comment].
This is what has worked to a certain extent:
in the html of the WebView component, added a tag <div id='measured'> around all of the text blocks
added a handler to the WebView using setOnKeyPressed and that calls checkHeight()
private int lastOffsetHeight;
private void checkHeight() {
int newHeight = (Integer)webview.getEngine().executeScript(
"document.getElementById(\"measured\").offsetHeight;") + 14;
if (newHeight != lastOffsetHeight) {
lastOffsetHeight = newHeight;
webview.setPrefHeight(newHeight);
}
}
This is not too bad, main problem is that if all of the text is deleted then the WebView component deletes the div. As jewelsea mentioned, JQuery might be a better solution but I'll update this if I ever fix the problem of including the library ;-)
I have a long text in a gas TextArea and I want to scroll a line of text into view. I tried several solutions (setCursorPos, setSelectionRange), but the text is always displayed at the top; i.e. it never scrolls down to the position I want...
I did notice that the doc says: "This will only work when the TextArea is attached to the document and not hidden.". That shouldn't really apply in my case (I want the app to pop up at the specific position...), but I tried to set it before and after the app is displayed.
Here is the code.
....
var cursorPos=15;//just a test...
var fileString = "a very long text that I'm not putting in here....";
var mytextArea=myapp.createTextArea().setValue(fileString).setSize("100%","100%").setName("TextArea").setId("TextArea");
myapp.add(mytextArea.setCursorPos(cursorPos));
var doc=SpreadsheetApp.getActive();
doc.show(myapp);
myapp.getElementById("TextArea").setFocus().setCursorPos(cursorPos);
I must be doing something obviously wrong. Any suggestions?
Issue is here: http://code.google.com/p/google-apps-script-issues/issues/detail?id=1635
The issue response was: "Unfortunately this is a limitation of the underlying GWT technology" :( So no fix any time soon... : i.e setCursorPos(cursorPos) does nothing...
Have you tried wrapping the text area in a scroll panel and setting the position of the scroll panel?
I need to get a popup in the VisualTree which is a sibling of Application.Current.RootVisual. Is there a way to do this?
I couldn't find a way for this at the moment.
I have tried to get the parent of the RootVisual but it don't have such.
var frame = Application.Current.RootVisual as PhoneApplicationFrame;
FrameworkElement fi = (FrameworkElement)VisualTreeHelper.GetParent(frame);
Thanks in advance
That was wrong approach.
Here is the correct one and it works like a champ:
System.Collections.Generic.IEnumerable<Popup> popups = VisualTreeHelper.GetOpenPopups();
Popup popup = popups.ElementAt(0);
As visible in the image, i have a "Hide" button. On click of the Hide button i want the left panel to be hidden and the right panel to cover 100% of the screen. On doing so, the "hide" button will change to show where the panel comes back to its original position.
For doing the same
xtype:'toolbar',
docked:'top',
items:[
{
cls:'hide',
xtype:'button',
text:"Hide",
iconMask:true,
ui:'back',
id:'hide',
handler:function () {
var viewWidth = Ext.Viewport.getWindowWidth();
alert(viewWidth);
desiredWidth = Math.min(viewWidth, 400) - 10;
Ext.fly('protocol').setStyle('width', desiredWidth); ;
}
},
I tried the above code to change the width of the panel dynamically but Ext.fly doesn seem to work.
What could be the solution to this?
Any help is appreciated.
A highlight of the left panel will be appreciated.
However, just looking at your image and I am making an assumption here.
If all you want to hide is the left panel containing the following
Then perhaps, what you can do is to do a jQuery toggle after declaring the LEFT and RIGHT panels within a "DIV" html
tag for example. See link below.
jQuery API for toggle
Also, if you're using a Javascript library or tool to build this, then you might want to get the source of the Javascript and dive into that.
From my experience, it is a lot easier to write a Javascript function on your own rather than to use something ready built.
Ext.getCmp('workItemPanel').hide();
worked well for me.