Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question onClick li item in frame focus move on top

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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...
    Last edited by Old Pedant; 01-12-2013 at 09:04 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •