scrollIntoView not quite working

davearia

Centurion
Joined
Jan 4, 2005
Messages
184
Hi All

I have a site for company training. The page has a number of questions, each of which has a RadioButtonList for the user to input their answers. I build all the questions and answers along with any images in an asp:Repeater. On the OnSelectedIndexChanged event of the RadioButtonList I have the following code:
Visual Basic:
''' <summary>
    '''  When the user selects an answer the page scrolls to next question.
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Public Sub ScrollToNextQuestion(ByVal sender As Object, ByVal e As System.EventArgs)
        'Flag to tell code when to scroll to another question.
        Dim selectNextItem As Boolean = False

        'Get the RadioButtonList that has just been pressed.
        Dim obj As New Object
        obj = sender

        'Get the client ID of this RadioButtonList.
        Dim clientID As String = obj.ClientID

        'Stores the client ID of the label so it can be used to scroll to when the training get to the last question.
        Dim lblQuestionClientID As String = String.Empty

        For Each ri As RepeaterItem In rptQuestionnaireQuestions.Items
            'Find the RadioButtobList in the repeater
            Dim rblAnswers As RadioButtonList = CType(ri.FindControl("rblAnswers"), RadioButtonList)

            If rblAnswers.ClientID = clientID Then
                'This is the RadioButtonList the user has just pressed, there set flag so that code will select on the next iteration.
                Dim lblQuestion As Label = CType(ri.FindControl("lblQuestion"), Label)

                'Make reference to this for the event of this being the last question.
                lblQuestionClientID = lblQuestion.ClientID
                selectNextItem = True
            Else
                If selectNextItem Then             
                    'This is the control to focus to, so scroll to it.
                    Try
                        'Reference the control in the repeater that we are going to scroll down to.
                        Dim lblQuestion As Label = CType(ri.FindControl("lblQuestion"), Label)                        

                        'Render javascript to scroll to next question.
                        ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "click", "ScrollToNextQuestion('" + lblQuestion.ClientID + "');", True)                       
                    Finally
                        'Reset flag.
                        selectNextItem = False
                    End Try
                End If
            End If           
        Next

        If selectNextItem Then
            Try
                'This is the last question we don't want the page to scroll back to the start.           
                ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "click", "ScrollToNextQuestion('" + lblQuestionClientID + "');", True)
            Finally
                'Reset flag.
                selectNextItem = False
            End Try            
        End If
    End Sub

Which in turn uses the following javascript:
C#:
function ScrollToNextQuestion(id) 
{
    var el = document.getElementById(id)
    if (el != null)
    {        
        el.scrollIntoView(true);
        el.focus();
    }
}
If I run the code and start at question 1, the code scrolls perfectly to the next question, until each reaches the end and then stops.

The problem I have is if I say decide to answer for example question 5 without answering questions 1-4 . Instead of it scrolling to question 6 as I would expect, the code leaves the page where it was.

After some experimenting I added an alert in my javascript and found that when the alert is hit the page has actully scrolled to where I want. It is only when I click the OK on the alert it then goes back to where it started i.e. question 5. The parameter being passed from my server side code to the javascript is just same. Debugging I can see no difference at all.

Does anyone know of any reason why the code would scroll down and then revert back?

Thanks, Dave.
 
Back
Top