Question

I have a little bit of Javascript that almost works correctly. Here’s the code:

function toggle(curlink) {
 curlink.style.backgroundColor = curlink.style.backgroundColor == "yellow" ? "transparent" : "yellow";
 var maindiv = document.getElementById("grid");
 var links = maindiv.getElementsByTagName("a");
 var list = "";
 for (var i = 0; i < links.length; ++i) {
  var link = links[i];
  if (link.style.backgroundColor == "yellow") {
   list += ("," + parseInt(link.style.left, 10) + "-" + parseInt(link.style.top, 10));
  }
 }
 document.theForm.theList.value = list.substring(1);
 return false;
};

window.onload = function() {
 var links = document.getElementById("grid").getElementsByTagName("a");
 for (var i = 0; i < links.length; ++i) {
  links[i].onclick = function() { return toggle(this); }
 }
};

The issue is with line #9; it only works when I specify values for the top and left style property of every link in the array. How do I get the top and left style property values (or X and Y coordinates) of each link in the array with Javascript when those values aren’t given?

Also, what would the code above look like in jquery? Not that it’s needed – I just want to reduce the code a little and dabble in the jquery framework (I’m a Javascript newbie).

Thanks in advance,
Dude-Dastic

Answer 1

link.offsetLeft and link.offsetTop. More about finding position here. They’ll be positions relative to the offsetParent, but the link shows a way to get position relative to the document.

offsetParent will evaluate to the body if the parent elements are positioned statically or there’s no table in the parent hierarchy. If you want a position other than body then update the parent of the links to have a non-static position, perhaps relative

I’m not familiar with JQuery so I can’t help there