What's New?

[CLOSED] How to detect scroll event inside iframe

  1. #1
    Mar 02, 2012, 1:32 AM

    [CLOSED] How to detect scroll event inside iframe

    Hi,

    I have mainpage Default.aspx, inside this mainpage contains iframe (Default_b.aspx).
    The mainpage will be put inside container (System.Windows.Forms.WebBrowser component).
    How to detect scroll event inside iframe? Let say if I scroll the iframe, I expect there will be alert message javascript.

    Thanks

    Below is the Default.aspx
    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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 runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">    
    <ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">                                         
                <Center>
                    <ext:Panel ID="PGroupHeader" runat="server" Layout="ColumnLayout" IDMode="Explicit">
                        <Items>
                            <ext:ColumnLayout ID="ColumnLayout_Content" runat="server" Split="true" FitHeight="true">
                                <Columns>
                                    <ext:LayoutColumn ColumnWidth="0.5">                                             
                                        <ext:Panel ID="panel_1" runat="server">                                            
                                            <Items>  
                                                <ext:Label ID="Label2" runat="server" Text="Panel Content" ></ext:Label>                                                       
                                            </Items>                                                                                               
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                    <ext:LayoutColumn ColumnWidth="0.5">
                                        <ext:Panel ID="panel_2" runat="server" >
                                            <Items>                                                                                                        
                                                <ext:BorderLayout ID="BorderLayout_p2" runat="server">
                                                    <Center>                                                            
                                                       <ext:Panel ID="panel_2_center" runat="server" >
                                                            <AutoLoad Url="Default_b.aspx" Mode="IFrame" ShowMask="true" NoCache="true" >                                                                  
                                                            </AutoLoad>                                                                
                                                        </ext:Panel>                                                                                                                                                                                                               
                                                    </Center>
                                                </ext:BorderLayout>                                                
                                            </Items>
                                        </ext:Panel> 
                                    </ext:LayoutColumn>
                                </Columns>
                            </ext:ColumnLayout>
                        </Items>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>            
    </form>
</body>
</html>
    Below is the Default_b.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default_b.aspx.cs" Inherits="Default_b" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <style>
        html
        {
            margin:0px 0px 0px 0px;    
            padding:0px 0px 0px 0px;
            height:100%;    
        }
        body
        {
            font-family:Arial, Segoe UI;
            font-size:12px;
            font-weight:bold;
            margin-bottom:0px;
            margin-top:0px;
            margin-left:2px;
            margin-right:2px;
            padding:0px 0px 0px 0px;    
            height:100%;
            overflow: scroll;
            overflow-x: auto;
        }
    </style>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>            
            <tr><td>test</td></tr>
            <tr><td>test</td></tr>
<%--......Please copy and paste to create more rows until the vertical scrollbar shown.....--%>            
            <tr><td>test</td></tr>
            <tr><td>test</td></tr>
        </table>
    </div>
    </form>
</body>
</html>
    Last edited by Daniil; Mar 05, 2012 at 7:29 AM. Reason: [CLOSED]
  2. #2
    Mar 02, 2012, 8:13 AM
    Hi,

    The following appears to be working in IE6-9, FireFox and Chrome.

    Example
    <ext:ResourceManager runat="server">
    <Listeners>
        <DocumentReady Handler="var onScroll = function () {
                                    console.log('scroll');
                                };
                                if (Ext.isIE6 || Ext.isIE7) {
                                    document.body.onscroll = onScroll;
                                } else {
                                    window.onscroll = onScroll;
                                }" />
    </Listeners>
</ext:ResourceManager>
    If you won't use Ext.NET on that page, you should place that code in body onload listener. And, certainly, determine a browser manually instead "Ext.isIE6".
  3. #3
    Mar 02, 2012, 8:24 AM
    Hi Daniil,

    Thanks.. It works fine in IE only.
    But if I put the mainpage inside the container (System.Windows.Forms.WebBrowser component), the scroll event doesnt firing.

    If I remove the attribute overflow and overflow-x in body Default_b.aspx, the scroll event works fine inside container.

    Please help.. Thanks
  4. #4
    Mar 02, 2012, 8:39 AM
    Quote Originally Posted by nhg_itd View Post
    Thanks.. It works fine in IE only.
    Do you mean that it doesn't work in FireFox and Chrome?

    Quote Originally Posted by nhg_itd View Post
    But if I put the mainpage inside the container (System.Windows.Forms.WebBrowser component), the scroll event doesnt firing.
    Please demonstrate how it looks.
  5. #5
    Mar 05, 2012, 1:31 AM
    Hi Daniil,

    Apologize.. It's fine if I use document.body.onscroll.
    Thanks a lot for your help.

Similar Threads

  1. [CLOSED] Detect TriggerField trigger inside directEvent
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 02, 2012, 10:37 PM
  2. [CLOSED] Scroll event on IFrame Panel
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 19, 2011, 10:56 AM
  3. [CLOSED] How to detect SpliterBar Move event from Resize event
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Dec 27, 2010, 5:08 PM
  4. [CLOSED] Override onMouseDown event in CheckboxSelectionModel inside Iframe is not working
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 13, 2010, 5:09 PM
  5. grid scroll inside iframe
    By [WP]joju in forum 1.x Help
    Replies: 1
    Last Post: Oct 29, 2009, 5:27 AM

Posting Permissions