Solved

How do I scroll a XUL vbox from javascript?

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

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
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.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

760 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now