scrollIntoView not quite working
scrollIntoView not quite working
scrollIntoView not quite working
scrollIntoView not quite working
scrollIntoView not quite working
scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working
scrollIntoView not quite working scrollIntoView not quite working
scrollIntoView not quite working
Go Back  Xtreme Visual Basic Talk > > > scrollIntoView not quite working


Reply
 
Thread Tools Display Modes
  #1  
Old 12-04-2008, 07:26 AM
Davearia's Avatar
Davearia Davearia is offline
Junior Contributor
 
Join Date: Jul 2004
Location: In A Perfect Cadence
Posts: 358
Question scrollIntoView not quite working


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:
Code:
''' <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:
Code:
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.
__________________
All right, but apart from the sanitation, the medicine, education, wine, public order, irrigation, roads, a fresh water system, and public health, what have the Romans ever done for us?
Reply With Quote
  #2  
Old 12-04-2008, 09:38 PM
Targe Targe is offline
Contributor
 
Join Date: Nov 2006
Posts: 615
Default

This *may* be a browser issue. I've had code do it to me as well but only in certain browsers. Check IE7, Opera, Safari, Chrome, and FireFox and verify it's consistently doing that.

A cheap workaround would be to apply an anchor tag where you need it. It's most likely the postback mixed with something else (or just the postback itself) is causing this.

Here's the reason why I think that:
Since JavaScript is client-based, the browser would scroll down, but once the JavaScript ends, the OnSelectedIndexChanged method you're calling the server, which must do a postback to execute the code in the event. This is why you see it scroll only with the JavaScript client-side code running.
Reply With Quote
  #3  
Old 12-09-2008, 02:31 AM
Davearia's Avatar
Davearia Davearia is offline
Junior Contributor
 
Join Date: Jul 2004
Location: In A Perfect Cadence
Posts: 358
Default

In the end I changed my strategy. As all these questions are in a repeater, I iterated through them and set only the question I wanted to be visible.
__________________
All right, but apart from the sanitation, the medicine, education, wine, public order, irrigation, roads, a fresh water system, and public health, what have the Romans ever done for us?
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Advertisement:





Free Publications
The ASP.NET 2.0 Anthology
101 Essential Tips, Tricks & Hacks - Free 156 Page Preview. Learn the most practical features and best approaches for ASP.NET.
subscribe
Programmers Heaven C# School Book -Free 338 Page eBook
The Programmers Heaven C# School book covers the .NET framework and the C# language.
subscribe
Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition - Free 219 Page Preview!
This comprehensive step-by-step guide will help get your database-driven ASP.NET web site up and running in no time..
subscribe
scrollIntoView not quite working
scrollIntoView not quite working
scrollIntoView not quite working scrollIntoView not quite working
scrollIntoView not quite working
scrollIntoView not quite working
scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working scrollIntoView not quite working
scrollIntoView not quite working
scrollIntoView not quite working
 
scrollIntoView not quite working
scrollIntoView not quite working
 
-->