vForums Support > Programming & Coding :: Code Requests & Support :: > [F] Toggle Effect {Help Plz} [F]
[F] Toggle Effect {Help Plz} [F] - Posted By dog199200 (dog199200) on 25th Nov 08 at 8:33am
OK do to my forum being an rp I am using the Additional Profile Options feature for role play stats, do to this it causes the mini-profile to stretch, and well I got the idea, why not add a toggle effect , so I did and I have came across one big problem...

The toggle effect work perfectly fine when you use it in the Profile page, but when you got to a thread and you go to use it it will only toggle for the very first person in that page of the thread as you can see here {Smile}

http://fmaworldsapart.vforums.co.uk/board/VideoGames/topic/221/action/view_topic/worst-games-of-2008#reply-9

Here is the javascript code I am using:

Code:
Select All
 
  1. <script>
  2. function swapRows(rowId){
  3.  var persist = document.getElementById(rowId).style.display;
  4.  for(i=0;i<arguments.length;i++)
  5.       document.getElementById(arguments[i]).style.display = (persist=="none")?"block":"none";
  6. }
  7. </script>
 


And here is the code for the mini-profile:

Code:
Select All
 
  1. <center>
  2. <table width="115" id="mini_profile" cellpadding="0" cellspacing="0" border="1">
  3. <tr>
  4.  
  5. <td class="window1" align="center">{display_name}</td>
  6.  
  7. </tr>
  8. <tr>
  9.  
  10. <td class="window1" align="center">
  11.  
  12. <script>
  13. var a = /(Administrator|Super-Mod|Moderator|Guest Account)/;
  14. var rank = '<br />{rank_name}<br />';
  15. if(rank.match(a)){
  16.     document.write('{rank_image}<br />');
  17. }else{
  18.     document.write('{rank}<br />');
  19. }
  20. </script>
  21.  
  22. {if:secondrygroup}{secondrygroup_image}<br />{/if:secondrygroup}
  23.  
  24. </td>
  25. </tr>
  26. <tr>
  27. <td class="window1" align="center">
  28.  
  29. <script type="text/javascript">
  30. assign_rank('{display_name}', '{posts}');
  31. </script>
  32.  
  33. </td>
  34. </tr>
  35.  
  36. {if:warning}
  37. <tr>
  38. <td class="window1" align="center">{warning}<br /></td>
  39. </tr>
  40. {/if:warning}
  41.  
  42. {if:custom_title}
  43. <tr>
  44. <td class="window1" align="center">{custom_title}{/if:custom_title}</td>{ifnot:custom_title}<font color=#000000></font>
  45. </tr>
  46.  {/ifnot:custom_title}
  47. </table>
  48. <br>
  49. <table width="115">
  50. <tr>
  51. <td align="center">
  52.  
  53. {if:avatar}
  54. {avatar}
  55. {/if:avatar}
  56.  
  57. {ifnot:avatar}
  58. <img src="http://i25.photobucket.com/albums/c51/dog199200/no-av.gif">
  59. {/ifnot:avatar}
  60.  
  61. </td>
  62. </tr>
  63. <tr>
  64.  
  65. <td align="center">{personal_text}</td>
  66.  
  67. </tr>
  68. </table>
  69. <br>
  70. <table width="115" id="mini_profile" cellpadding="0" cellspacing="0" border="1">
  71.  
  72. <tr>
  73. <td class="window1">Posts: {posts}</td>
  74. </tr>
  75. <tr>
  76. <td class="window1">
  77.  
  78. {if:online}
  79. Status: <b><font color=blue>Online</font></b>
  80. {/if:online}
  81. {ifnot:online}
  82. Status: <font color=red>Offline</font>
  83. {/ifnot:online}
  84.  
  85. </td>
  86. </tr>
  87. <tr>
  88. <td class="window1">
  89.  
  90. {if:gender}Gender: {gender}{/if:gender}
  91.  
  92. </td>
  93. </tr>
  94. <tr>
  95. <td>
  96.  
  97. <span style="float: left;">
  98. Rep: {reputation} 
  99. </span>
  100.  
  101. <span style="float: right;">
  102. {if:reputation_give}
  103. <font size=1>Give -</font>
  104. {/if:reputation_give}
  105.  
  106. {if:reputation_take}
  107. <font size=1> Take</font>
  108. {/if:reputation_take}
  109. </span>
  110.  
  111. </td>
  112. </tr>
  113. </table><br  />
  114.  
  115. <table width="115" cellpadding="0" cellspacing="0" border="1">
  116. <th onClick="swapRows('data1');return true" class="title1">~ Forum Data ~</th>
  117. <tr>
  118. <td class="window1" ID="data1" align="center">
  119.  
  120. {additional_info}
  121.  
  122. </td>
  123. </tr>
  124. </table>
  125.  
  126. <br />
  127.  
  128. {contact}
  129.  
  130. <br /> 
  131.  
  132. <script>
  133. var a = '{display_name}';
  134. var x = (a.match(/view_profile\/user\/(.+?)(\/|"|\/")/))?RegExp.$1 : '';
  135. if(x != vf_username){
  136.     document.write('<a href="/action/add_buddy/user/'+x+'">Add to Buddies</a>');
  137. }
  138. </script>
  139. </center>
 


