AngularJS Fixed Header Directive and Demo

Here’s the directive Lance Finney and Steve Molitor created in github:

Here’s the demo:

Steve says, “The demo is ugly on purpose because we wanted it to focus on the essential markup and css necessary to use the directive.”

Yours truly is credited in the README notes.

Scrollbar Width Hack

Have you ever wanted to line something up with the right side of the content of an element with a scrollbar, but were frustrated because scrollbar widths vary by browser (including mobile ones where they might not be visible)? Yeah, me too. I just made a demo page of a hack for that. It creates an invisible element with a scrollbar on it for positioning.  This seems to do what I need right now.  What would be the best, but I don’t have an answer for, is a way to do something like this only taking into account whether the visible element with the scrollbar has a scrollbar or not.  My solution is to make sure it always does.  Doing the same thing when it might not is the next question.  I can think of a couple of ways to do this with JavaScript, but I wanted to do it with CSS.

Stromae videos “Tous Les Mêmes”


This is the new video for the song Tous Les Mêmes. It is a complicated, conceptual video with dance, lights, and post production effects. Part of the complexity is that Stromae plays both members of a couple at once, by switching which profile is showing. It must be hard to choreograph always walking one direction when it’s the man and the other direction when it’s the woman. There are also red and green lights which show who’s turn it is. Stromae did a good job of switching between roles in the first video when it was a solo. The old video is lighter, but the song is pretty dark.

Papaoutai is another excellent Stromae video.

MP3 Songs I Can’t Buy in the USA

Here’s a list of songs that I heard and tried to buy on iTunes USA or Amazon and couldn’t. I would like to buy them legally, and some of the sites out there selling them might be legal, but it’s confusing. I’m annoyed that iTunes has different music in the different international stores and won’t let you buy from a store outside your own country. (The last time I looked into it, your credit card address had to match the store’s region.) These are the songs I’m thinking of at the moment, but will add to the list as I remember more.

Bradez – Simple

Morsel Cake Recipe

Preheat oven to 350 degrees

1 cup sugar
1/2 cup butter
2 cups sifted flour

2 teaspoons brown sugar
1 teaspoon cinnamon

1 1/2 teaspoons baking powder
1/2 teaspoon baking soda
1/2 teaspoon salt

2 eggs
1 small carton sour cream (1 cup/8 oz?)
6 ounces semi-sweet chocolate chips (1/2 package)

bunt cake pan – greased

  1. preheat oven to 350 degrees
  2. cream together sugar, butter and flour.
  3. Take out 2 tablespoons of mixture for the top of the cake. Add cinnamon and brown sugar and set aside.
  4. mix all dry ingredients (except cake toppings above)
  5. add and mix wet ingredients
  6. pour in to a greased bunt cake pan
  7. sprinkle topping on top
  8. bake at 350 degrees for 45-60 minutes

Fade-Container – Text Truncation in Tables, Multiple Lines, and no Calculation

See the test page.

The CSS ellipsis is great and now pretty well supported; however, there are times one can’t use it. It doesn’t work in table cells of variable width, and won’t work if you want your text to wrap to a second or third line and then truncate. I came up with a technique which will work in those situations. I call it the “fade-container”. It works especially well when you want the table rows to be a uniform height and you want to truncate text that is too long to fit without calculating anything. This technique also works with IE6.

First, a quick explanation of the challenges-
The CSS ellipsis can only be one line (not wrapped to multiple lines) because it needs “white-space: nowrap;”.
The CSS ellipsis is measured by the browser as the width of the available space. You can do this test, create a fixed width container. Inside put 2 spans with text in them. The first give a short bit of text that fits easily inside the container. The second span give a long rambling novel that will need truncation. Style both of them with the ellipsis rules.

span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

If you test the width of these with JavaScript you will see that the browser considers them both the width of their container, even the one that’s shorter.

A table calculates the width of columns by calculating the the contents first, and then calculating the columns second. Putting long non-breaking content into a table, which is what happens when one sets the content to nowrap, usually looks bad and often breaks the table.

There are good reasons why you wouldn’t want to use JavaScript to calculate the contents of each cell. The fade-container method means you don’t have to calculate anything. The markup is

div class="fade-container" title="content goes here"
     content goes here
     div class="fade"

but see the test page for the whole thing.

The way this works is that the text goes inside a div which hides the overflowed text. An image is positioned in the div. The image goes from transparent to opaque, matching the background color of the table cell. If text is long it will flow under the image looking like it’s faded out. If the text is short it will end before the image, which will be invisible, since the colored part matches the background under it.

This can be adjusted to wrap to one or more lines with the CSS. The fade-container has a title with the full content in it in case the user wants to see it by hovering.

The fade div has a gradient which goes from transparent to the container’s background color. This can be done with CSS gradients or with a png for older browsers. If your table row has a different background for hover or selected or has zebra stripes, you will need additional fade styles to match.

The hyphens, word-wrap and word break is to reduce the amount of white-space at the end of the line before the text wraps. If the wrapping word is long, it looks better to hyphenate it instead of showing a gap, which won’t give a visual indicator that there is a fade. For one line I use “word-break: break-all;” because it will show that there’s more text to come, but for multiple lines I won’t use that because it chops a word indiscriminately and that will show on the top lines.

You will need new images and different positioning for non left-to-right languages. You will also need additional colored fades if you have zebra striped tables or the table row backgrounds change color on hover.

Dogs and Ibuprofen, Pills in Pockets

There was a woman who walked her dog each day at a dog park.  She kept a pocket full of dog treats and handed them out to each dog that came to greet her.  One day she gave a dog a treat and then realized that it was not a dog biscuit but a super ibuprofen pill she had in the same coat pocket.  The dog had eaten it and although she told the dog’s owner what had happened, neither owner realized the gravity of the situation.

Later, the dog threw up but the owner figured the dog was getting the pill out of her system.  The next day, the owner took the listless dog to the vet who had to keep the dog there for several days on an IV.  Ibuprofen can cause kidney failure and permanent damage in dogs (and people as well).  The dog is doing well now, but might have some permanent damage and will have to have her kidney function tested every year for the rest of her life.

Apparently lots of people carry ibuprofen around in their pockets, and apparently lots of people also carry dog treats in their pockets too.  Even though putting pills and dog treats in the same pocket might sound kind of gross, it seems to be a very common practice.

Hopefully reading this can help prevent accidents for others.