We help IT Professionals succeed at work.

How do I scroll a XUL vbox from javascript?

Arbuckle2
Arbuckle2 asked
on
Medium Priority
1,628 Views
Last Modified: 2013-12-07
I need to programatically scroll a XUL vbox from javascript code and haven't found a way to do it yet.

The vbox is the top-level displayable object within a XUL window which is displayed in a Firefox tab.

Actually, what I really want to do is scroll the window using javascript code, but the only way I've found to attach scroll bars to the window is to set the style of the topmost displayable object - the vbox - to "overflow: auto;". If there is another way, please let me know.

The attached code gives a relevant outline of my XUL window file.

<window title="Title" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
<vbox id="full-box" flex="1" style="overflow: auto;">
...
</vbox>
 
</window>

Open in new window

Comment
Watch Question

Are you saying you want to make the box start scrolling down automatically, or you just want scrolling to be enabled?

Author

Commented:
No - I want to scroll an appropriate amount (by page or by line) in response to user actions.
Can you make anchors and then go to that anchor? I haven't made an extension for so long... I forget what you can and can't do, sorry.

Author

Commented:
Thanks for the idea, but I think that will be too impractical for this implementation. Basically, I need to emulate what happens when a page up or page down or up arrow or down arrow key is pressed.

I've attached a full code snippet which can be saved as a XUL file loaded into a tab to show what it is I need to do. (Note that this doesn't have to be in the context of an extension, although that is the eventual goal.)
<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
<window title="Scroll" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
<keyset>
	<key id="page-down-key" keycode="VK_PAGE_DOWN" modifiers="" oncommand="pageDown();"/>
	<key id="page-up-key" keycode="VK_PAGE_UP" modifiers="" oncommand="pageUp();"/>
</keyset>
 
<vbox id="main-vbox" flex="1" style="overflow: auto"> 
	<html:div style="font-size: 80px;"> 
		test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>test<html:br/>
	</html:div> 
</vbox> 
 
<script type="application/x-javascript">
<![CDATA[
	function pageDown()
	{
		alert("pageDown\n");
// TBD - how to actually scroll?
	}
	function pageUp()
	{
		alert("pageUp\n");
// TBD - how to actually scroll?
	}
]]>
</script>
 
</window>

Open in new window

Author

Commented:
I've attached the snippet as a file to make it easier to use. You can rename the file from scroll_example.txt to scroll_example.xul

Load the file into a Firefox tab. Press the page down or page up key. All they do right now is display an alert. If the keyset is removed, page up and page down do nothing.
scroll-example.txt
I can't get the key to bring up the alert when I push it...

Author

Commented:
Interesting links. I haven't given the ideas a try yet, but don't think they'll work exactly as is. Seems to me that the fact that the vbox has overflow:auto means that it will never be larger than the window - hence, the window will never scroll. Does that make any sense to you? Unfortunately, I haven't been able to find a way to have the scroll bar attached to the window instead of the vbox.

I'll give some of this a try later.
It wouldn't work in any context I put it in. I tried about 20 different ways of putting it.

So you just need a way to have the vbox fill the whole window? and be able to scroll?

Author

Commented:
In case this might give you some other ideas, here's what else I've tried:

1) scroll the vbox:
document.getElementById("main-vbox").scrollBy(0, 200);

2) use doCommand on the vbox:
document.getElementById("main-vbox").doCommand("cmd_scrollPageDown");

3) set scrollTop on the vbox:
document.getElementById("main-vbox").scrollTop = 200;

4) setting style="overflow: auto;" on the window instead of the vbox

No luck.

Author

