Friday, August 31, 2007

How get HTML element real position

I have spent a lot of time trying get the real position of DIV element. And I have done it, but only at Firefox. It is a complex issue to find real top and left of the element, because of IE and FF returns different offsetLeft and offsetTop and this result is depends on style.position value of element.
MochiKit helped me. There is an undocumented function MochiKit.Position.positionedOffset(element) that returns what I need. This function is not documented yet, because development still working. But as they says:"If it is denied but very, very need, than it is aloowed" :)
How I use it:

divForEntries.style.left =
    MochiKit.Position.positionedOffset(this.htmlView).x +
    this.htmlView.offsetWidth -5;
divForEntries.style.top = 
    MochiKit.Position.positionedOffset(this.htmlView).y;

Thursday, August 30, 2007

MochiKit - powerfull JavaScript framework



Many of us often have a deal with implementing base functions for JavaScript. At Java we have JDK with a lot of helpfull classes. But at the case of JavaScript developers often have to invent a wheel.
But I found a great framework - MochiKit. It is a set of util classes. I will not tell about all thier capabilities, only which I have used.

1. DIV slide up and slide down.

There is the function:
function slide(elementId){
  var element = document.getElementById(elementId);
  if (element){
    if (element.slideDown){
      MochiKit.Visual.slideDown(element);
      element.slideDown = false;
    }else{
      MochiKit.Visual.slideUp(element);
      element.slideDown = true;
    }
  }
}