Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How do I scroll a XUL vbox from javascript?

Posted on 2009-07-01
23
Medium Priority
?
1,562 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Now-a-days, indirectly, postal services have been replaced by email services. Yes, whenever we hear the word "email" a lot of people only think of gmail. Some people still think that email and gmail are one and the same thing :-). Let's see some …
Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
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…

604 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