Aleksandar • Vacić

iOS bits and pieces

Overlapping Windows

I’m in danger of becoming tab-fanatic. It’s not my fault, really. All the stuff presented here, either as Sparks or hidden away as casual posts are the fruit or consequence of my day job. The curse of working the job you love is that you don’t leave it in the office. I encounter the problem and instead of working on it for few days, I take it home and finish it up in the wee hours.

And for some reason, I often encounter tabs. Tabs are self-contained and can easily be extracted from the layout where they are used. As such, they make perfect post-topic.

It’s hard to do something new in tabs domain. I thought that too when few months ago (yes, that’s how much it took me to write this) I looked for tabs that overlap each other. You see, all the various tab techniques around the Net, no matter how graphically different they are, share one common attribute. The linked parts of the tabs do not overlap, like the following well-known examples illustrate.

the usual lists

The area you hover will change only part of the screen occupied by li and/or a. It does not change anything outside that block. And I need to implement just such design.

overlapping tabs

Bahrain Grand Prix

Great racing today in Bahrain. :) Thanks to Pedro De La Rosa, entire event was very fun and exciting to watch. Spaniard, driving a very stable and fast McLaren, continually tried to overtake, made errors and recovered from them and eventually finished 5th. Particularly fun was his fight with Mark Webber in Williams, as Mark’s car had no problems and Williams outscored McLaren in previous two races.

Renault celebrates in Sakhir

Rounded corners

Rounded corners are one of the most sought-after graphical elements on the web. Hence we have a myriad of implementation with more or less bloated code. The reason is that you need four hooks to attach the four images needed for flexible boxes. With typical box markup of header plus paragraphs/lists, it can be hard to find appropriate elements, especially with outdated and buggy browser implementations.

Once you do away with browser constraints and develop for the best in the field, all the markup is 100% semantic.

1
2
3
4
5
6
7
8
9
<div class="hifi">

<h2>Nice box<a name="anch2">with anchor</a></h2>

<p>And few...</p>

<p>paragraphs. </p>

</div>

div defines the box, h2 defines the header, p defines content and a defines fast-access URL point. Semantic, flexible and good looking. What else to ask for? Apart from browser support, nothing.

Away interupt

I’m going away for three days, to conclude certain family matters.

I don’t like going away when I have many unfinished things here, but this one can’t be postponed. I have another WP theme almost completed, but not enough to be posted. I have few CSS related articles I’m writing for like over a month (but effectively only few hours). I have horrible amount of office work to clear up and this day off will really hurt me when I get back.

There are good sides too: I’ll see my mom and sis again after few months. I’ll get to play more with my new phone - Sony Ericsson T630 (black).