Grow your CSS skills. Land your dream job.

#92: Code Walkthrough of Drawing Table

The Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many features to make this as easy and useful as possible. In this screencast we walk through the existing code looking at the finished example, the markup, and the JavaScript powering that it - feature by feature.

Links from Video:

Comments

  1. Nick P.
    Permalink to comment#

    Can’t watch video :( Corrupted file???

  2. There are actually multiple reasons for the image blocking in most webmails.
    The most important is blocking information gathering, for example: A spammer spams people with an email that contains an image located in your server (http://example.com/uniqueid.jpg). Now, when the user reads the email, if the image is not blocked, the spammer can confirm that the email address is in use, and if the image is not passed through a proxy, your IP and browser are also passed to the spammer.
    This would make “brute force” emailing to aaaa@gmail.com-zzzz@gmail.com really easy.

  3. The block happens cuz some developers put img tags with the src atribute point to a script that is executed if the image link are loaded.

  4. U really should make your comments form be submitted by ajax, now I have to browse in the video to get where I was to keep watching the video. =(

  5. This is amazing Chris! I wish I could just create little apps like this, I really need to brush up on my js. =)

  6. aboleo
    Permalink to comment#

    Your Videos aren’t working for me on Opera 10.63
    Since your redesigning i have had a lot of trouble with your site so far.

    Would you just fix the Video issue on Opera?

  7. Would be good to create a PHP/jQuery code that transform a image on a table, like 1px each cell to make it just like the image, what do you think?

  8. Permalink to comment#

    For the tablebuild function, maybe this is faster. I’ve created td cells once instead of creating it every time from scratch during the cols loop. The cols loop then accesses the cached var. Here’s my (untested) example.

    function buildTable(rows=20,cols=20){
    
        //first build one horizontal line (row)
        var hor = ' ';
        for(i=1;i<rows;i++){
           hor = hor + ' '; 
        }
    
        //next build the columns and attach the rows to each
        var vert = '';
        for(i=1;i<cols;i++){
           vert = vert + '' + hor + ''; 
        }
    
    	//entire cell structure
     	return vert;
    }
    • Permalink to comment#

      There are some tags missing in the snippet above.
      Should’ve been:

      hor = hor + ‘<td></td>';

      and

      vert = vert + ‘<tr> + hor + </tr>';

  9. Kenny V
    Permalink to comment#

    Great everything on this site!!!

  10. Wow amazing tricks :) Thanks you..

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".