SVG + jQuery Tube and Cylinder bar graph

Today I wrote a piece of javascript to create a certain style of tube-cylinder graphs. See image below to check what they look like:

See my site for real life demo!: http://www.audenaerde.org/svgcylinder/

Override image src in css

There is a solution that I found out today (works in IE6+, FF, Opera):

<img src=”tiger.png” style=”width:0px; height:0px; padding: 50px; background: url(butterfly.png);”>

How it works:

- The image is shrunk until no longer visible by the width & height.
- Then, you need to ‘reset’ the image size; there I use padding (this
one gives a 16×16 image, of course you can use padding-left /
padding-top to make rectangular images)
- Finally, the new image is put there using background

It also works for submit-input-images, they stay clickable.

See: http://www.audenaerde.org/csstricks.html

Enjoy!

Unobtrusive table column resize with jquery, as plugin [and google code]

Hi all,

Thanks for all the feedback on my previous post on simple resizable columns in jQuery. I took some time to learn how to build a jQuery plugin, and I am proud to present the result :)

Please see here: http://www.audenaerde.org/example2.html for the demo. You can also download the source code for the plugin here: http://www.audenaerde.org/simpleresizabletables.js

Feel free to use (just leave me some credit ;)) and comments are welcome too.

Update!

the code is also available on google code: http://code.google.com/p/simple-jquery-resizable-table-plugin/ . If you like to contribute, drop me a note :)

Unobtrusive table column resize with jquery

With this piece of code, simple add the class  ‘resizabletable’ to your table and the columns can be easily resized by drag and drop!

I was inspired by the flexigrid, but wanted a simpler solution. This one also nicely integrates into Wicket DataTable, for example.

Update: fixed the multi table on a page bug, kindly pointed out by Nick (see comments)

To see it working: http://www.audenaerde.org/example.html

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">
    function resetTableSizes (table, change, columnIndex)
    {
        //calculate new width;
        var tableId = table.attr('id');
        var myWidth = $('#'+tableId+' TR TH').get(columnIndex).offsetWidth;
        var newWidth = (myWidth+change)+'px';

        $('#'+tableId+' TR').each(function()
        {
            $(this).find('TD').eq(columnIndex).css('width',newWidth);
            $(this).find('TH').eq(columnIndex).css('width',newWidth);
        });
        resetSliderPositions(table);
    };

    function resetSliderPositions(table)
    {
        var tableId = table.attr('id');
        //put all sliders on the correct position
        table.find(' TR:first TH').each(function(index)
        {
            var td = $(this);
            var newSliderPosition = td.offset().left+td.outerWidth() ;
            $("#"+tableId+"_id"+(index+1)).css({  left:   newSliderPosition , height: table.height() + 'px'}  );
        });
    }

    function makeResizable(table)
    {        
        //get number of columns
        var numberOfColumns = table.find('TR:first TH').size();

        //id is needed to create id's for the draghandles
        var tableId = table.attr('id');
        for (var i=0; i<=numberOfColumns; i++)
        {
            //enjoy this nice chain :)
            $('<div id="'+tableId+'_id'+i+'"></div>').insertBefore(table).data('tableid', tableId).data('myindex',i).draggable(
            { axis: "x",
              start: function () 
              {
                var tableId = ($(this).data('tableid'));
                $(this).toggleClass( "dragged" );
                //set the height of the draghandle to the current height of the table, to get the vertical ruler
                $(this).css({ height: $('#'+tableId).height() + 'px'} );
              },
              stop: function (event, ui) 
              {
                var tableId = ($(this).data('tableid'));
                $( this ).toggleClass( "dragged" ); 
                var oldPos  = ($( this ).data("draggable").originalPosition.left);
                var newPos = ui.position.left;
                var index =  $(this).data("myindex");
                resetTableSizes($('#'+tableId), newPos-oldPos, index-1);
              }          
            }
            );;
        };

        resetSliderPositions(table);

    }
    $(document).ready(function()
    {
        $(".resizabletable").each(function(index)
        {
            makeResizable($(this));
        });

    });

    </script>
    <style>
        .draghandle.dragged
        {
            border-left: 1px solid #333;
        }

        .draghandle
        {
            position: absolute;
            z-index:5;
            width:5px;
            cursor:e-resize;
        }
        TH
        {
            border-left: 1px solid #333;
            border-bottom: 1px solid #333;
        }
    </style>
</head>
<body>
<div id="container" style="border: 1px solid blue;">
    <table id="mytable" style="width:100%; border: 1px solid red;" border="0" cellspacing="0" cellpadding="0" >
    <thead>
        <tr>
            <th style="">Dit is een interessante zin!</th>
            <th style="">b</th>
            <th style="">b</th>
            <th style="">b</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="">Dit is een interessante zin!</td>
            <td style="">b</td>
            <td style="">b</td>
            <td style="">b</td>
        </tr>
        <tr>
            <td style="">b</td>
            <td style="">a</td>
            <td style="">b</td>
            <td style="">b</td>
            </tr>
        <tr>
            <td style="">b</td>
            <td style="">a</td>
            <td style="">b</td>
            <td style="">b</td>
        </tr>
    </tbody>
    </table>
</div>
</body>
</html>

Enjoy :)

Master Thesis!

I couldn’t find my master thesis fast enough in my gmail, so I post it here, for the world to see! (yeah it’s version 12..)

Final_report_00012

Align Two DIVS on vertical middle

Ha,

Today I found an elegant CSS way of aligning two DIVs vertically on their centers. After spending some search on Google and not finding a satisfactionary solution, I treid to create my own. Here it is:

<span>
 <div style="display:inline-block; vertical-align:middle">
 RobAu's <br>Vertically aligned DIVS
 </div>
 <div style="display:inline-block; vertical-align:middle;width:100px;">
 <div style="width:100px; height:150px; background-color:red"></div>
 <div style="width:100px; height:150px; background-color:blue"></div>
 </div>
</span>

The span is used to have an normal line. The divs are converted to inline-blocks, like images. That way, they can be aligned in the middle.By simply putting two container DIVs in the span, they are alinged vertically, without giving any pre-set heights, percentages, positioning etc.

Feel free to use!

RobAu’s
Vertically aligned DIVS

Lenovo SL500 and Ubuntu.. fixing the loose ends

Half a year ago I started working for a new company and they provided me with a Lenovo SL 500. I started using Ubuntu a year ago, so I was eager to try it out on my new laptop. I wanted to keep the pre-installed Windows intact, so I went the wubi way  (http://wubi-installer.org/).

After installing most things seem to work fine. Except for a few things. The extra keys, the birghtness and wifi where working non optimal. So i started my search on the internet and found solutions to all of my problems!

Setting the brightness

Ok. So setting the brightness was not easy. It requires a installation of extra drivers, and of the 2.6.30 kernel.

Installation of the new kernel (and new nVidia drivers)

http://law-and-tech.blogspot.com/2009/06/thinkpad-sl500-and-linux.html

Installation of the SL500 acpi driver

http://ubuntuforums.org/showpost.php?p=7483027&postcount=4

Installation of the Wifi firmware

Well. I’m not sure if it really fixes the drop-outs of the connections, but there is no more error in the kernel.log

http://intellinuxwireless.org/?n=downloads

Look fot the 5100 agn. Unzip the zip and copy the .ucode file to the /lib/firmware/<your_kernel>

Follow

Get every new post delivered to your Inbox.