Now with all the information is, can someone please help me fix the code so that it will work per person, as well can you make it so that the table starts up instead of down, so they gave to click to display the stats.
Re: Toggle Effect {Help Plz} - Posted By dog199200 (dog199200) on 28th Nov 08 at 9:18pm
bump
Re: Toggle Effect {Help Plz} - Posted By Marc (cr0w) on 28th Nov 08 at 10:15pm
An ID is an attribute that must be different for each element it is attached to. The reason it's only working for the first instance of "data1" is because ID's are only meant to be attached to one element.

To get this to work you'll need to change the ID's to classes, loop through all the TD's, find the ones with the class you're searching for, and change the visibility for all of them. {Smile}
Re: Toggle Effect {Help Plz} - Posted By dog199200 (dog199200) on 28th Nov 08 at 11:25pm
OK i'll do that last, first I want to fix a small problem

Updated Table Code With Toggle:

Code:
Select All
 
  1. <table width="115" cellpadding="0" cellspacing="0" border="1">
  2. <tr colspan"1" align="center">
  3. <td onClick="swapRows('data1');" class="title1">~ Forum Data ~</td>
  4. </tr>
  5.  
  6. <tr ID="data1" colspan"2">
  7. <td class="window1" align="center">
  8.  
  9. {additional_info}
  10.  
  11. </td>
  12. </tr>
  13. </table>
 


I edited that from the code above and i got it a little bit closer, but now I get this:

Image

Seems as if the cell doesnt span over enough, but I have tried to fix it and yet nothing helps that, I want to get that fixed before I edit the JS file and it ends up making things worse {Tongue Out}
Re: Toggle Effect {Help Plz} - Posted By Dreg[Bot] (dregondrahl) on 29th Nov 08 at 1:29am
havnt tested this but try

GLOBAL hEADDER

Code:
Select All
 
  1. <style>
  2. .mp_hide {
  3.     display:none;
  4. }
  5. </style>
  6.  
  7.  
  8. <script>
  9. function moo(s){
  10.     if(s.parentNode.nextSibling.className == 'mp_show'){ 
  11.         s.parentNode.nextSibling.className = 'mp_hide' 
  12. } else { 
  13.  s.parentNode.nextSibling.className = 'mp_show';
  14.     }
  15. }
  16. </script>
  17.  
  18.  
 




MP template

Code:
Select All
 
  1. <table width="115" border="1" cellpadding="0" cellspacing="0">
  2. <tbody>
  3. <tr>
  4. <th onclick="moo(this);">~ Forum Data ~</th>
  5. </tr>
  6. <tr class='mp_show'>
  7. <td class="window1" id="data1" align="center">
  8. Level: 8.3
  9. <br>Money: 438
  10. <br>Jobs Done: 0
  11. <br>Contests Won: 0</td>
  12. </tr>
  13. </tbody>
  14. </table>
  15.  
  16.  
 



eidt: just to stop strethcing ^^
Re: Toggle Effect {Help Plz} - Posted By dog199200 (dog199200) on 29th Nov 08 at 1:49am
{Tongue Out} It works, and I recognize that code, quick and simple, dont wnat to code it so revert to proboards and convert right {Smile} Well thank you
Re: [F] Toggle Effect {Help Plz} [F] - Posted By Dreg[Bot] (dregondrahl) on 29th Nov 08 at 3:35am
ermm...no its not from PB, i just wrote it up in while on firebug on your forum. there was no such code {Tongue Out} its just common JS knowledge ^^

Notice i just used moo() {Tongue Out}
Re: [F] Toggle Effect {Help Plz} [F] - Posted By dog199200 (dog199200) on 29th Nov 08 at 5:02am
i've seen this before:

# if(s.parentNode.nextSibling.className == 'mp_show'){
# s.parentNode.nextSibling.className = 'mp_hide' } else { s.parentNode.nextSibling.className = 'mp_show';
# }

I just don't know where, maybe something you could of coded for proboards, possibly your mini-profile background mod
Re: [F] Toggle Effect {Help Plz} [F] - Posted By Dreg[Bot] (dregondrahl) on 29th Nov 08 at 10:46am
must be just the name mp_hide and mp_show or something {Tongue Out} its the way i name Miniprofile classes XD