Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > show/hide a table row

Reply
Thread Tools

show/hide a table row

 
 
oLE
Guest
Posts: n/a
 
      12-13-2004
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
 
Reply With Quote
 
 
 
 
WindAndWaves
Guest
Posts: n/a
 
      12-13-2004

"oLE" <(E-Mail Removed)> wrote in message
news:41bd6537$0$317$(E-Mail Removed).. .
> 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...


 
Reply With Quote
 
 
 
 
RobB
Guest
Posts: n/a
 
      12-13-2004
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

 
Reply With Quote
 
oLE
Guest
Posts: n/a
 
      12-13-2004
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
 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      12-13-2004
On Mon, 13 Dec 2004 09:47:49 +0000, oLE <(E-Mail Removed)> 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.
 
Reply With Quote
 
oLE
Guest
Posts: n/a
 
      12-13-2004
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
 
Reply With Quote
 
RobB
Guest
Posts: n/a
 
      12-13-2004
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(E-Mail Removed)">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.

 
Reply With Quote
 
oLE
Guest
Posts: n/a
 
      12-14-2004
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(E-Mail Removed)">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
 
Reply With Quote
 
oLE
Guest
Posts: n/a
 
      12-14-2004
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(E-Mail Removed)">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
 
Reply With Quote
 
RobB
Guest
Posts: n/a
 
      12-14-2004
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(E-Mail Removed)">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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Copy a row from Table A to position 0 in Table B dave@softwareonline.com ASP .Net 1 03-24-2008 08:14 PM
row bottom border in inner table not matching up with row border in outer table phl HTML 1 06-08-2006 03:43 PM
ie6 Insert Row at specific Row Index of Table Giggle Girl Javascript 18 02-07-2006 07:54 AM
ok I can do a totals row but how about a percentage row after each data row D ASP .Net Datagrid Control 0 05-23-2005 04:10 PM
Can center row in three row table take up remaining space? Anon HTML 2 03-18-2005 08:35 AM



Advertisments