In April, for example, I developed a whole new WordPress-Theme called “JavaScript-OperatingSystem-Theme” (“JS-OS-Theme“). I’ve chosen this extraordinary name, because it’s based on JavaScript (and PHP of course, the WordPress-part!) and looks and behaves like an operating system. For all those of you who can speak German: Ihr könnt euch diesen Screencast ansehen, in dem ich das Theme ausführlich vorstelle. For all those of you who can’t: Enjoy the “ö”s and “ü”s in the last sentence and believe that all your stereotypes about Germany are true. Or go directly to trial.me-blogs-it.com – I’ve installed the Theme for experimental purpose and the test-posts are all in English!

I’ve done even more things in May!

Now, in June I began to teach myself Objective-C to write Mac and iPhone-Apps! I’ve already done a dozen of “Hello, World!”-Tutorials, yet I haven’t learned anything at all… But before I begin to bore you with this I rather tell you about the two other projects which ended up in further subdomains:

The first one is a simple WYSIWYG-Editor. I had to google for a long time until I found how to write one actually: The secret behind wysiwyg-editors is an iframe with the JavaScript-method designMode = “on”;

function id2obj(id) {if(document.getElementById) {return(document.getElementById(id))} else if(document.all) {return(document.all.id);} }
var Idocument = id2obj('showHTML').contentWindow.document;
Idocument.designMode = "on";

The special thing about this wysiwyg-Editor: Next to the wysiwyg-Editor is a textarea with the sourcecode of the wysiwyg-editor. Now, if you type into the textarea, the sourcecode is simultaneously turned into HTML and shown in the wysiwyg-editor. If you edit something in the wysiwyg-editor (btw: For all those of you who don’t know what this cryptical “wysiwyg” actually stands for: It means “What you see is what you get” – you know, this Britney Spears song!) the sourcecode changes in the textarea at the same time! Unfortunately it doesn’t work in Firefox. It probably doesn’t work in the Internet Explorer, but that’s a thing I don’t care about!

The last new subdomain: I was shocked when I read a study (I don’t know how old it was) in which it says that almost a quarter of all Internet users have a screen resolution of 800×600! I wanted to know how my sites actually look like in those screenresolutions and have written a simple php-file which makes customized resolutions possible: 800×600.me-blogs-it.com

JavaScript-OperatingSystem-Theme WordPress screenshot

When you want a picture to change, while the cursor hovers over it, you usually use JavaScript’s <onMouseOver> in this way:

<img src=”picture.jpg” onmouseover=”this.src=’hover-picture.jpg’;” onmouseout=”this.src=’picture.jpg’;” />
 

Although this is the common way, there’s actually another, better and way simpler way to accomplish this hover-effect, which also works when JavaScript is turned off in the browser. It’s – as you can guess from the headline – via CSS:

<div id=”avatar”></div>

<style type=”text/css”>
#avatar {
width: 64px;
height: 64px;
background-image: url(gravatar1.jpg);
}
#avatar:hover {
background-image: url(gravatar2.jpg);
}
</style>

It uses the :hover-funtion in CSS. The picture is actually just a background-image which is swapped, when the cursor hovers over the div. Many sites already use this method. Some even just have one background-image which is relocated via background-postion-y or -x. Facebook does that: The logo is actually two logos – the first one is the normal logo, the second one is with a “Home”-icon. When you hover over the logo background-position-y: -17px; is executed. Although it’s actually the background-image which is repositioned, for you it looks like a house is simply added behind the logo.

Facebook-logo background-picture with and without house

And this leads me to another CSS-thing: Instead of relocating a background-image you could indeed add a house behind the facebook-logo by means of the rather unknown tags :after in combination with content: …;:

<div id=”add-content”> Facebook </div>

<style type=”text/css”>
#add-content:hover:after {
content: “house”;
}
</style>

Though this example works with text, you could easily change that to use images. Now, why does Facebook used the other way to add the house behind the logo and not this, simpler one? Because crappy Internet Explorer can’t interpret :after and content! These tags are actually official web-standards, but -hey- the IE doesn’t give a fuck about web-standards! Instead Microsoft invents its own standards like filter:Alpha(opacity=50, finishopacity=20);… Oh, dude, I hate the IE! From the bottom of my heart! But 66% of all Internet users are still using the IE, because they don’t even know about Firefox or Opera or Flock or Safari…