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
April 20, 2012 — robauThere 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]
August 16, 2011 — robauHi 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
June 9, 2011 — robauWith 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!
July 21, 2010 — robauI 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..)
Align Two DIVS on vertical middle
June 18, 2010 — robauHa,
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
Vertically aligned DIVS
Lenovo SL500 and Ubuntu.. fixing the loose ends
September 1, 2009 — robauHalf 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>
