Solved

How do I scroll a XUL vbox from javascript?

Posted on 2009-07-01
23
1,550 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

0
Comment
Question by:Arbuckle2
  • 12
  • 11
23 Comments
 
LVL 5

Expert Comment

by:Opalelement
ID: 24760968
Are you saying you want to make the box start scrolling down automatically, or you just want scrolling to be enabled?
0
 

Author Comment

by:Arbuckle2
ID: 24763047
No - I want to scroll an appropriate amount (by page or by line) in response to user actions.
0
 
LVL 5

Expert Comment

by:Opalelement
ID: 24765426
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Arbuckle2
ID: 24766413
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
 

Author Comment

by:Arbuckle2
ID: 24766624
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
 
LVL 5

Expert Comment

by:Opalelement
ID: 24769455
I can't get the key to bring up the alert when I push it...
0
 
LVL 5

Expert Comment

by:Opalelement
ID: 24769583
0
 

Author Comment

by:Arbuckle2
ID: 24769991
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
 
LVL 5

Expert Comment

by:Opalelement
ID: 24770024
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
 

Author Comment

by:Arbuckle2
ID: 24770107
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
 

Author Comment

by:Arbuckle2
ID: 24772216
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
 
LVL 5

Expert Comment

by:Opalelement
ID: 24772228
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
 
LVL 5

Expert Comment

by:Opalelement
ID: 24773182
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
 

Author Comment

by:Arbuckle2
ID: 24773236
Opelelement - you didn't intend that last response for me, did you?
0
 
LVL 5

Expert Comment

by:Opalelement
ID: 24773244
The last post I was supposed to be on another topic, sorry... Just ignore it. I am working on the vbox now.
0
 
LVL 5

Expert Comment

by:Opalelement
ID: 24773258
Does it have to stay a vbox, or can it be another XUL container such as scrollbox?
0
 

Author Comment

by:Arbuckle2
ID: 24773315
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
 

Author Comment

by:Arbuckle2
ID: 24773367
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
 
LVL 5

Expert Comment

by:Opalelement
ID: 24773388
That looks like ti works, what is window.dump for?
0
 
LVL 5

Accepted Solution

by:
Opalelement earned 500 total points
ID: 24773409
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
 

Author Comment

by:Arbuckle2
ID: 24773430
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
 
LVL 5

Expert Comment

by:Opalelement
ID: 24773440
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
 

Author Comment

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

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Bada platform is becoming more and more famous this days and people talking about same. Some friends included those who have bada OS mobile asked me "what is bada?"and "what its features?". That encouraged me to research and write this article. [st…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question