Home » Guides and Tutorials » JavaScript FAQ

JavaScript FAQ

How do I find the height and width of the client area of the browser window?

<script type="text/javascript">
//IE5+, Mozilla 1.0+, Opera 7+

function getClientWidth()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}
function getClientHeight()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}
</script>

Example:

How do I get the cursor position in the textarea element?

Argument for the function is textarea object. Example: getCaretPos(document.formName.textareaName);

<script type="text/javascript">
//IE4+, Mozilla/Gecko
function getCaretPos(obj)
{
  obj.focus();
  
  if(obj.selectionStart) return obj.selectionStart; //Gecko
  else if (document.selection) //IE
  {
    var sel = document.selection.createRange();
    var clone = sel.duplicate();
    sel.collapse(true);
    clone.moveToElementText(obj);
    clone.setEndPoint('EndToEnd', sel);
    return clone.text.length;
  }
  
  return 0;
}
</script>

Example:

Cursor position is:

How do I remove the focus rectangle(dotted box) around link (around picture link), when clicking on links?

When click the link will appear a dotted rectangle around the link that was clicked. But sometimes it can corrupt the appearance. Using the method blur() in a link eliminates the dotted rectangle.

<a href="..." onfocus="this.blur()">...</a>

Or:

<a href="..." onclick="this.blur()">...</a>

Using onclick event hadler is safer than using onfocus because onfocus interupts the use of keyboard navigation .

Scripts and Tricks:

Guides and Tutorials:

JavaScript FAQ