technovelty

weblog of Ian Wienand

RSS  |  technovelty home  |  page of ian  |  ian@wienand.org

YUI ButtonGroup Notes

Some tips and things to check if your YUI ButtonGroup isn't behaving as you wish it would.

Hopefully, this will save someone else a few hours!

posted at: Mon, 02 Mar 2009 23:36 | in /web | permalink | add comment (1 others)

tinymap.net - now with embedded maps

tinymap.net just got another thing ticked off its to-do list, as it now supports embedding maps in an iframe on your website.

Coming up with an interface to do this was a bit of a pain, but you can see it in action here (or click on the "embed this map" link on every public map). I think there's still update bugs with the Google map inside a re-sizable panel, and every browser wants to layout the panels slightly differently.

But, all going well, you should be able to see a small embedded map just below!

posted at: Wed, 28 Mar 2007 22:44 | in /web | permalink | add comment (1 others)

Simple accordion style menu with YUI

I couldn't find a simple reference for the popular "accordion" style fold out menus with the YUI animation libraries (maybe because it is so easy!). Only traps are setting the overflow properties of the fold-out div, and the various DOM height elements.

<script src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.2.0/build/animation/animation-min.js"></script>

<script type="text/javascript">

function swap_div(div_name) {
 var div = document.getElementById(div_name);
 var to_height = (div.offsetHeight == 0) ? div.scrollHeight : 0;
 var from_height = (div.offsetHeight == 0) ? 0 : div.scrollHeight;
 var ease_type = (from_height == 0) ? YAHOO.util.Easing.easeOut : YAHOO.util.Easing.easeIn;
 var new_status = (from_height == 0) ? "collapse" : "expand";
 var anim = new YAHOO.util.Anim(div_name, { height: {to: to_height, from: from_height} }, 0.5, ease_type);

 anim.animate();

 document.getElementById(div_name+"_status").innerHTML = new_status;
}

</script>

<div id="status">
  <a id="expand_me_status" href="#" onclick="javascript:swap_div('expand_me');return false">expand</a>
</div>

<div id="expand_me" style="overflow:hidden; height: 0px; background:#eee">
  <p>Hello, this is some text to be expanded out!</p>
</div>

And here's the example in action

expand

Hello, this is some text to be expanded out!

A more advanced version might use the callbacks to regulate the swapping of the expand link, but with short swipe times (as one would want from a UI perspective) this isn't really an issue.

In related news, tinymap.net has had a bit of an overhaul (and includes expanding menus).

posted at: Fri, 16 Mar 2007 14:50 | in /web | permalink | add comment (1 others)

tinymap again

tinymap.net appears to have found a small niche, and is getting a lot more hits than I expected. Over a few nights it has gained

It is kind of strange and cool that the whole thing hangs together with a mash-up of Google, Yahoo and Amazon services. I considered using Amazon S3 to actually store the map database, but it isn't big enough yet, and I think latency would be an issue.

I have sitemaps that point to KML for public maps, and I was hoping that by pinging Google with the address they would index the KML with the page, and Adsense would serve more relevant, localised ads. So far, despite my pings, Google has not gone for any of the sitemaps -- I think you need to have them under your "webmaster tools" or something. If any Googlers are listening integrating Adsense with KML is going to be a killer app.

Some highlight links

I still have some more ideas, but I don't want to clutter it and loose the KISS approach I desired from the start. It sure is a lot of fun, even if Javascript is the most un-debuggable language ever invented.

posted at: Thu, 01 Mar 2007 18:09 | in /web | permalink | add comment (0 others)

tinymap.net

Recently I've had some fun building tinymap.net which is best described as tinyurl for Google maps. You scribble on the map, and then you get a short URL to it. For example, to see my average trip to work go to http://www.tinymap.net/MkJVFx77KSX/.

I of course did no market research or planning and simply started coding, and have since found a few other similar (and fairly cool) sites such as Quikmaps and wayfaring. My site certainly has them beat in the KISS stakes, although it does involve a mashup, some AJAX and has been tagged a lot on del.icio.us so I'm claiming it is Web 2.0!

posted at: Wed, 21 Feb 2007 11:45 | in /web | permalink | add comment (3 others)

Easy geotagging

I love the idea of image metadata, but don't like the idea that if I invest the time in adding it to my photos and Flickr disappears then I've lost it all.

I wrote a Python wrapper for libiptcdata (coming to Debian if the NEW queue ever moves) and some tools to add titles, keywords and comments to IPTC data (embedded in the JPEG), which fixes one part of my problem.

