Meeho!™ » Blog » HTML and CSS http://www.meeho.net/blog This is the official blog about Meeho!™, the platform for getting your business organized. Sat, 04 Jun 2011 23:06:23 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Cool HTML5 canvas magic – blowing up video http://www.meeho.net/blog/2010/04/cool-html5-canvas-magic-blowing-up-video/ http://www.meeho.net/blog/2010/04/cool-html5-canvas-magic-blowing-up-video/#comments Tue, 20 Apr 2010 20:27:04 +0000 Kasper Tidemann http://www.meeho.net/blog/?p=926 The good folks over at Craftymind have created a cool example of some of the capabilities of the HTML5 canvas tag. They’ve created an explosive effect in an HTML5 video using the Canvas.drawImage() call. Have a look here: http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/

]]> http://www.meeho.net/blog/2010/04/cool-html5-canvas-magic-blowing-up-video/feed/ 0 A JavaScript Commodore 64 emulator http://www.meeho.net/blog/2010/03/a-javascript-commodore-c64-emulator/ http://www.meeho.net/blog/2010/03/a-javascript-commodore-c64-emulator/#comments Thu, 04 Mar 2010 00:43:08 +0000 Kasper Tidemann http://www.meeho.net/blog/?p=798 If you’re up for a bit of fun, go check out the work of Tim de Koning: a JavaScript Commodore C64 emulator. It’s done in JavaScript and makes use of HTML5 elements for rendering graphics, plus it comes with a few ROMs. Good old C64, it really takes you back…

A screenshot of the JavaScript emulator.

A screenshot of the JavaScript emulator.

]]> http://www.meeho.net/blog/2010/03/a-javascript-commodore-c64-emulator/feed/ 0 WP-Cumulus and the problem with unclickable links http://www.meeho.net/blog/2010/02/wp-cumulus-and-the-problem-with-unclickable-links/ http://www.meeho.net/blog/2010/02/wp-cumulus-and-the-problem-with-unclickable-links/#comments Fri, 19 Feb 2010 16:24:21 +0000 Kasper Tidemann http://www.meeho.net/blog/?p=723 Roy Tanck has developed a plugin for showing WordPress tag clouds called WP-Cumulus. It’s a great plugin that’s also usable in contexts outside WordPress, and Roy Tanck has generously provided his source code as open source for the world to enjoy – respect.

However, you may experience a problem with the links in the tag cloud not being clickable. They are shown alright, but when you hover the cursor above the links, no boxes are shown and no links are clickable.

Now, this is because the hrefs of the links are defined as relative paths such as <a href=”/hello/world”>My tag cloud link</a>. If you change your paths to be absolute, say, <a href=”http://www.meeho.net/hello/world”>My tag cloud link</a>, then the links in the tag cloud will be clickable again – problem solved!

]]> http://www.meeho.net/blog/2010/02/wp-cumulus-and-the-problem-with-unclickable-links/feed/ 0 IE6 Update – how to trick users into upgrading their IE6 http://www.meeho.net/blog/2010/02/ie6-update-how-to-trick-users-into-upgrading-their-ie6/ http://www.meeho.net/blog/2010/02/ie6-update-how-to-trick-users-into-upgrading-their-ie6/#comments Fri, 19 Feb 2010 14:51:23 +0000 Kasper Tidemann http://www.meeho.net/blog/?p=718 Yesterday, Troels told me about the good people over at ie6update.com, Nick Pettit and Jim Hoskins. Apparently, they have created a tiny script that imitates the classic Windows pop-under bar used in the Internet Explorer series to trick the users of Internet Explorer 6 to update to a newer version. As speculative as this might sound, the idea is really great and we encourage you to go take a look at their site. Great work, guys!

Screenshot of IE6 Update in action!

