The Prototype JavaScript library provides a number of tools for manipulating the content of a view from the ClientSide. One such tool is the Element object.
The Element object exposes a number of methods
- toggle
- hide
- show
- remove
- getHeight
toggle
The Element.toggle() function will toggle the visibility of an element (using the CSS property display, not visibility). This will make visible content disapear, or invisible content appear.
example
<div id="foo">foo</div>
<a href="#" onclick="Element.toggle('foo'); return false;">toggle foo</a>
You can also use the link_to_function Rails helper:
<%= link_to_function('View/hide details', "Element.toggle('details')") %>
<div id="details">
I appear and disappear!
</div>
You can toggle more than one item at once by passing more names to the function:
example
<div id="foo">foo</div>
<div id="bar">bar</div>
<a href="#" onclick="Element.toggle('foo','bar'); return false;">toggle foo and bar</a>
Or, using link_to_function:
<div id="foo">foo</div>
<div id="bar">bar</div>
<%= link_to_function('Toggle both', "Element.toggle('foo','bar')") %>
hide
The Element.hide() function sets the display style for the specified element ID(s) to ‘none’.
example
<div id="foo">foo</div>
<a href="#" onclick="Element.hide('foo'); return false;">hide foo</a>
show
The Element.show() function sets the display style for the specified element ID(s) to ’’(empty string). This will revert the element to the elements default display style or any display style defined in a style sheet. Thus if you have set the display style to be ‘none’ in a style sheet Element.show() will not show the element.
example
<div id="foo" style="display : none;">foo</div>
<a href="#" onclick="Element.show('foo'); return false;">show foo</a>
Element.show() and Element.hide() can both take multiple arguments, just like Element.toggle()
remove
The Element.remove() function prunes the specified element and all of its children from the DOM tree for the current view of the page. i.e. if you refresh the page the element will return to its original position and display style.
example
<div id="foo">foo</div>
<a href="#" onclick="Element.remove('foo'); return false;">remove foo</a>
getHeight
The Element.getHeight() function returns the offsetHeight of the element specified. Generally this is the actual onscreen height of the displayed element. However, if this function is called from within a table, it might not return the value you expect.
example
In a test page I created the following table
<table border="1" id="mytable" cellspacing=0>
<tr><td> table contents </td> </tr>
<tr><td>Element.getHeight('mytable'); =
<script>document.write(""+Element.getHeight('mytable'));</script>
</td></tr>
<tr><td> table contents </td> </tr>
<tr><td>Element.getHeight('mytable'); =
<script>document.write(""+Element.getHeight('mytable'));</script>
</td></tr>
<tr><td> table contents </td> </tr>
<tr><td>Element.getHeight('mytable'); =
<script>document.write(""+Element.getHeight('mytable'));</script>
</td></tr>
</table>
...and the output for this table looked like the following
table contents
Element.getHeight('mytable'); = 40
table contents
Element.getHeight('mytable'); = 80
table contents
Element.getHeight('mytable'); = 120
It appears to me that each successive call to getHeight() returned the height of the table that had been rendered up to the time of the call. Note: any call to getHeight(‘mytable’) after the page render had finished returned the final height of the table.
category: Howto, Stub
The Prototype JavaScript library provides a number of tools for manipulating the content of a view from the ClientSide. One such tool is the Element object.
The Element object exposes a number of methods
- toggle
- hide
- show
- remove
- getHeight
toggle
The Element.toggle() function will toggle the visibility of an element (using the CSS property display, not visibility). This will make visible content disapear, or invisible content appear.
example
<div id="foo">foo</div>
<a href="#" onclick="Element.toggle('foo'); return false;">toggle foo</a>
You can also use the link_to_function Rails helper:
<%= link_to_function('View/hide details', "Element.toggle('details')") %>
<div id="details">
I appear and disappear!
</div>
You can toggle more than one item at once by passing more names to the function:
example
<div id="foo">foo</div>
<div id="bar">bar</div>
<a href="#" onclick="Element.toggle('foo','bar'); return false;">toggle foo and bar</a>
Or, using link_to_function:
<div id="foo">foo</div>
<div id="bar">bar</div>
<%= link_to_function('Toggle both', "Element.toggle('foo','bar')") %>
hide
The Element.hide() function sets the display style for the specified element ID(s) to ‘none’.
example
<div id="foo">foo</div>
<a href="#" onclick="Element.hide('foo'); return false;">hide foo</a>
show
The Element.show() function sets the display style for the specified element ID(s) to ’’(empty string). This will revert the element to the elements default display style or any display style defined in a style sheet. Thus if you have set the display style to be ‘none’ in a style sheet Element.show() will not show the element.
example
<div id="foo" style="display : none;">foo</div>
<a href="#" onclick="Element.show('foo'); return false;">show foo</a>
Element.show() and Element.hide() can both take multiple arguments, just like Element.toggle()
remove
The Element.remove() function prunes the specified element and all of its children from the DOM tree for the current view of the page. i.e. if you refresh the page the element will return to its original position and display style.
example
<div id="foo">foo</div>
<a href="#" onclick="Element.remove('foo'); return false;">remove foo</a>
getHeight
The Element.getHeight() function returns the offsetHeight of the element specified. Generally this is the actual onscreen height of the displayed element. However, if this function is called from within a table, it might not return the value you expect.
example
In a test page I created the following table
<table border="1" id="mytable" cellspacing=0>
<tr><td> table contents </td> </tr>
<tr><td>Element.getHeight('mytable'); =
<script>document.write(""+Element.getHeight('mytable'));</script>
</td></tr>
<tr><td> table contents </td> </tr>
<tr><td>Element.getHeight('mytable'); =
<script>document.write(""+Element.getHeight('mytable'));</script>
</td></tr>
<tr><td> table contents </td> </tr>
<tr><td>Element.getHeight('mytable'); =
<script>document.write(""+Element.getHeight('mytable'));</script>
</td></tr>
</table>
...and the output for this table looked like the following
table contents
Element.getHeight('mytable'); = 40
table contents
Element.getHeight('mytable'); = 80
table contents
Element.getHeight('mytable'); = 120
It appears to me that each successive call to getHeight() returned the height of the table that had been rendered up to the time of the call. Note: any call to getHeight(‘mytable’) after the page render had finished returned the final height of the table.
category: Howto, Stub