Although one day I might have a camera that has a built-in GPS, until that day the next best thing is Google Maps. Since they added Australian street data, I can pretty much pin-point wherever I was in a matter of seconds with a place name search. Using their API I hacked up a latitude and longitude finder page which can search by address, and pops up information in a format suitable for pasting directly to the exiv2 command line to embed the location in the EXIF data. You can also click anywhere to add a mark and then click on it to get its location information.

The only problem was that EXIF expects locations with degrees, minutes and seconds rather than the more modern decimal points, which makes ye feel a bit like a scurvy old sea dog, ahhrrr.

Flickr can also apparently take geographic information from tags, if you paste them in and know the secret page to import it. However, when uploading with EXIF GPS data I found that it placed things on the map straight away and doesn't pollute your existing tags. Yahoo maps are however, at this point, unfortunately a fairly mediocre imitation of Google maps.

Yay Web 2.0!

posted at: Wed, 07 Feb 2007 15:41 | in /web | permalink | add comment (0 others)

Creating webforms quickly

I from time to time want to create a quick static web form to run where PHP etc isn't involved. The best way I've found to do this is with the HTML_QuickForm PEAR package.

To install it on Debian, just install the php-pear package and run sudo pear install HTML_Common HTML_QuickForm and then you can easily create really nifty forms.

For example, the comments form below was created with the following input.


<?php

require_once 'HTML/QuickForm.php';

$form = new HTML_QuickForm('comments_form');

$form->addElement('header', null, 'Add a comment');

$form->addElement('text', 'author', 'Name', array('size' => 50, 'maxlength' => 50));
$form->addRule('author', 'Please enter a name', 'required', null, 'client');

$form->addElement('text', 'email', 'Email', array('size' => 50, 'maxlength' => 50));
$form->addRule('email', 'Please enter an email', 'required', null, 'client');

$form->addElement('text', 'url', 'Website', array('size' => 50, 'maxlength' => 50));

$form->addElement('textarea', 'body', 'Comment:', array('rows'=>10,'cols'=>50));
$form->addRule('body', 'Please enter a comment', 'required', null, 'client');

$form->addElement('submit', null, 'Submit');

$form->display();

?>

It automagically does client side javascript to do first level validation and makes the form look quite nice. You can just run php file.php on the command line to scrape out the plain HTML.

posted at: Wed, 04 Jan 2006 16:32 | in /web | permalink | add comment (0 others)

google + bloglines = cool

Google Alerts is a service that fires off an email with automated searches of Google news or new websites daily.

Bloglines has a feature where you can make an email address under your profile and any email that is received will be "blogged" and appear as any other feed ... sort of like an automated email->RSS generator.

Add them up, and you've got a really cool way of keeping up to date with things you're interested in. You'll probably end up finding articles you might otherwise never have found, amazing your friends and workmates.

The only problem is that you will need to keep your email subscriptions private in Bloglines, since you have to receive the confirmation email which has details on how to cancel the web alerts (and so does each email, for that matter).

posted at: Fri, 08 Apr 2005 13:39 | in /web | permalink | add comment (0 others)

Naughty Hits

Recently I started keeping track of "people" (trojaned Windows boxes) looking for things like formail.cgi or mt-comments.cgi on my work webserver. Having now hit the 1000 unique IP address mark I thought I'd graph the locations of the offenders with geoip.

The full graph shows the USA on top by a large margin, but Spain not far behind with UK, Italy and France rounding out the top 5.

What does this mean? Nothing, really; except with a bit of coercion Openoffice can be made to make quite a nice graph (tip: to just export the graph copy it into a new "Drawing" then export that to PDF).

posted at: Fri, 11 Feb 2005 13:05 | in /web | permalink | add comment (0 others)

unlimited-space.com

I've been through my fair share of cheap webhosts, and for the most part you get what you pay for. Since most of my sites are for hobby, downtime isn't too much of an issue for me.

However, I can so far say that unlimited-space.com has been a fantastic cheap webhost. They offer a full control panel so you can do most everything yourself, "unlimited" disk space, suitable bandwidth limits, and good features standard features like email, ftp users, mysql and an add-on domain. I've never even had to call on them for service, which for mine is a good sign. However last time I signed up an account it was ready in just a few hours.

You can also pay in $AU which is great. The only downside is the upfront payment -- often with the cheaper reseller based hosting services you pay upfront and never know how much service you're going to get. I have however had no problems with service quality and now have at least three sites running with them.

posted at: Wed, 02 Feb 2005 17:04 | in /web/hosting | permalink | add comment (0 others)

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.