onClick li item in frame focus move on top

zohaib82 · 01-12-2013, 08:41 AM

Hi,

In my project I am calling ul and li data in Iframe and when I click on link then it move fucus on top instead of selected item.

Following is the example of the problem.

testFrame.htm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tree Frame</title>
</head>
<body>
<table width="50%" border="0">
<tr id="frameRow">
<td>
<iframe id="treeFrame" src="http://localhost/treeFrame2.htm" width="50%" height="100%" scrolling="yes" frameborder="0">
</iframe>
<td>
</tr>
</table>
</body>
</html>

testFrame2.htm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Frame2</title>
<script language="javascript" type="text/javascript">
function focusMe(id)
{
documentBygetelementsbyid(id).focus();

}
</script>
</head>

<body>
<ul>
  <li><a href="#" id="1" onclick="javascript:focusMe('1');">menu1</a></li>
  <li><a href="#" id="2" onclick="javascript:focusMe('2');">menu2</a></li>
  <li><a href="#" id="3" onclick="javascript:focusMe('3');">memnu3</a></li>
  <li><a href="#" id="4" onclick="javascript:focusMe('4');">menu4</a></li>
  <li><a href="#" id="5" onclick="javascript:focusMe('5');">menu5</a></li>
  <li><a href="#" id="6" onclick="javascript:focusMe('6');">menu6</a></li>
  <li><a href="#" id="7" onclick="javascript:focusMe('7');">menu7</a></li>
  <li><a href="#" id="8" onclick="javascript:focusMe('8');">menu8</a></li>
  <li><a href="#" id="9" onclick="javascript:focusMe('9');">menu9</a></li>
  <li><a href="#" id="10" onclick="javascript:focusMe('10');">menu10</a></li>
  <li><a href="#" id="11" onclick="javascript:focusMe('11');">menu11</a></li>
  <li><a href="#" id="12" onclick="javascript:focusMe('12');">menu12</a></li>
  <li><a href="#" id="13" onclick="javascript:focusMe('13');">menu13</a></li>
  <li><a href="#" id="14" onclick="javascript:focusMe('14');">menu14</a></li>
  <li><a href="#" id="15" onclick="javascript:focusMe('15');">menu15</a></li>

</ul>
</body>
</html>

Any Solution?

- Thanks
Zohaib.

Old Pedant · 01-12-2013, 08:57 PM

First of all, you have to spell things correctly.

This line is COMPLETELY WRONG:

Code:

documentBygetelementsbyid(id).focus();

It *MUST* be

Code:

document.getElementById(id).focus();

and upper/lower case MATTER with JavaScript!

**********

Because you are using an <A> tag, after the focus is moved, the click on that tag will *STILL* then do the normal action of clicking an <A>...which is to move to the HREF of the tag.

Since all your HREFs are just "#", that means that focus will then go to the top of the page.

There are lots of ways to fix this.

Code:

<a href="#" id="1" onclick="javascript:focusMe('1'); return false;">

Or get rid of the silly <A> tags that are doing *NOTHING* useful:

Code:

<li onclick="this.focus();">menu1</li>

OR or or or...