Y星人の工作語錄

別理我, 我只是一個愛發勞騷的Y星人

7月
01

a Quiz - click td rows, change th(no)+td(answer) background and radio checked.

Posted by YuanYuan under jQuery, javascript

a Quiz form,

I want to user to click td rows and choose their right answer not click radio buttons.
and I chage no background tell user, they had choose the answer.

so I do wrtie this code.

This sample have some fun, the answer not alaway 4 items, maybe some 3 items.

  1. th.selected {background:#EAEAEA;}
  2. td.selected {background:#336699;}
  3. td.selected label.selected {font-weight:bold; color:#fff}
  1. <table cellspacing="0" id="ansTable">
  2. <tbody id="content">
  3. <tr class="statement5">
  4.     <th style="width: 2%;">
  5.         <label>1</label>
  6.     </th>
  7.     <td>
  8.         <input name="seq1" tabindex="1" value="A" type="radio"><label for="seq1">A</label>
  9.     </td>
  10.     <td>
  11.         <input name="seq1" tabindex="2" value="B" type="radio"><label for="seq1">B</label>
  12.     </td>
  13.     <td>
  14.         <input name="seq1" tabindex="3" value="C" type="radio"><label for="seq1">C</label>
  15.     </td>
  16.     <td>
  17.         <input name="seq1" tabindex="4" value="D" type="radio"><label for="seq1">D</label>
  18.     </td>
  19. </tr>
  20. <tr class="statement5">
  21.     <th style="width: 2%;">
  22.         <label>2</label>
  23.     </th>
  24.     <td>
  25.         <input name="seq2" tabindex="1" value="A" type="radio"><label for="seq2">A</label>
  26.     </td>
  27.     <td>
  28.         <input name="seq2" tabindex="2" value="B" type="radio"><label for="seq2">B</label>
  29.     </td>
  30.     <td>
  31.         <input name="seq2" tabindex="3" value="C" type="radio"><label for="seq2">C</label>
  32.     </td>
  33.     <td>
  34.         <input name="seq2" tabindex="4" value="D" type="radio"><label for="seq2">D</label>
  35.     </td>
  36. </tr>
  37. <tr class="statement5">
  38.     <th style="width: 2%;">
  39.         <label>3</label>
  40.     </th>
  41.     <td>
  42.         <input name="seq3" tabindex="1" value="A" type="radio"><label for="seq3">A</label>
  43.     </td>
  44.     <td>
  45.         <input name="seq3" tabindex="2" value="B" type="radio"><label for="seq3">B</label>
  46.     </td>
  47.     <td>
  48.         <input name="seq3" tabindex="3" value="C" type="radio"><label for="seq3">C</label>
  49.     </td>
  50.     <td>
  51.         <input name="seq3" tabindex="4" value="D" type="radio"><label for="seq3">D</label>
  52.     </td>
  53. </tr>
  54. <tr class="statement5">
  55.     <th style="width: 2%;">
  56.         <label>4</label>
  57.     </th>
  58.     <td>
  59.         <input name="seq4" tabindex="1" value="A" type="radio"><label for="seq4">A</label>
  60.     </td>
  61.     <td>
  62.         <input name="seq4" tabindex="2" value="B" type="radio"><label for="seq4">B</label>
  63.     </td>
  64.     <td>
  65.         <input name="seq4" tabindex="3" value="C" type="radio"><label for="seq4">C</label>
  66.     </td>
  67.     <td>
  68.         <input name="seq4" tabindex="4" value="D" type="radio"><label for="seq4">D</label>
  69.     </td>
  70. </tr>
  71. <tr class="statement5">
  72.     <th style="width: 2%;">
  73.         <label>5</label>
  74.     </th>
  75.     <td>
  76.         <input name="seq5" tabindex="1" value="A" type="radio"><label for="seq5">A</label>
  77.     </td>
  78.     <td>
  79.         <input name="seq5" tabindex="2" value="B" type="radio"><label for="seq5">B</label>
  80.     </td>
  81.     <td>
  82.         <input name="seq5" tabindex="3" value="C" type="radio"><label for="seq5">C</label>
  83.     </td>
  84.     <td>
  85.         <input name="seq5" tabindex="4" value="D" type="radio"><label for="seq5">D</label>
  86.     </td>
  87. </tr>
  88. </tbody>
  89. </table>
  1. $("#ansTable tr td:has(:radio)").click(function(event) {
  2.  
  3.     $(this).closest('tr').find("td").removeClass();
  4.  
  5.     $(this).addClass('selected');
  6.     $(this).parent().find("th").addClass('selected')
  7.     $(this).find('label').addClass('selected');
  8.     $(this).find(':radio').attr('checked', true);
  9.  
  10. });
Tags:
ADD COMMENTS
6月
25

How multi radiobox groups check?

Posted by YuanYuan under jQuery

I need multi radiobox groups check to do something, but I can’t find good soulution with jQuery.
So, I try to do this.

  1. <form id="form82" name="form82">
  2.  <div id="pagiTable">
  3.     <table cellspacing="0" id="ansTable">
  4.     <tbody>
  5.  
  6.         <tr>
  7.             <th>1</label></th>
  8.             <td class="col201"><input name="Field1" id="Field1a" type="radio" tabindex="1" value="A" /></td>
  9.             <td><label for="Field1a">我很努力工作</label></td>
  10.             <td class="col201"><input name="Field1" id="Field1b" type="radio" tabindex="2" value="J" /></td>
  11.             <td><label for="Field1b">我不情緒化</label></td>
  12.         </tr>
  13.         <tr class="alt">
  14.             <th><label for="Field2">2</label></th>
  15.             <td class="col201"><input name="Field2" id="Field2a" type="radio" tabindex="3" value="B" /></td>
  16.             <td><label for="Field2a">我是一個好的領導者</label></td>
  17.             <td class="col201"><input name="Field2" id="Field2b" type="radio" tabindex="4" value="I" /></td>
  18.             <td><label for="Field2b">我會把我的工作處理的很有條理</label></td>
  19.         </tr>
  20.         <tr>
  21.             <th><label for="Field1">3</label></th>
  22.             <td class="col201"><input name="Field3" id="Field3a" type="radio" tabindex="5" value="C" /></td>
  23.             <td><label for="Field3a">我常冒險</label></td>
  24.             <td class="col201"><input name="Field3" id="Field3b" type="radio" tabindex="6" value="H" /></td>
  25.             <td><label for="Field3b">處理事務時，我對每個細節都很注意</label></td>
  26.         </tr>
  27.     </tbody>
  28.     </table>
  29.  
  30.         <div>
  31.             <input id="intRecordGrid" type="hidden" value="000ia425k6uiumsv" time="15" name="intRecordGrid" />
  32.             <input id="saveForm" name="saveForm" class="btTxt submit" type="button" value="完成.送出" onclick="validate_form()" />
  33.         </div>
  34. </div>
  35. </form>

I try to

Older javascript way.

  1. <script language=javascript type="text/javascript">
  2.     function rdoChk(o) {
  3.         var e = eval(o);
  4.  
  5.         for (i = 0; i < e.length; i++) {
  6.             if (e[i].checked) {
  7.                 return i;
  8.                 alert(e[i].value)
  9.             }
  10.         }
  11.         return -1;
  12.  
  13.     }
  14.  
  15.     function check() {
  16.  
  17.         var p = '';
  18.         var pp = '';
  19.         var c = 0;
  20.  
  21.         for (var i = 1; i < 4; i++) {
  22.  
  23.             var f = 'document.form82.Field' + i;
  24.             var g = rdoChk(f);
  25.  
  26.             if (g == -1) {
  27.                 p += i + '/';
  28.                 c += 1;
  29.             }
  30.             pp += g + '|'
  31.  
  32.         }
  33.  
  34.         if (c > 0) {
  35.             alert('第 ' + p + ' 題沒有選擇答案喔!');
  36.         }
  37.         else {
  38.  
  39.             alert('你答完了, 辛苦了!!!');
  40.  
  41.         }
  42.  
  43.     }
  44. </script>

jQuery way.

  1. function validate_form (){
  2.  
  3. // check radio type & length
  4. var count = 0;
  5. var names = [];
  6.   $('input[name^=Field]').each(function(i, v) {
  7.       if ($.inArray(v.name, names) == -1) {
  8.               names.push(v.name);
  9.               count += 1;
  10.             }
  11.       });
  12.  
  13. var r_len =  count;
  14.  
  15. var which = '';
  16. var what  = '';
  17. var valid = true;
  18.  
  19.     for (var i=0; i < r_len; i++){
  20.  
  21.         if ($('input[name='+names[i]+']:checked').length == 0 ){
  22.             which += (i+1) + ' '
  23.             valid = false;
  24.         }
  25.         else
  26.         {
  27.             var val = $('input[name=' + names[i]+ ']:checked').val();
  28.             what += (i+1) +'-' + val + ', ' ;
  29.         }
  30.     }
  31.     if (!valid){
  32.         alert('第 ' + which + ' 題沒有選擇答案喔!');
  33.         }
  34.         else {
  35.             alert(what + "\r恭喜你! 辛苦了.");
  36.         }
  37. }
  38. </script>

maybe some good solution…

Tags:
1 COMMENT
5月
14

javascript’s super Chart - Highcharts and IE6’s problem solution.

Posted by YuanYuan under javascript

when I try use Highcharts, I cann’t see any graphics in IE6 but text only and behavior work fine.

highcharts

all works fine with Firefox 3.6+, chrome…, IE7, IE8..
but not works well with IE6sp3, only show text no any graphics.

I don’t know why?

But I find solution. just Enabled VML.

regsvr32 "%CommonProgramFiles%\Microsoft Shared\VGX\vgx.dll

this info from Here!

for some reason, $M disabled VML in IE6. so…
if you want IE6 user to see VML or Canvas function, you must to do this.

why $M disabled VML with IE ?
TW-CA-2006-104-[TA06-262A:　Microsoft Internet Explorer VML Buffer Overflow (Update)]

that’s it.

Tags:
2 COMMENTS
1 / 19612345>»