maandag 20 april 2009

Scrollable part above fixed part in html container

As a follow-up of the previous post, I also want to publish a solution for the next situation: what if there is no fixed part above the scrollable part? Problem here is that setting top undoes setting the bottom in IE.
So we have to make sure that the top is not set in IE6 (using ones of the infamous CSS hacks):

html>body .content{
/* this part is moved out of the common part,
and will only be taken into account if the browser is not IE6 */
top: 0;
}


Now we still have to make that the height is correct in IE6, as the height is set to auto by default:

height: expression((offsetHeight +offsetTop)+'px');

The problem is that we can't retrieve the bottom from javascript,
so we have to rely on the fact that the height is set automatically, and the top will be set accordingly. We want the following: newHeight = parentHeight - bottomOffset, while bottomOffset = parentHeight -topOffset.
Gepost door op Geen opmerkingen:

Non-scrollable pages with fixed header/footer in CSS

I had a lot of trouble creating pages that don't have scrolling pages when the data on them gets too large. However, I think that it's an important asset if you're creating web applications: an application should always have all its functionality visible on loading (without having to scroll down). (I often refer to this as the dashboard feeling.).

This is how I did it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
body, html{
height:100%;
margin: 0px;
position:relative;
}
.content{
top: 10em;
/*next line is here because IE6 ignores bottom when top is defined.
The line itself will be ignored by other browsers */
/*take care because the value for the bottom offset is calculated in function
of the top, because we want to be dependent on em units */
height:expression(offsetParent.offsetHeight - offsetTop*2 + 'px');
bottom: 10em;
width:40%;
position:absolute;
background-color:red;
}

</style>
</head>
<body style="background-color:yellow">
<div class="content">
test
</div>
</body>
</html>


Note the tricks I had to do for getting the thing working in IE6: since top and bottom are not working correctly together (see bug report on quirksmode), I had to use expression here, which introduces sone javascript in the css. Also important: the header and footer have fixed heights defined as em, so if the user chooses the increase/decreaase fonts, the header/footer scales along.
Gepost door op Geen opmerkingen:

donderdag 2 april 2009

My Flex and Maven experiments

Trying to mavenize the as3mock project last days, as I need for a customer. However, flexmojos seems to be in some intermediate state now, meaning documentation is quite fuzzy now.
However, I got the archetype for libraries working using the following sequence:

  • mvn archetype:generate -DarchetypeRepository=http://repository.sonatype.org/content/groups/public -DarchetypeGroupId=org.sonatype.flexmojos -DarchetypeArtifactId=flexmojos-archetypes-library -DarchetypeVersion=3.1.0

    That is similar to the explanation on the flexmojo wiki, but with changed version number.

  • applied the changes as described on Carsten Schlipf's blog.

  • if you want to run the tests, you should also make sure that flashplayer is in the path

Gepost door op Geen opmerkingen:
Abonneren op: Posts (Atom)