Flow chart1

by basmaat

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.2-all-min.js"></script>
<h1>Pimp Your Tables with CSS3</h1>
            
            <h2>Table Style 1</h2>
            
            <table class="table1">
                <thead>
                    <tr>
                        <th></th>
                        <th scope="col" abbr="Starter">Smart Starter</th>
                        <th scope="col" abbr="Medium">Smart Medium</th>
                        <th scope="col" abbr="Business">Smart Business</th>
                        <th scope="col" abbr="Deluxe">Smart Deluxe</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th scope="row">Price per month</th>
                        <td>$ 2.90</td>
                        <td>$ 5.90</td>
                        <td>$ 9.90</td>
                        <td>$ 14.90</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <th scope="row">Storage Space</th>
                        <td><a id='flow1' class='multi-line-button' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a></td>
                        <td>1 GB</td>
                        <td>2 GB</td>
                        <td>4 GB</td>
                    </tr>
                    <tr>
                        <th scope="row">Bandwidth</th>
                        <td>50 GB</td>
                        <td>100 GB</td>
                        <td><a id='flow2' class='multi-line-button' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a></td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">MySQL...

CSS

/* Table 1 Style */
table.table1{
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    font-style: normal;
    border-collapse:separate;
}
.table1 thead th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(123,192,67)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(158,217,41))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(123,192,67) 2%,
        rgb(139,198,66) 51%,
        rgb(158,217,41) 87%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.table1 thead th:empty{
    background:transparent;
    border:none;
}
.table1 tbody th{
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    background-color:#9DD929;
    border:1px solid #93CE37;
    border-right:3px solid #9ED929;
    padding:0px 10px;
    background:-webkit-gradient(
        linear,
        left bottom,
        right top,
        color-stop(0.02, rgb(158,217,41)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(123,192,67))
        );
    background: -moz-linear-gradient(
        left bottom,
        rgb(158,217,41) 2%,
        rgb(139,198,66) 51%,
        rgb(123,192,67) 87%
        );
    -moz-border-radius:5px 0px 0px 5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table1 tfoot td{
    color: #9CD009;
    font-size:32px;
    text-align:center;
    padding:10px 0px;
    text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
    color:#666;
}
.table1 tbody td{
   ...

JavaScript

jsPlumb.connect({source: $('#flow1'), target: $("#flow2"), 
                 endpoint:"Rectangle",
                 connector:"Flowchart",
              //   anchors:["BottomCenter", "TopCenter"]
                  anchors:["AutoDefault", "TopCenter"]
                 });

jsPlumb.connect({source: $('#flow2'), target: $("#flow3"), 
                 endpoint:"Rectangle",
                 connector:"Flowchart",
                 anchors:["BottomCenter", "AutoDefault"]
              //    anchors:["AutoDefault", "AutoDefault"]
                 });