Javascript the easy way

Posted on February 2nd, 2007 in Blogging by abdallah

I have mentioned before that I don’t like Javascript. I’ll be honest about the reasons. Some may say it’s not safe or that the code is too permissive… whatever! I say I’m too lazy to learn it the way I like to learn a normal language, and I feel I have too many bits and bytes that I have to search for in an endless chaos to find the right docs.
Anyway, I finally found the easy way out. I had previously thought I did, when I found the prototype library. It was a nice one, and still is. However, it’s lacking a good documentation. But now, I found an even better solution: the jQuery library. You might take a look at their site, it’s quite loaded with features and docs, even plugins that help a lazy old programmer do new tricks.
One thing I made using jQuery is the following

[ javascript Code ]
  1.  
  2. <script type="text/javascript">
  3.         $(document).ready(function(){
  4.             $("a.morelnk").click(function(){$("#mo"+this.id).toggleClass("more");return true;});
  5.             $("#listing").corner();
  6.         });
  7.         </script>‘;
[ php Code ]
  1.  
  2. // snippet
  3. while ( $row = mysql_fetch_assoc($res) ) {
  4.         if ( $row_num % 2 == 0 ) {
  5.             $table .= ‘<tr class="lineBottom" class="even" id="row_’.$row_num.‘">’;
  6.         } else {
  7.             $table .= ‘<tr class="lineBottom" id="row_’.$row_num.‘">’;
  8.         }
  9.         $table .= ‘<td>’.$row[‘ID’].‘</td>’;
  10.         $table .= ‘<td  colspan=3 class="actions">’;
  11.         $table .= ‘<a href="#" class="morelnk" id="re_’.$row_num.‘" >…</a>’;
  12.         $table .= ‘</td>’;
  13.         $table .= ‘</tr>’;
  14.         $table .= ‘<tr class="more lineBottom bgGreen" id="more_’.$row_num.‘">’;
  15.         $table .= ‘<td class="lineRight">more information …</td>’;
  16.         $table .= ‘</tr>’;
  17.        
  18.         $row_num += 1;
  19.     }
[ css Code ]
  1.  
  2. /* snippet */
  3. .more {
  4.     display: none;
  5. }

Post a comment

You must be logged in to post a comment.