Screenshot of IE6 Update in action!

]]> http://www.meeho.net/blog/2010/02/ie6-update-how-to-trick-users-into-upgrading-their-ie6/feed/ 0 Tip for the web developers: Raphaël http://www.meeho.net/blog/2010/02/tip-for-the-web-developers-raphael/ http://www.meeho.net/blog/2010/02/tip-for-the-web-developers-raphael/#comments Tue, 16 Feb 2010 00:40:16 +0000 Kasper Tidemann http://www.meeho.net/blog/?p=690 For all you web developers out there always on the lookout for new and exciting things, why don’t you have a look at Raphaël? It’s a JavaScript library that does vector graphics in a really neat way. Go check out Raphaël here, or for a quick look at some of the capabilities, have a look at this example.

... it certainly seems so!

... it certainly seems so!

]]> http://www.meeho.net/blog/2010/02/tip-for-the-web-developers-raphael/feed/ 0 The proper way of using the ORGANIZER attribute in iCalendar format http://www.meeho.net/blog/2010/01/the-proper-way-of-using-the-organizer-attribute-in-icalendar-format/ http://www.meeho.net/blog/2010/01/the-proper-way-of-using-the-organizer-attribute-in-icalendar-format/#comments Mon, 11 Jan 2010 01:24:15 +0000 Kasper Tidemann http://www.meeho.net/blog/?p=660 Working with the iCalendar format using Ruby on Rails brings many possibilities of quickly getting data generated by using gems such as iCalendar. However, the gem seems not to handle the ORGANIZER attribute in a proper way. What it does is the following:

ORGANIZER:Kasper Tidemann

… which will make the ORGANIZER info not show in iCal. However, it will work if you remove the spaces in the attribute’s value, that is, it will work if you do the following:

ORGANIZER:KasperTidemann

… but while it may work, it’s not really what we want. The organizer’s name is not “KasperTidemann” to be exact, but “Kasper Tidemann”. Now, while this post deals with fixing the use of the iCalendar gem to make the organizer tag show properly in iCal, the following principle is general and should always be followed.

To make iCal show you the name of the organizer plus the person’s e-mail address, what you need is for the ORGANIZER attribute to look like this:

ORGANIZER;CN=Kasper Tidemann:mailto:kt@meeho.dk

This way, it will show up in iCal like this:

Screenshot of iCal showing the organizer info. Please do not mind the Danish attribute names.

Screenshot of iCal showing the organizer info. Please do not mind the Danish attribute names.

I have written the maintenance guys of the gem, but they haven’t replied me yet. Until then, you can either modify the gem yourself or use the custom_property method they’ve supplied the gem with:

event.custom_property("ORGANIZER;CN=Kasper Tidemann:mailto", "kt@meeho.dk")

It’s kind of not the way you would use the method, since you’re really supposed to simply type in an attribute name as the first parameter and the attribute value as the second, but hey, the above works and will help you out until the gem itself is fixed.

]]> http://www.meeho.net/blog/2010/01/the-proper-way-of-using-the-organizer-attribute-in-icalendar-format/feed/ 0 Find out which HTML element has focus using JavaScript http://www.meeho.net/blog/2010/01/find-out-which-html-element-has-focus-using-javascript/ http://www.meeho.net/blog/2010/01/find-out-which-html-element-has-focus-using-javascript/#comments Tue, 05 Jan 2010 02:35:55 +0000 Kasper Tidemann http://www.meeho.net/blog/?p=635 If you need to know which element on your HTML page has the current focus, you can use the document.activeElement attribute recently introduced in all the major browsers (it works in Firefox 3, Safari 4, Internet Explorer 8 etc.).

For example, this is very useful if you need to determine whether an input field has focus or not. You might have a user typing stuff in a form, and you do not wish for the user to leave the page (by mistake) in the middle of typing text in one of your input fields.

As an example of the use of document.activeElement, have a look at the following piece of code:

<html>
<head>
<title>My test page</title>
<script type="text/javascript">

 window.onkeypress = getActiveHTMLElement;

 function getActiveHTMLElement(keyevent) {

  keyevent = (keyevent) ? keyevent : ((window.event) ? event : null);

  if (keyevent) {

   switch (keyevent.keyCode) {
    case 8:
     alert(document.activeElement.tagName);
    break;
   }

  }

 }
</script>
</head>

<body>

