[WSG] hiding content with a click
I've been searching for some simple instructions on how to create a link that says hide content and it will remove a section of text from the page. The layout uses some tables (XHTML Transitional), so it would have to hide three tr's and shift the content below it up. Can somebody please instruct me on a standards-based way of doing this? Thanks. -- ~john _ Dr. Zeus Web Design http://www.DrZeus.net content without clutter ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hiding content with a click
On 5/9/05, john [EMAIL PROTECTED] wrote:
create a link that says hide content and it will remove a section
of text from the
page. The layout uses some tables (XHTML Transitional), so it would
have to hide three tr's and shift the content below it up.
Can somebody please instruct me on a standards-based way of doing this?
Quick version, will hide all tr's with a class of 'hide'. Class
attribute may be a space seperated list also, as this script allows
for that.
a href= onclick=hideStuffhide content/a
script type=text/javascript
function hideStuff() {
tr = document.getElementsByTagName('tr');
for(i=0; itr.length; i++ ) {
if( tr[i].className.indexOf('hide')) {
tr[i].display = 'none';
}
}
}
/script
hth,
Andrew.
http://leftjustified.net/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] hiding content with a click
Use onclick to set the ID of the relevant rows to display:none; or something along these lines. There's no way that I'm aware of to remove this content without _javascript_, short of doing server-side processing. On Mon, 2005-05-09 at 11:42 +0100, john wrote: I've been searching for some simple instructions on how to create a link that says hide content and it will remove a section of text from the page. The layout uses some tables (XHTML Transitional), so it would have to hide three tr's and shift the content below it up. Can somebody please instruct me on a standards-based way of doing this? Thanks. Kind Regards, Joshua Street Website: http://www.base10solutions.com.au/ Phone: (02) 9898-0060 Fax: (02) 8572-6021 Mobile: 0425 808 469 E-mails and any attachments sent from base10solutions are to be regarded as confidential. Please do not distribute or publish any of the contents of this e-mail without the senders consent. If you have received this e-mail in error, please notify the sender by replying to the e-mail, and then delete the message without making copies or using it in any way. Although base10solutions takes precautions to ensure that e-mail sent from our accounts are free of viruses, we encourage recipients to undertake their own virus scan on each e-mail before opening, as base10solutions accepts no responsibility for loss or damage caused by the contents of this e-mail. attachment: b10s-logo.png
Re: [WSG] hiding content with a click
You could employ the same concept that makes this http://webdesign.parkertorrence.com/designtest/peekaboo.php page work. Parker Unfolded WebDesign http://webdesign.parkertorrence.com On 5/9/05, john [EMAIL PROTECTED] wrote: I've been searching for some simple instructions on how to create a link that says hide content and it will remove a section of text from the page. The layout uses some tables (XHTML Transitional), so it would have to hide three tr's and shift the content below it up. Can somebody please instruct me on a standards-based way of doing this? Thanks. -- ~john _ Dr. Zeus Web Design http://www.DrZeus.net content without clutter ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hiding content with a click
Ooops! I really shouldn't leave things half-baked like that.
If the link in question doesn't do anything without javascript, it is
a wise idea to have it written to the page using js as well.
We don't want any orphan UI elements, do we ;)
And I even tested this one :]
//let the code begin
!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
titleHide Content Test/title
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
script type=text/javascript
function hideStuff() {
var tr = document.getElementsByTagName('tr');
for(var i=0; itr.length; i++ ) {
if(tr[i].className == 'hide') {
tr[i].style.display = 'none';
}
}
return false;
}
function addHideLink() {
var link = document.createElement('a');
link.setAttribute('onclick', 'hideStuff()' );
link.setAttribute('href', '#');
link.appendChild(document.createTextNode('Hide Content'));
var parent = document.getElementById('hold');
parent.appendChild(link);
}
window.onload = addHideLink;
/script
/head
body
div id=hold/div
table
tbody
tr
tdfoo/tdtdbar/td
/tr
tr
tdfoo/tdtdbar/td
/tr
tr class=hide
tdThis one's gonna go/tdtd:)/td
/tr
tr
tdfoo/tdtdbar/td
/tr
tr class=hide
td..and/tdtdthis one/td
/tr
/tbody
/table
/body
/html
This is a pretty rough example with poorly written scripts (ie: the
class names, id's and function to be attached to the created element
should be passed as var's), but it works and it gives you something
you can improve on.
Cheers,
Andrew.
http://leftjustified.net/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
