search

randolph249 / iscroll-js

Automatically exported from code.google.com/p/iscroll-js
MIT License
0 stars 0 forks source link

Scroll inside another Scroll #51

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
Greetings, I have a web page with 2 scroll, one for the full page and one 
internal to a listing on a grid, but the second scroll does not work and I can 
not move the grid to display all the information it returns.

As handling this case.

this is my code.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <link rel="stylesheet" type="text/css" href="../App_Themes/default/scrollbar.css" />
        <style type="text/css" media="all"> 
            #contentScroller {
                position:absolute; z-index:1;
                top:45px; bottom:48px; left:0;
                width:100%;
                height:100%;
                overflow:scroll;
            }

            #scroller {
                position:relative;
                -webkit-tap-highlight-color:rgba(0,0,0,0);

                float:left;
                width:100%;
                padding:0;
            }

            .page
            {
                height: 4px;
            }

        </style>
        <script type="text/javascript" language="JavaScript" src="../js/Validaciones.js"></script>
        <script language="JavaScript" type="text/javascript">
            function antierror(){
                return true
            }
            window.onerror = antierror;  
        </script>
        <script type="text/javascript" src="../js/iscroll.js?v3.7.1"></script>

        <script type="text/javascript">
            var scrollContent;
            var scrollGrid;

            function loaded() {
                scrollContent = new iScroll('contentScroller', { bounceLock: true });
                scrollGrid = new iScroll('pnlScroll', { bounceLock: true });
            }

            //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            //document.addEventListener('DOMContentLoaded', loaded, false);
            window.addEventListener('load', loaded, false);
        </script>
    </head>
    <body class="page">
        <form id="frmVst" runat="server">
            <div id="contentScroller">
            <div id="scroller">
            <ajaxToolkit:ToolkitScriptManager runat="Server" EnableScriptGlobalization="true"
                EnableScriptLocalization="true" ID="ScriptManager1" />

        <table border="0" width="100%" id="table2" cellpadding="0" cellspacing="0" class="TablaFondoBlanco">
            <tr>
                <td align="left" class="tituloreportes">
                    <asp:UpdatePanel id="UpdatePanelF" runat="server">
                        <contenttemplate>
                            <table cellSpacing=0 cellPadding=0 width="100%" border=0>
                                <TBODY>
                                    <tr>
                                        <td style="WIDTH: 20px">
                                            <asp:Image id="Image1" runat="server" ImageUrl="~/images/iconos/IcoRep.jpg"></asp:Image>
                                        </td>
                                        <td class="subtitle" align=left>Visitas por Fecha de Conexión</td>
                                        <td align=right>
                                            <table id="table6" cellSpacing=0 border=0>
                                                <TBODY>
                                                    <tr>
                                                        <td>
                                                            <asp:DropDownList id="cboLinea" onmouseover="popUp(event,'Linea')" onmouseout="popUp(event,'Linea')"  runat="server" CssClass="combo" AutoPostBack="true" Width="120px" OnSelectedIndexChanged="cboLinea_SelectedIndexChanged"></asp:DropDownList>
                                                        </td>
                                                        <td>
                                                            <asp:DropDownList id="cboCiclo" onmouseover="popUp(event,'Ciclos')" onmouseout="popUp(event,'Ciclos')" runat="server" CssClass="combo" AutoPostBack="true" Width="120px" OnSelectedIndexChanged="cboCiclo_SelectedIndexChanged"></asp:DropDownList>
                                                        </td>
                                                        <td>
                                                            <asp:DropDownList id="cbosupervisor" onmouseover="popUp(event,'Supervisor')" onmouseout="popUp(event,'Supervisor')" runat="server" AutoPostBack="true" Width="120px" CssClass="combo" OnSelectedIndexChanged="cbosupervisor_SelectedIndexChanged"></asp:DropDownList>
                                                        </td>
                                                        <td>
                                                            <asp:DropDownList id="cboVisitador" onmouseover="popUp(event,'Visitador')" onmouseout="popUp(event,'Visitador')" runat="server" Width="120px" CssClass="combo"></asp:DropDownList>
                                                        </td>
                                                        <td>
                                                            <asp:DropDownList id="cboTarea" onmouseover="popUp(event,'Tarea')" onmouseout="popUp(event,'Tarea')" runat="server" Width="120px" CssClass="combo"></asp:DropDownList>
                                                        </td>
                                                        <td>
                                                            <asp:DropDownList id="cboTipoClientes" onmouseover="popUp(event,'TipoCli')" onmouseout="popUp(event,'TipoCli')" runat="server" Width="120px" CssClass="combo"></asp:DropDownList>
                                                        </td>
                                                        <td>
                                                            <asp:ImageButton id="btnConsultar"  runat="server" ImageUrl="~/images/botones/Btn_Consultar.png" BorderStyle="None"></asp:ImageButton>
                                                                <asp:UpdateProgress id="upFormulario" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanelF">
                                                                    <ProgressTemplate>
                                                                        <table style="WIDTH: 100%; HEIGHT: 90%" id="table1" class="updateProgressForm" runat="server">
                                                                            <TBODY>
                                                                                <tr vAlign=middle align=center>
                                                                                    <td class="loadbar">
                                                                                        <IMG style="WIDTH: 30px; HEIGHT: 27px" src="../images/botones/indicator.gif" />Loading ......
                                                                                    </td>
                                                                                </tr>
                                                                            </TBODY>
                                                                        </table>
                                                                    </ProgressTemplate>
                                                                </asp:UpdateProgress>
                                                                <cc1:UpdateProgressOverlayExtender id="UpdateProgressOverlayExtender1" runat="server" CssClass="updateProgress" ControlToOverlayID="UpdatePanelF" TargetControlID="upFormulario"></cc1:UpdateProgressOverlayExtender>
                                                            </td>
                                                        </tr>
                                                    </TBODY>
                                                </table>
                                            </td>
                                        </tr>
                                    </TBODY>
                                </table>
                                <table cellSpacing=0 cellPadding=0 width="100%">
                                    <TBODY>
                                        <tr>
                                            <td class="subtitle" align="right">
                                                <asp:Label ID="lblDescripcionCiclo" runat="server" Text="Label"></asp:Label>    
                                                <asp:Timer id="Temporizador" runat="server" OnTick="Temporizador_Tick"></asp:Timer>
                                                <asp:Label id="Label1" runat="server"></asp:Label>
                                            </td>
                                        </tr>
                                    </TBODY>
                                </table>
                            </contenttemplate>
                        </asp:UpdatePanel>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td align="left">
                                    <table>
                                        <tr>
                                            <td align="center" width="15px">
                                                <asp:Image ID="Image4" Width="14px" Height="14px" runat="server" ImageUrl="../images/iconos/icono_excel.gif" />
                                            </td>
                                            <td nowrap>
                                                <asp:LinkButton ID ="lnlExcel" SkinID="link-button" Text ="Enviar a Excel" runat = "server"></asp:LinkButton>
                                            </td>
                                            <td align="center" width="15px">
                                                <asp:Image ID="Image2" Width="14px" Height="14px" runat="server" ImageUrl="../images/iconos/print.gif" />
                                            </td>
                                           <td>
                                                <a href="javascript:window.print();">Imprimir</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top" colspan="2" rowspan="">
                                    <asp:Panel ID="ContentPanel2" runat="server" Width="100%">
                                        <asp:UpdatePanel id="UpdatePanel77a" runat="server">
                                            <ContentTemplate>
                                               <asp:Panel ID="pnlScroll" runat="server" Width="1050px" Height="500px" ScrollBars="Horizontal" Visible="false">
                                                <asp:GridView ID="gvDatos" runat="server" AutoGenerateColumns="true" AllowPaging="true" PageSize="50" 
                                                    SkinID="GridView-Normal" EnableViewState="false" Width="100%">
                                                    <RowStyle HorizontalAlign="Right" />
                                                    <AlternatingRowStyle HorizontalAlign="Right" />
                                                </asp:GridView>
                                                </asp:Panel>
                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </asp:Panel>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        </div>
        </form>
    </body>
</html>

Maybe I'm not doing correctly, most likely, I'm new at this and work by trial 
and error.

I appreciate the help.

Sincerely, Omar

Original issue reported on code.google.com by omar.esp...@gmail.com on 16 Mar 2011 at 2:40

GoogleCodeExporter commented 8 years ago 
People may call me a troll, but please start by not layout your html page with 
<table>

Original comment by adrian...@concisegroup.com on 6 Jun 2011 at 1:33