Archive for December, 2006

Photo reflections with mootools 0

You know the nice photo reflections thats often used in mac software eg. Itunes?

I love this effect! And I wanna use this effect in a web application too!

Well i could do this easily with photoshop but every photo manualy? But im too lazy!

So i found a addon for mootools called Reflection.js

It is very easy to use and works perfectly with mootools together. Another important point is the performance of the reflection.js. It is much faster than the known script.aculo.us Reflector script.

Usage:

Just include the mootools.js framework and the reflection.js in the html head and add: class=”reflect” to the image tag. This will use the default reflection parameters. You can apply multiple classes to an image (separated by spaces), the script will detect if “reflect” is one of them.

more detailed usage can be you found on the website.

PS: Anyone know a good Wordpress plugin for Code Highlighting in a blog post? Javascript, PHP, HTML and so on?

To Do with Mootools 0

MootoolsToday i tried mootools.

Its really great and easy to understand. I love it. With my first idea in the head i tried to rebuild the new feature of OS X Leopard Mail but also integrate some own ideas. The presentation of Mail wasn’t that detailed.

Try Hackdev - Notes 0.1 Demo

I played a bit with the nice effects of mootools. Its really fun!

Select a random task from the note and then click on Create a To Do!

The selected text is now highlighted and a new task appears in the menu “Task”-list.

Thats it. Very simple and only tested on Firefox 2.0. The effects are working on Safari and IE though.

The next steps:

  • Working on usability
  • Crossbrowser
  • PHP/MYSQL/AJAX integration
  • editable notes
  • and a lot of more things

I hope you like it. Its not a finished thing just some brainstorming and sandbox programming.

When you have more ideas let me know.

greetings

Hackfrag

File upload via drag&drop in a web application 0

One day at work a customer of our web application told me he wish he could upload multiply files with drag&drop in the browser.I had no idea how i could do that.. in a web application.

But today i found java applet which can solve my problem and the customers wish. I found it via a case study in the wiki of my favorite php framework.

Thin Upload

Just drag and drop your files onto the applet and they will uploaded. A optional browse button is also available. Unlike the html browse button you can select multiply files with ThinUpload.

Since Thin Upload is a Java Applet you need to have the java plug in installed in your browser.

The simple version of ThinUpload cost only 44€.

Create a to do out of a text 0

Apple Mail in LeopardI had the idea from the last WWDC keynote where Steve Jobs presented the new Mac OS X “Leopard”. One feature of the new Mail brought my attention.

You can can create a to do out of a text eg. from a mail oder note.

Here a screenshot.

Well i think its a great feature. Often i get mails which contains some tasks. So i select it - push a keystroke and boom i have a to do.Now i wanna try to rebuild this method for the web.First of all i need a javascript method to “surround” the selected text with a span tag.

theSelection = window.getSelection();
theRange = theSelection.getRangeAt(0);
var newNode = document.createElement("span");
newNode.style.background="#ffffe1";
newNode.style.padding="2";
newNode.style.border="1px dashed #cccccc";
theRange.surroundContents(newNode);

Demo

This is the first step. Very simple and only tested on Firefox.

The next steps:

  1. a checkbox in front of the To Do
  2. a nice arrow at the left side ;)
  3. what about a selection of more then one row?
  4. the user cant mark the same text for a new to do. You mark “Buy a nice birthday present in the city” you cant mark “birthday present” as another to do. Makes no sense but you’ll get the point.
  5. after creating the to do a “option box” should appear where i can change priority or due date.

Thats my thoughts about the clicky-wicky-GTD-generator out of mail/note

Say hello to Hackdev 0

Today i thought about splitting my personal webblog into two different blogs. Since two years i have a personal (written in german) webblog where i write a lot of private stuff and how was the last party ;-) But sometimes i also wrote about programming. The problem is that only my privat friends are reading my blog and arent very interessted in programming.

So i start today my own blog for web-programming. I live in germany - so why i write in english? Because i want that everyone can read my blog not only germans. I had the idea from very good german web-magazin that started a international webblog and had a lot more visitors after 2 months.

You have to excuse my english - when you see any spelling mistakes you can have it :-).

I hope you enjoy my blog!

Thanks!