Web Info & Tutorials

August 13th, 2007

ELLIPSIS OR “TRUNCATE WITH DOTS” VIA JAVASCRIPT

Steffen Rusitschka wanted a cross-browser text-overflow:ellipsis, so he created it and told us all about it via Ellipsis or “truncate with dots” via JavaScript.

You can see it in action, or download the code. The main ellipsis function:

JAVASCRIPT:
  1.  
  2. function ellipsis(e) {
  3.   var w = e.getWidth() - 10000;
  4.   var t = e.innerHTML;
  5.   e.innerHTML = "<span>" + t + "</span>";
  6.   e = e.down();
  7.   while (t.length> 0 && e.getWidth()>= w) {
  8.     t = t.substr(0, t.length - 1);
  9.     e.innerHTML = t + "...";
  10.   }
  11. }
  12.  
August 13th, 2007

CSS KEYS, AND THE SEARCH FOR THE RIGHT SPRITE

Glen Lipka wanted an easier way to manage the "one big matrix image that CSS uses to chop up to display pieces" technique, and wrote about the right sprite where he delves into various cleaner workarounds for the fact that Firefox doesn't support background-position-x. He ends up with foreground-sprites.

Jonathan Snook also talks a bit spritly in his piece on the 6 Keys to Understanding Modern CSS-based Layouts which includes details on the:

  • Box Model
  • Floated Columns
  • Sizing Using Ems
  • Image Replacement
  • Floated Navigation
August 13th, 2007

ANALYZING THE .MAC GALLERY AND SPEEDING IT UP 4X

As with everything Apple, there was a lot of buzz about their .Mac Web Gallery, including folk who thought it was too slow.

Steve Brewer looked into the code and has written up his findings which include:

  • How Apple left 128 lines of comments in
  • How the images are used inefficiently
  • How one change brought his testing to a .23ms average vs. Apples 2.1ms average