I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
any help greatly appriecated,
thanks in advance.
oLE
10  4610 
"oLE" <ol****@dsl.pipex.com> wrote in message
news:41*********************@news.dial.pipex.com.. . I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its
not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
any help greatly appriecated,
thanks in advance.
oLE
Hi Ole
Have a look at www.corstorphinehouse.com/d/avail.html, it is a bit
complicated, but it may help you...
oLE wrote: I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls
the javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become
incredibly frustrated because i went ahead thinking it was going to be like C.
its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don't think i can use a getElementById exactly because i want
to reference the element via its relationship to the hyperlink that
calls the javascript, i know this can be done. You see there will be
several tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
any help greatly appriecated,
thanks in advance.
oLE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}
</style>
<script type="text/javascript">
//<![CDATA[
function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == 'none') ? '' : 'none';
var txt = 'show rowhide row';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}
//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>
Table elements have their own proprietary CSS display values.
For rows it's ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they'll be some comment on this... http://www.blooberry.com/indexdot/cs...fy/display.htm
RobB wrote: oLE wrote:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls
the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become
incredibly
frustrated because i went ahead thinking it was going to be like C.
its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don't think i can use a getElementById exactly because i want
to
reference the element via its relationship to the hyperlink that
calls
the javascript, i know this can be done. You see there will be
several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
any help greatly appriecated,
thanks in advance.
oLE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}
</style>
<script type="text/javascript">
//<![CDATA[
function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == 'none') ? '' : 'none';
var txt = 'show rowhide row';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}
//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>
Table elements have their own proprietary CSS display values.
For rows it's ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they'll be some comment on this...
http://www.blooberry.com/indexdot/cs...fy/display.htm
thanks for your help RobB and WindAndWaves, i'll give these a go.
oLE
On Mon, 13 Dec 2004 09:47:49 +0000, oLE <ol****@dsl.pipex.com> wrote:
[snip] document.getElementById("row").style.display = "inline"; // shows row
If you did do that, you'd almost certainly have problems.
Table rows are not inline elements. They're closer to block elements but
they have their own display value: table-row. However, as IE doesn't
support that (it incorrectly uses block), it is best not to specify a
value at all. Instead, assign an empty string to remove the inline style
causing the page stylesheet to take effect.
As a side-effect, this will enforce something that should happen anyway:
you must not hide the row initially using CSS. The reason for this is that
users without the necessary scripting support will never be able to see
the row. Instead, hide the row via scripting.
but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript
Unless you actually tell us what that relationship is - preferably by
linking to the document in question - it's difficult to give you anything
useful.
[snip]
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
RobB wrote: oLE wrote:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls
the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become
incredibly
frustrated because i went ahead thinking it was going to be like C.
its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don't think i can use a getElementById exactly because i want
to
reference the element via its relationship to the hyperlink that
calls
the javascript, i know this can be done. You see there will be
several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
any help greatly appriecated,
thanks in advance.
oLE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}
</style>
<script type="text/javascript">
//<![CDATA[
function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == 'none') ? '' : 'none';
var txt = 'show rowhide row';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}
//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>
Table elements have their own proprietary CSS display values.
For rows it's ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they'll be some comment on this...
http://www.blooberry.com/indexdot/cs...fy/display.htm
RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at www.olespace.com/content_rants.php
the text inside those big tables is the row i want to show and hide, it
needs to start out hidden as well.
i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.
oLE
oLE wrote:
(snip) RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php
the text inside those big tables is the row i want to show and hide,
it needs to start out hidden as well.
i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.
oLE
Addl. CSS:
..contract {
display: none;
}
..expand {
[anything but display]
}
td a img {
border: none;
}
..preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}
JS:
function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....
...............
...............
Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.
RobB wrote: oLE wrote:
(snip)
RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php
the text inside those big tables is the row i want to show and hide,
it
needs to start out hidden as well.
i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.
oLE
Addl. CSS:
.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}
JS:
function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....
..............
..............
Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call. http://www.olespace.com/test.htm
working. if is still does the same when i add in the php and stuff then
i'm more than happy. thank you so much for all your help rob, i really
appreciate it, you have saved my life here. I'll make sure the source
code credits you.
oLE
oLE wrote: RobB wrote:
oLE wrote:
(snip)
RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php
the text inside those big tables is the row i want to show and hide,
it
needs to start out hidden as well.
i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.
oLE
Addl. CSS:
.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}
JS:
function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....
..............
..............
Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.
http://www.olespace.com/test.htm
working. if is still does the same when i add in the php and stuff then
i'm more than happy. thank you so much for all your help rob, i really
appreciate it, you have saved my life here. I'll make sure the source
code credits you.
oLE
sorry for double post but you might want to look at www.olespace.com and
then click rants on the nav bar to see it in proper working action.
can't get the pluses to turn to minuses but to be honest i don't care.
oLE
oLE wrote: oLE wrote: RobB wrote:
oLE wrote:
(snip)
RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php
the text inside those big tables is the row i want to show and
hide,
it
needs to start out hidden as well.
i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.
oLE
Addl. CSS:
.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}
JS:
function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is
what Google's
Director of new Technology had to say:<p><p>.....
..............
..............
Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.
http://www.olespace.com/test.htm
working. if is still does the same when i add in the php and stuff
then i'm more than happy. thank you so much for all your help rob, i
really appreciate it, you have saved my life here. I'll make sure the
source code credits you.
oLE
sorry for double post but you might want to look at www.olespace.com
and then click rants on the nav bar to see it in proper working action.
can't get the pluses to turn to minuses but to be honest i don't
care.
oLE
Yes you do....
See this?
...............
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
...............
It's what switches the icon's src. Obviously, it's set up for that
demo, with its folder images ('folder.gif', 'folderopen.gif'). You'll
need to change it for those new pix:
node1.src = (/plus/.test(node1.src)) ?
node1.src.replace(/plus/, 'minus') :
node1.src.replace(/minus/, 'plus');
Just guessing that the other image is
'http://www.olespace.com/gfx/minus.gif'. Also - this CSS should be...
..preload {
background-image: url( http://www.olespace.com/gfx/minus.gif);
}
....as it's designed solely to preload the alternate image. hth
oLE wrote: oLE wrote: RobB wrote:
oLE wrote:
(snip)
RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php
the text inside those big tables is the row i want to show and
hide,
it
needs to start out hidden as well.
i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.
oLE
Addl. CSS:
.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/...ons/folderopen
.gif);}
JS:
function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gi
f"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....
..............
..............
Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gi
f"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.
http://www.olespace.com/test.htm
working. if is still does the same when i add in the php and stuff
then i'm more than happy. thank you so much for all your help rob, i
really appreciate it, you have saved my life here. I'll make sure the
source code credits you.
oLE
sorry for double post but you might want to look at www.olespace.com
and then click rants on the nav bar to see it in proper working action.
can't get the pluses to turn to minuses but to be honest i don't care.
oLE
Yes you do....
See this?
..............
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
..............
It's what switches the icon's src. Obviously, it's set up for that demo,
with its folder images ('folder.gif', 'folderopen.gif'). You'll need to
change it for those new pix:
node1.src = (/plus/.test(node1.src)) ?
node1.src.replace(/plus/, 'minus') :
node1.src.replace(/minus/, 'plus');
Just guessing that the other image is
'http://www.olespace.com/gfx/minus.gif'. Also - this CSS should be...
.preload {
background-image: url( http://www.olespace.com/gfx/minus.gif);
}
...as it's designed solely to preload the alternate image. hth
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it! This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Michael Skind |
last post by:
Hello,
I use a simple Table :
<TABLE>
<TR 1>
<TD></TD>
</TR>
<TR 2>
<TD></TD>
</TR>
|
by: Mad Scientist Jr |
last post by:
Through messing around I got IE6 (win xp) to show/hide a table row.
I gave my <TR> an ID of "trRow" and
trRow.style.display='none';
hides it
trRow.style.display='block';
displays it (will any...
|
by: MOHSEN KASHANI |
last post by:
Hi,
I am trying to hide some form elements in a form by default and show/hide
depending on which radio button is clicked. This is what I have but it is
not working:
<head>
<style>
..noshow {...
|
by: jimstruckster |
last post by:
I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to...
|
by: michael941 |
last post by:
Hi,
I have 2 tables in an html page. I have div them separately and id them
as id1 and id2. I have a link there. What I need is click the link to
hide one table and show the other and verse when...
|
by: pamate |
last post by:
hi,
I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers.
...
|
by: Liquidtouch |
last post by:
I have been searching on this for awhile and cant find anything and playing around with it got me no where. I will start with what I am after and then explain what I have.
I have a table with 3...
|
by: oranoos3000 |
last post by:
hi
would you please help me
i have a online shopping center that i show pictures of the my product in home page.
in the InterExplorer pictures is shown correctly but in Firefox browser is shown...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
| |
