WebReference.com - Part 2 of chapter 5 from Creating Applications with Mozilla. From O'Reilly (3/5).

Much of what makes the Mozilla UI both flexible and programmable is its ability to dynamically alter the CSS style rules for elements at runtime. For example, if you have a button, you can toggle its visibility by using a simple combination of JavaScript and CSS. Given a basic set of buttons like this:

<button id="somebutton" class="testButton" label="foo" />
<spacer flex="1" />
<button id="ctlbutton"
class="testButton"
label="make disappear"
oncommand="disappear( );" />

as well as a stylesheet import statement at the top of the XUL like this:

<?xml-stylesheet href="test.css" type="text/css"?>

and a simple CSS file in your chrome/xfly/content directory called test.css that contains the following style rule:

#somebutton[hidden="true"]{ display: none; }
.testButton{
border            : 1px outset #cccccc;
background-color  : #cccccc;
padding           : 4px;
margin            : 50px;
}

You can call setAttribute in your script to hide the button at runtime.

<script>
function disappear( ){
return document.getElementById('somebutton').setAttribute('hidden', true);
}
</script>

The previous code snippet makes a visible button disappear by setting its hidden attribute to true. Adding a few more lines, you can toggle the visibility of the button, also making it appear if it is hidden:

<script>
function disappear( ){
const defaultLabel  = "make disappear";
const newLabel      = "make reappear";
var button          = document.getElementById('somebutton');
var ctlButton       = document.getElementById('ctlbutton');
if(!button.getAttribute('hidden')) {
button.setAttribute('hidden', true);
ctlButton.setAttribute('label', newLabel);
} else  {
button.removeAttribute('hidden');
ctlButton.setAttribute('label', defaultLabel);
}
return;
}
</script>

Another useful application of this functionality is to collapse elements such as toolbars, boxes, and iframes in your application.

The setAttribute method can also be used to update the element's class attribute with which style rules are so often associated. toolbarbutton-1 and button-toolbar are two different classes of button. You can change a button from a toolbarbutton-1-the large button used in the browser-to a standard toolbar button using the following DOM code:

// get the Back button in the browser
b1 = document.getElementById("back-button");\
b1.setAttribute("class", "button-toolbar");

This dynamically demotes the Back button to an ordinary toolbar button. Code such as this assumes, of course, that you know the classes that are used to style the various widgets in the interface.

You can also set the style attribute directly using the DOM:

el = document.getElementById("some-element");
el.setAttribute("style", "background-color:darkblue;");

Be aware, however, that when you set the style attribute in this way, you are overwriting whatever style properties may already have been defined in the style attribute. If the document referenced in the snippet above by the ID some-element has a style attribute in which the font size is set to 18pc, for example, that information is erased when the style attribute is manipulated in this way.

[previous] [next]

Created: September 26, 2002
Revised: September 26, 2002

URL: https://webreference.com/programming/javascript/mozillaapps/chap5/2/3.html