How do I scroll a XUL vbox from javascript?

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

Arbuckle2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

OpalelementCommented:
Are you saying you want to make the box start scrolling down automatically, or you just want scrolling to be enabled?
0
Arbuckle2Author Commented:
No - I want to scroll an appropriate amount (by page or by line) in response to user actions.
0
OpalelementCommented:
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.
0
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Arbuckle2Author 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

0
Arbuckle2Author 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
0
OpalelementCommented:
I can't get the key to bring up the alert when I push it...
0
OpalelementCommented:
0
Arbuckle2Author 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.
0
OpalelementCommented:
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?
0
Arbuckle2Author 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.
0
Arbuckle2Author 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.
0
OpalelementCommented:
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

0
OpalelementCommented:
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

0
Arbuckle2Author Commented:
Opelelement - you didn't intend that last response for me, did you?
0
OpalelementCommented:
The last post I was supposed to be on another topic, sorry... Just ignore it. I am working on the vbox now.
0
OpalelementCommented:
Does it have to stay a vbox, or can it be another XUL container such as scrollbox?
0
Arbuckle2Author 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.
0
Arbuckle2Author 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
0
OpalelementCommented:
That looks like ti works, what is window.dump for?
0
OpalelementCommented:
This right here works, it goes up and down the same as if you click the empty space on the scrollbar
<?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>
 
<scrollbox id="main-vbox" flex="1" style="overflow: auto;"> 
	<html:div style="font-size: 80px;"> 
		test<html:br/>
test2<html:br/>
test3<html:br/>
test4<html:br/>
test5<html:br/>
test6<html:br/>
test7<html:br/>
test8<html:br/>
test9<html:br/>
test10<html:br/>
test11<html:br/>
test12<html:br/>
test13<html:br/>
test<html:br/>
test<html:br/>
test<html:br/>
test<html:br/>
test<html:br/>
	</html:div> 
</scrollbox> 
 
<script src="chrome://global/content/globalOverlay.js"/>
 
<script type="application/x-javascript">
<![CDATA[
	function pageDown()
	{
		window.dump("pageDown\n");
		var vboxElement = document.getElementById("main-vbox");
		var xpcomInterface = vboxElement.boxObject.QueryInterface(Components.interfaces.nsIScrollBoxObject);
		xpcomInterface.scrollBy(0, window.innerHeight-15);
		window.dump("... done\n");
	}
	function pageUp()
	{
		window.dump("pageUp\n");
		var vboxElement = document.getElementById("main-vbox");
		var xpcomInterface = vboxElement.boxObject.QueryInterface(Components.interfaces.nsIScrollBoxObject);
		xpcomInterface.scrollBy(0, -(window.innerHeight-15));
		window.dump("... done\n");
	}
]]>
</script>
 
</window>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Arbuckle2Author 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!
0
OpalelementCommented:
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?
0
Arbuckle2Author Commented:
The innerHeight stuff? Yes - it looks good.
I'm accepting the solution. Thanks again!

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.