#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. User Avatar
    Nick P.
    Permalink to comment#

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

  2. User Avatar
    Toni Lähdekorpi
    Permalink to comment#

    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.

    • User Avatar
      Curtis Scott
      Permalink to comment#

      Thanks for that tid-bit of info, great explanation!

  3. User Avatar
    Rafael Nascimento Sampaio
    Permalink to comment#

    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. User Avatar
    Rafael Nascimento Sampaio
    Permalink to comment#

    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. =(

    • User Avatar
      Chris Coyier
      Permalink to comment#

      You write an WordPress plugin for ajax comment submitting and I’ll be your first tester =)

    • User Avatar
      Toni Lähdekorpi
      Permalink to comment#

      Why don’t you make a screencast showing how to make plugins, and do it that way? ;)

      (+ there already are AJAX comment plugins for WP)

  5. User Avatar
    Curtis Scott
    Permalink to comment#

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

  6. User Avatar
    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. User Avatar
    Gustavo Bordoni
    Permalink to comment#

    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. User Avatar
    Ben
    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;
    }
    • User Avatar
      Ben
      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. User Avatar
    Kenny V
    Permalink to comment#

    Great everything on this site!!!

  10. User Avatar
    Bboy

    Wow amazing tricks :) Thanks you..

  11. User Avatar
    Kyle Bradley
    Permalink to comment#

    The url changed for the markup examples (Forrst Thread on Table Markup Loops)
    http://zurb.com/forrst/posts/Table_Markup_Loops-hNh

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag