Java’s String.format() in JavaScript

For a recent project I needed to use Java’s excellent String.format() in JavaScript. I couldn’t find a implementation that did this, so I decided to try and port it from the OpenJDK sources. In case you are interested, please see my github project: https://github.com/RobAu/javascript.string.format

Currently, all formatting flags are supported. Conversion from integer, long, double and all kinds of dates are implemented. Not implemented is conversion to scientific format, hexadecimal and some other stuff, although it is quite straight-forward to implement the latter.

 

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
Follow

Get every new post delivered to your Inbox.