Search code examples
htmlvb6framesframeset

HTML: one scrollbar for two frames


I am having trouble having one scrollbar for two frames as seen in: Two frames one scrollbar

Below is my code:

<FRAMESET ROWS="151,*">
        <%if (something) then %>
            <FRAME SRC="UserQueue_Header.asp" NAME="UserQueue_Header" SCROLLING="no" NORESIZE />
            <FRAME SRC="UserQueue_Detail.asp" NAME="UserQueue_Detail" SCROLLING="yes" />
        <%else%>
            <FRAME SRC="UserQueue_Header.asp?SortField=<%=SortField%>&SortOrder=<%=SortOrder%>" NAME="UserQueue_Header" SCROLLING="no" NORESIZE />
            <FRAME SRC="UserQueue_Detail.asp?SortField=<%=SortField%>&SortOrder=<%=SortOrder%>" NAME="UserQueue_Detail" SCROLLING="yes" />  
        <%end if%>
</FRAMESET>

Solution

  • This worked for me only in Firefox. I had to set scrolling = yes for UserQueue_Header.

    <SCRIPT language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></SCRIPT>
    <SCRIPT language="javascript" type="text/javascript" src="jquery.frameready.js"></SCRIPT>
    

    $(document).ready(function()
    {
    // Sync Header Frame with Detail Frame`
    $.frameReady( function() {
    
        var ifr2 = $(window.parent.document.getElementsByName('UserQueue_Detail')[0].contentWindow);
    
       $(document).scroll( function(){
    
             ifr2.scrollLeft($(document).scrollLeft());
        });
      },
      "UserQueue_Header"
    );
    
    // Sync Detail Frame with Header Frame
    $.frameReady( function() {
    
        var ifr1 = $(window.parent.document.getElementsByName('UserQueue_Header')[0].contentWindow);
    
       $(document).scroll( function(){
    
             ifr1.scrollLeft($(document).scrollLeft());
        });
      },
      "UserQueue_Detail"
    );
    
    });
    

    This works both in IE and Firefox:

        <SCRIPT language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></SCRIPT>
    

    $(window).load( function(){
    
      var ifr1 = $(window.frames[0]);
      var ifr2 = $(window.frames[1]);
    
      ifr1.scroll( function(){ 
    
         ifr2.scrollLeft(ifr1.scrollLeft());
      });
    
      ifr2.scroll( function(){
    
         ifr1.scrollLeft(ifr2.scrollLeft());
      });
    });
    
    <frameset>
        <frame src="test.html"/>
        <frame src="test.html"/>
    </frameset>