GuruBlog : Articles about javascript

Lightbox-Effekt for Processing-Sketches

2011-07-08T07:30:35+02:00

In my Processing Sketch gallery I wanted to run processing sketches inline using a lightbox effekt. With the help of jquery and some ajax-blackmagic I generated a script that loads the index.html of the processing export and runs the applet in a lightbox.

If javascript is enabled the original index.html is opened.

to integrate it in a page simply include jquery, the processing.js script and processing.css in a html page. The script also need the deployJava.js from java.com that is also used in the index.html files of an processing applet-export.

<script type="text/javascript" src="http://www.java.com/js/deployJava.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="processing.js"></script>
<link rel="stylesheet" type="text/css" href="processing.css"/>

Then simply link the processing sketch and mark the link with class="processing"

<a class="processing" href="http://yourserver/processing/sketchfolder/">My processing sketch</a>

To see it running click on this Example Link

Table column highlighting with jquery

2010-10-29T03:20:00+02:00

in one of my recent projects i needed to highlight a table row and column of a html table on mouseover.

i found out that it's quite simple to do in jquery - even without a plugin.

first you have to find out in which column your mouse pointer currently is.

var idx = $(this).parent().children('td,th').index( $(this))+1;

and then you mark all the td's and th's in the table with the same column index

$('td:nth-child('+idx+')').addClass( 'hover' );
$('th:nth-child('+idx+')').addClass( 'hover' );

click here to download a simple example project.

calling webservices from mootools, jquery or dojo

2010-01-24T16:44:00+01:00

I wrote a small webservie using java6 and jax-ws. Then i wrote clients for the webservice using some some popular javascript frameworks. I used mootools, jquery and dojo for writing the clients.

I tried to use the same simple form for all the three clients to make them comparable. I also used no libraries besides the core framework classes.

click here to download the sourcecode of the clients and the java-service

processing.js in dashboard widget

2009-04-07T05:45:00+02:00

I managed to get processing.js - a javascript based processing clone - to run in an apple dashboard widget.

JavaScript CalDAV-Frontend

2009-03-29T12:39:00+02:00

I just wrote a realy simple and small frontend for caldav calender (~700 lines of code including html) using the mootools framework it supports multiple calendar and displays a read-only week-view.

i'm using it with a DAViCal server

to install it, simply download the package, unpack it on your caldav server and enter the caldav urls of your calender in the config.js file.

thats it

have fun :-)

UPDATE: the code is released under the MIT License, but it would be nice if you link to my blog if you include it in your project :-)

<typo:lightbox src="/img/guru/calendar_sc.png" thumbsrc="/img/guru/calendar_sc-small.png"/>

Linedemo in processing.js

2008-10-20T19:47:00+02:00

Todays usless processing-sketch is written in a processing dialect written in java-script. The demo shows a rotating line and uses the canvas element. So if you can't see anything try another browser.

automatic proxy configuration in firefox

2007-11-03T15:43:00+01:00

In an erlier article i describe how to switch between the network environments i am using, but there was one programm i could not convince to let me change the proxy settings via apple script - firefox.

i still needet to switch the firefox settings per hand - something i didnt like at all.

one day the little "fetch proxy settings for url" dialog part from the firefox proxysettigns made me courious and i found out, that firefox expects a javascript file on this url, which tells firefox what proxy to use.

function FindProxyForURL(url, host) {
    if ( dnsResolve( host ) == "127.0.0.1" ) {
        return "DIRECT";
    } else {
        return "PROXY proxyhost:8080";
    }
}

this script can use some predefined functions like "isInNet" or "dnsResolve" to determine which network Im in and use the appropriate proxy. the file doesnt even have to live on a http server, a file:// url is sufficient.

e voila - no more manual proxy switching