SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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="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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi Zohaib,

    The problem is here:

    Code JavaScript:
    function focusMe(id){
      documentBygetelementsbyid(id).focus();
    }

    Change that to this:

    Code JavaScript:
    function focusMe(id){
      document.getElementById(id).focus();
    }

    And all should be good.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    sorry I got to update in last post code.

    the problem still exists
    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>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    function focusMe(id)
    {
    
    document.getElementById(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>
    - Thanks
    Zohaib

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Ahh, I understand your problem now. Sorry.

    The reason this is happening is that the link is still being followed.
    You need to change your function to this:

    Code JavaScript:
    function focusMe(id){
      document.getElementById(id).focus();
      return false;
    }

    I also took the liberty of refactoring your code a little.

    The iframe:

    HTML 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>iFrame</title>
      </head>
    
      <body>
        <ul id="list">
          <li><a href="#">menu1</a></li>
          <li><a href="#">menu2</a></li>
          <li><a href="#">memnu3</a></li>
          <li><a href="#">menu4</a></li>
          <li><a href="#">menu5</a></li>
          <li><a href="#">menu6</a></li>
          <li><a href="#">menu7</a></li>
          <li><a href="#">menu8</a></li>
          <li><a href="#">menu9</a></li>
          <li><a href="#">menu10</a></li>
          <li><a href="#">menu11</a></li>
          <li><a href="#">menu12</a></li>
          <li><a href="#">menu13</a></li>
          <li><a href="#">menu14</a></li>
          <li><a href="#">menu15</a></li>
        </ul>
        
        <script type="text/javascript">
          var ul = document.getElementById("list");
          var items = ul.getElementsByTagName("a");
          for (var i = 0; i < items.length; ++i) {
            items[i].onclick = function(){
              this.focus();
              return false;
            }
          }
        </script>
      </body>
    </html>

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Pullo,

    Excellent Many Thanks

    Zohaib.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    This is bit complicated but can you give try to apply this solution for JQWidgets Tree in iFrame

    I am working on it.

    http://www.jqwidgets.com/community/t...s-move-on-top/

    - Thanks
    Zohaib.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi Zohaib,

    Could you provide a link to an example where I can see this in action?
    The code in the post you linked to contains a bunch of files I cannot reference (e.g. gettheme.js).

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,


    Sorry I can not upload jqwidgets-ver2.6.0.zip file because it it more than MB but you can easily download from website.

    http://www.jqwidgets.com/download/ and put treeFrame.htm and treeFrame2.htm file in root and include in JQWidgets file.

    Following is the file and jqxtree.js is the main file for Tree functionality.

    treeFrame2.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>
        <title id='Description'>In this demo the jqxTree is built from JSON data.</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="scripts/gettheme.js"></script>
        <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
    	<script language="javascript" type="text/javascript">
    		function focusMe(id)
    		{
    			document.getElementById(id).focus();
    			return false;
    		}
    		function returnfalse(this)
    		{
    			//alert('hi');
    			document.getElementById("11").focus();
    			this.focus();
    			return false;
    		}
    	</script>
    	<script type="text/javascript">
    
    /*
    	document.getElementById("zohaib").focus();
    
    	var items = ul.getElementsByTagName("li");
    	var x=document.getElementsByTagName("li");
    	alert(x.length);
      
          for (var i = 0; i < items.length; ++i) {
            items[i].onclick = function(){
              this.focus();
              return false;
            }
          }
    	  */
    
    </script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = getTheme();
                    var data = [
                    { "id": "2",
                        "parentid": "1",
                        "text": "Hot Chocolate"
                    }, {
                        "id": "3",
                        "parentid": "1",
                        "text": "Peppermint Hot Chocolate"
                    }, {
                        "id": "4",
                        "parentid": "1",
                        "text": "Salted Caramel Hot Chocolate"
                    }, {
                        "id": "5",
                        "parentid": "1",
                        "text": "White Hot Chocolate"
                    }, {
                        "text": "Chocolate Beverage",
                        "id": "1",
                        "parentid": "-1"
                    }, {
                        "id": "6",
                        "text": "Espresso Beverage",
                        "parentid": "-1"
                    }, {
                        "id": "7",
                        "parentid": "6",
                        "text": "Caffe Americano"
                    }, {
                        "id": "8",
                        "text": "Caffe Latte",
                        "parentid": "6"
                    }, {
                        "id": "9",
                        "text": "Caffe Mocha",
                        "parentid": "6"
                    }, {
                        "id": "10",
                        "text": "Cappuccino",
                        "parentid": "6"
                    }, {
                        "id": "11",
                        "text": "Pumpkin Spice Latte",
                        "parentid": "6"
                    }, {
                        "id": "12",
                        "text": "Frappuccino",
                        "parentid": "-1"
                    }, {
                        "id": "13",
                        "text": "Caffe Vanilla Frappuccino",
                        "parentid": "12"
                    }, {
                        "id": "15",
                        "text": "450 calories",
                        "parentid": "13"
                    }, {
                        "id": "16",
                        "text": "16g fat",
                        "parentid": "13"
                    }, {
                        "id": "17",
                        "text": "13g protein",
                        "parentid": "13"
                    }, {
                        "id": "14",
                        "text": "Caffe Vanilla Frappuccino Light",
                        "parentid": "12"
                    }]
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'id' },
                            { name: 'parentid' },
                            { name: 'text' }
                        ],
                        id: 'id',
                        localdata: data
                    };
                    // create data adapter.
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    // perform Data Binding.
                    dataAdapter.dataBind();
                    // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                    // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                    // specifies the mapping between the 'text' and 'label' fields.  
                    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                    $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });
    				$('#jqxWidget').jqxTree('selectItem', $("#jqxWidget").jqxTree('expandAll'));
    				$('#jqxWidget').bind('select', function (event) {
    					//var htmlElement = event.args.element;
    					//var item = $('#jqxWidget').jqxTree('getItem', htmlElement);
    					//var parentId = item.parentId;
    					//alert(event.args.element.id);
    					//document.getElementById(event.args.element.id).focus();
    					//return false;
    					//document.getElementById("childID").value=event.args.element.id;
                    	//$("#parentID").html("<div style='margin: 10px;'>" + parentId + "</div>");
    				});
                });
    			function expand_all(){
    				$('#jqxWidget').jqxTree('expandAll');
    			}
    
    			function collapse_all(){
    				$('#jqxWidget').jqxTree('collapseAll');
    			}
            </script>
            <div id='jqxWidget'></div>
    
    </div>
    </body>
    </html>

    If this does not work then I will email you source code OR show you demo online.


    - Thanks
    Zohaib.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    It would be easier for me if you could post a demo online.
    I'm off out now, but I can have a look at it later.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi again,

    So, it took me a while to get to the bottom of this.
    I believe the guy in the other thread was telling you that this is a kind of bug in jqwidgets and indeed, it doesn't seem possible to cancel this behaviour and prevent the iframe from jumping (as we did in the previous example).

    However, what you can do, is attach an event listener to the window of the iframe and record how far down the frame somebody has scrolled.
    Then, when they click on an element, it is sufficient to reposition the the list by setting scrollTop.

    Add this code to the bottom of treeFrame2.htm and things'll work as expected.

    Code JavaScript:
    $(document).ready(function(){
      var lastTop;
      var timeoutHandle;
     
      var handler =  function() {
        lastTop = $(this).scrollTop();
      }
     
      $(window).scroll(function(){
        clearTimeout(timeoutHandle);
     
        timeoutHandle = setTimeout(function() {
          handler();
        }, 100);  
      });
     
      $('.jqx-tree-dropdown-root').click(function(event){
        $(window).scrollTop(lastTop);
      });
    });

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Pullo,

    You save me from . . .

    You are brilliant Man and this forum has brilliant developer to support for complex problems.

    - Thanks
    Zohaib.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi Zohaib,

    No problem. I'm gad I could help you
    Thanks for taking the time to follow up.


Tags for this Thread

Bookmarks

Posting Permissions

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