Javascript Hell |
Javascript Hell |
Doyley |
Apr 4 2007, 01:02 PM
Post
#1
|
Member Group: Members Posts: 37 Joined: 4-April 07 Member No.: 2,429 |
Hi all,
I've been trying to learn some Javascript but I am pretty awful. I have been adding some stuff to a page at http://www.poolpockets.co.uk/eventsmain.ph...d=2669&bp=1 What I would like to do next is hide all rows from "Tournament Format" down to and including "Cash Prize Fund" unless tournament is selected from the radio buttons at the top. I've tried a few things but can't get anything to work. Does anybody have any ideas? Cheers!! |
Christian J |
Apr 4 2007, 02:16 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
If you insert a DIV element with the CLASS name "toggle" inside each table cell you want to toggle, like this:
CODE <td><div class="toggle">content</div></td> you might use something like this script (note the additions in checkit1): CODE function toggle(display_value) { var div=document.getElementsByTagName('div'); for(var i=0; i<div.length; i++) { if(div[i].className=='toggle') { div[i].style.display=display_value; } } } function checkit1(){ for (i=0;i<document.events.etype.length;i++) { if (document.events.etype[i].checked) { user_input = document.events.etype[i].value; } } if(user_input=='1'){ document.events.funeventtype.disabled=false; document.events.funeventtype.selectedIndex='Please Select'; toggle('none'); } else{ document.events.funeventtype.disabled=true; document.events.funeventtype.value=''; toggle('block'); } }// END FUNCTION To hide the cells when the page loads you also need the following after the HTML table: CODE <script type="text/javascript"> toggle('none'); </script> The reason I toggle DIV elements and not the cells themselves is because the latter seems to be buggy in Firefox and Opera. ------- You may also want to fix the validator errors: http://www.htmlhelp.com/cgi-bin/validate.c...d=2669&bp=1 |
Doyley |
Apr 5 2007, 03:23 AM
Post
#3
|
Member Group: Members Posts: 37 Joined: 4-April 07 Member No.: 2,429 |
If you insert a DIV element with the CLASS name "toggle" inside each table cell you want to toggle, like this: CODE <td><div class="toggle">content</div></td> you might use something like this script (note the additions in checkit1): CODE function toggle(display_value) { var div=document.getElementsByTagName('div'); for(var i=0; i<div.length; i++) { if(div[i].className=='toggle') { div[i].style.display=display_value; } } } function checkit1(){ for (i=0;i<document.events.etype.length;i++) { if (document.events.etype[i].checked) { user_input = document.events.etype[i].value; } } if(user_input=='1'){ document.events.funeventtype.disabled=false; document.events.funeventtype.selectedIndex='Please Select'; toggle('none'); } else{ document.events.funeventtype.disabled=true; document.events.funeventtype.value=''; toggle('block'); } }// END FUNCTION To hide the cells when the page loads you also need the following after the HTML table: CODE <script type="text/javascript"> toggle('none'); </script> The reason I toggle DIV elements and not the cells themselves is because the latter seems to be buggy in Firefox and Opera. ------- You may also want to fix the validator errors: http://www.htmlhelp.com/cgi-bin/validate.c...d=2669&bp=1 That works like a dream. Many thanks for your time!! |
Lo-Fi Version | Time is now: 27th April 2024 - 01:58 AM |