Cross-browser rounded vector corners

As a web developer, I've been patiently waiting for the designer community to finally decide that rounded corners and drop shadows are out of style. I've been waiting since about 1999 so, uh, you know, any day now guys. I'll just be waiting here in web developer hell trying to construct a cubic igloo. There are a number of tricks for creating roundtangles, from nesting a bunch of divs with background images, to jQuery scripts that will dynamically build successive 1-pixel-thick divs to render the corners. Today, I came across another method which simulates the CSS 3 border-radius vector corner effect in most browsers, using a little bit of conditional HTML and a bunch of browser-specific CSS properties. You'll have to check the source on the linked page below to see how it's done, but basically VML is used for IE support, and the -moz-border-radius and -webkit-border-radius properties are applied for Firefox and Safari users. It wouldn't be a difficult task to simplify this a bit with jQuery and roll all of the necessary markup and css tweaks inside a single class target. HTML/CSS Vector Corners

Passing data using AJAX

The XML data is not the only way how to pass data from the server to browser. The data can be passwd as XML, HTML, just a string, or JSON.

What is JSON?

JSON is JavaScript Object Notation. It is much easy to work with JSON then parse XML data.

When you receive JSON data from the server you will need to evaluate the data into variable and access the data as structure or an array.

This is JSON data:

[ { author: 'name a', title: 'title #1' },
  { author: 'name b', title: 'title #2' },
  { author: 'name b', title: 'title #3' } ]

This is how to access this data:

var books = reval( req.responseText );
element.innerHTML = books[0].author;

This is how to modify and produce JSON stream:

books[0].author = "me";
String newJSONstream = books.toJSONString();

This is simple. Enjoy!

Hot to get an absolute location of the HTML element

The function below will give you absolute position of an element in the browser window. This you will need to move element to position relative to another element’s position.

function findPos(obj)
{
  var curleft = curtop = 0;
  if (obj.offsetParent)
  {
    curleft = obj.offsetLeft;
    curtop = obj.offsetTop;
    while (obj = obj.offsetParent)
    {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    }
  }
  return [curleft,curtop];
}

Remember, when you need to set new position, the value must be in pixels.

toolTip.style.top = new_Y+"px";
toolTip.style.left = new_X+"px";