jQuery 1.1a

jQuery 1.1 is close around the corner. One of the things I really like is the cleanup of the API and the performance increase in selections. Nicely done!
I recently switched from prototype+scriptaculous over to jQuery. I like them both very much, it’s just that I think jQuery will be more suitable for me.
Read all about it over at the jQuery blog

Images and em

The dimensions of an image are usually defined by pixels, or if nothing is defined, it will usually be as large as it wants to be. This means that while our text usually resize when the user makes the text bigger or smaller, the images won’t.

However, using the power of CSS and ems, we can make the images scale. The trick is to leave out the width and height attribute of the image tag, and specify the image dimensions using ems in CSS. If both width and height is set, the image will loose aspect ratio and conform to the set values, if, on the other hand, only width or height is defined, the picture will keep aspect ratio.

This means that we can standardise our image sizes throughout the page, even though the original size of the images may vary. Say you have a listing with thumbnails, and all images are of varying sizes, then you can confine the images to a certain size using CSS

image.thumbnail {
  width: 5em;
}

and now all thumbnail images will be exactly 5ems in width (whatever that may be on your particular page) and the height will scale accordingly. If you define only height, the width will scale accordingly. By defining all image dimensions in ems, we can make sure that the images will scale nicely with the text as things are resized on the page.

There is a problem though; image quality may be affected when the images scale. This is not a problem on the Mac, but in Windows, images may not look that good when scaled. This is either a visual loss you accept, or you can make the original image exactly the same size that the rendered image will have on the page with a normal text size in the browser. Just look at the page, count the pixels and resize your images accordingly. In this way, most people will get an image with perfect visual quality.

LinkTip: Switchy McLayout: An Adaptive Layout Technique

http://www.alistapart.com/d/switchymclayout/transition_layout_tab.html

Watch how the layout completely changes when you resize your window. Very nice effect, but perhaps not as useful as one would think. It works by hooking into onresize and applying different styles depending on the size of the browser window.

Read the full article over at A List Apart

Deleting things

Well, I didn’t know about this, so here goes.
It’s possible to delete object, properties of objects or places in arrays with delete.

delete objectName
delete objectName.property
delete objectName[index]


Read more about this, and other useful special operators over at the Mozilla developer center

Multiple class declarations

This will be my first real post, I decided to make it a small tip just to get things off.

It’s possible to declare multiple classes for an element using a space-separated list

<p class="strong em">paragraph</p>


This will make the element respond to both class-values for the CSS, making the above paragraph text both bold and italic.

p.strong {
  font-weight: bold;
}
p.em {
  font-style: italic;
}


It’s also possible to target elements that only carries both values, using a dot between all the class-attributes you want to catch. In this case, all paragraphs that have class-values of both strong and em will also get a red background.

p.strong.em {
  background: red;
}


My first blog entry

Not so exciting yet. I plan to post reflections on my daily life as a web developer.