Commented:
Opalelement:
RE: "So you just need a way to have the vbox fill the whole window? and be able to scroll?":
Yes - I want the content to behave like a normal HTML tab WRT scrolling. If the content exceeds the window size, I want scroll bars to appear which respond to both the mouse and keyboard.
Alright, I worked on it last night and I will work on it pretty soon today. These are what I have tried so far though:
	function pageDown()
	{
		alert("pageDown\n");
		alert(document.getElementById("main-vbox").offsetHeight);
		alert(document.getElementById("hi").offsetHeight);
 
		alert("wsb");
		window.scrollBy(0, 100);
 
		alert("wcsb");
		window.content.scrollBy(0, 100);
 
		alert("wcst\n");
		window.content.scrollTo(0,200);
 
		alert("csb\n");
		content.scrollBy(0, 100);
		
		alert("dgebiihtml\n");
		document.getElementById("main-vbox").innerHTML;
		
		//alert("dgebisb\n");
		//document.getElementById("main-vbox").scrollBy(0, 200);
		
		//alert("dgebicsb\n");
		//document.getElementById("main-vbox").content.scrollBy(0, 200);
 
		//alert("dgebiihtmlsb\n");
		//document.getElementById("main-vbox").innerHTML.scrollBy(0, 200);
		
		alert("dgebidc\n");
		document.getElementById("main-vbox").doCommand("cmd_scrollPageDown");
		
		alert("dgebist\n");
		document.getElementById("main-vbox").scrollTop = 200;
	
		alert("finished");
 
	}

Open in new window

The following works for me, is there a still a problem for you? This should be pretty much what you got as well
<script src="http://www.dynamicdrive.com/dynamicindex11/domdrag/dom-drag.js"></script>
<div id="d1" class="rma" style="position:absolute;top:0px;width:400px;height:370px;float:left; border-style:none;background-color:white;z-index:1">
                   <div id="h1" onmousedown="zi(this)" style="position:relative;background-color:Black;color:White;width:100%;font-weight:bold;border-style:solid;border-width:1px;border-color:Silver;">
                   <a style="padding:5px">Web</a></div>
                    <div id="web" onmousedown="zi(this)" style="background:red;position:relative;width:100%;height:94%;overflow-x:hidden;overflow-y:auto" ></div>
</div>
 
<div id="d2" class="rma" style="position:absolute;top:50px;left:50px;width:400px;height:370px;float:left; border-style:none;background-color:white;z-index:1">
                   <div id="h2" onmousedown="zi(this)" style="position:relative;background-color:blue;color:White;width:100%;font-weight:bold;border-style:solid;border-width:1px;border-color:Silver;">
                   <a style="padding:5px">Web</a></div>
                    <div id="h2" onmousedown="zi(this)" style="background:green;position:relative;width:100%;height:94%;overflow-x:hidden;overflow-y:auto" ></div>
</div>
 
<script>
 var theHandle = document.getElementById("h1");
var theRoot = document.getElementById("d1");
var theHandle2 = document.getElementById("h2");
var theRoot2 = document.getElementById("d2");
 
Drag.init(theHandle, theRoot);
Drag.init(theHandle2, theRoot2);
 
var zx=6;
 
function zi(obj)
{
obj.parentNode.style.zIndex=zx;
zx=zx+1;
}
</script>

Open in new window

Author

Commented:
Opelelement - you didn't intend that last response for me, did you?
The last post I was supposed to be on another topic, sorry... Just ignore it. I am working on the vbox now.
Does it have to stay a vbox, or can it be another XUL container such as scrollbox?

Author

Commented:
Hmmmm... never used scrollbox. Yes - that would be fine. I just tried replacing it into my extension to make sure it is plug-replaceable. Looks fine.

Author

Commented:
We're very close. See the attached. It's responding to the page down key. I think I can take it from here unless you have other thoughts or ideas on this.
scroll.txt
That looks like ti works, what is window.dump for?
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
I use it instead of alert to output to the console.

Forgive me if you already know this, but on Windows, the console is a DOS box where you can direct dump output. You can display the console by launching Firefox with the -console switch. To enable dump output to it, you also have to modify some preference (about:config) settings. See
https://developer.mozilla.org/en/Setting_up_extension_development_environment

When I get this fully working, I'll accept your solution (the key was using scrollbox).

Thanks!
I actually did not know that FF had a built in one. That is good to know:)

Did you see the code above that I put in?

Author

Commented:
The innerHeight stuff? Yes - it looks good.
I'm accepting the solution. Thanks again!

Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.