This is my test page. Now, press backspace!

</body>
</html>

The above code will return the tag name of the element that has focus each time you press the backspace button on the page.

The document.activeElement attribute is a part of the coming HTML 5 specification. For more info, please click here and read up on the changes to come.

]]> http://www.meeho.net/blog/2010/01/find-out-which-html-element-has-focus-using-javascript/feed/ 1 Google Browser Size http://www.meeho.net/blog/2009/12/google-browser-size/ http://www.meeho.net/blog/2009/12/google-browser-size/#comments Mon, 28 Dec 2009 07:45:15 +0000 Kasper Tidemann http://www.meeho.net/blog/?p=615 Google has developed a very interesting tool based on the browser window sizes of the millions of users that visit Google every single day. The tool is named Browser Size and it enables you to ensure that the most important parts of your web page is viewable by the majority of your visitors, at least as seen through the optic of Google.

You can have a look at Browser Size at http://browsersize.googlelabs.com.

]]> http://www.meeho.net/blog/2009/12/google-browser-size/feed/ 0 Regarding mailto strings containing more than 255 characters http://www.meeho.net/blog/2009/12/regarding-mailto-parameter-with-more-than-255-characters/ http://www.meeho.net/blog/2009/12/regarding-mailto-parameter-with-more-than-255-characters/#comments Thu, 24 Dec 2009 16:31:31 +0000 Kasper Tidemann http://www.meeho.net/blog/?p=592 We have covered this topic briefly in relation to our group mailing lists. However, I wish to use this entry to clearly emphasize a fact about using the mailto attribute. Imagine you have the following piece of HTML:

<a href="mailto:kt@meeho.dk,aj@meeho.dk">Send a mail to Kasper and Anders!</a>

The above will work, since the mailto string only consists of a total of 30 characters. However, if this length exceeds 255 characters, it won’t work in Internet Explorer 7 and if it exceeds 2048 characters, it won’t work in Firefox etc. – the browsers limit the mailto attribute at different lengths and the key point is: they limit how much data, you can put in the tag. So what to do in this case?

In case you’re looking for a solution that enables you to put a whole bunch of e-mail addresses in the mailto attribute of your <a> tag, look no further – it will not work properly on all systems no matter what you do!

Of course, if you are absolutely sure of the fact that your code will only produce a mailto length of, say, 150 characters then fine, go ahead, but otherwise you will run into trouble.

For those of you interested in the rules about the mailto attribute, the RFC about URIs defines no official maximum length. The RFC simply states that “URI producers should use names that conform to the DNS syntax, even when use of DNS is not immediately apparent, and should limit these names to no more than 255 characters in length”.

What we have done in Meeho!™ is to make use of forwarding to a bunch of e-mail addresses in Postfix. This fixes the problem, but it requires in-depth knowledge of Postfix plus, of course, that Postfix is installed and usable in your setup. If needed, we will cover this in a new blog entry.

]]> http://www.meeho.net/blog/2009/12/regarding-mailto-parameter-with-more-than-255-characters/feed/ 0 How to remove the blue border box around input fields in Safari http://www.meeho.net/blog/2009/11/om-at-fjerne-de-bla-boks-omkring-input-felter-i-safari/ http://www.meeho.net/blog/2009/11/om-at-fjerne-de-bla-boks-omkring-input-felter-i-safari/#comments Tue, 24 Nov 2009 12:10:37 +0000 Kasper Tidemann http://www.meeho.dk/blog/?p=363 If you’ve worked with HTML and Safari before, you’re likely to have seen Safari show a kind of blue border box around your input fields. It’s a nice feature, but at certain times you do not want Safari to show the blue borders. Our Meeho!™ Stickies would look questionnable with blue borders around them. Luckily, the solution is simple and looks like this:

textarea.sticky:focus {
outline: none;
}

If you use outline: none; in the focus context of a CSS class, you’ll see the blue border box disappear in Safari – very neat!

]]> http://www.meeho.net/blog/2009/11/om-at-fjerne-de-bla-boks-omkring-input-felter-i-safari/feed/ 0