• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1338
  • Last Modified:

ScrollIntoView

Hello, I am trying to get the ScrollIntoView javascript function to work, so that when a user updates the datagrid by clicking a button it will automatically scroll back down to the button in the datagrid. So far, I haven't gotten it to work, but here is what I have:

In my header i have:

<script Language="JavaScript" type="text/javascript">
function scrollme()
{
     LinkButton1.scrollIntoView(true);
}
</script>

Then in my form i have:
<asp:button id="btnAdd" style="Z-INDEX: 127; LEFT: 391px; POSITION: absolute; TOP: 738px" runat="server" onclick="javascript:scrollme()" Text="Add"></asp:button>

The error I get is a message saying it cannot find the function "scrollme".  Can anyone give an example of how to implement the scrollintoview function, or point out what I am doing wrong?

Thanks,
-Torrwin
0
Torrwin
Asked:
Torrwin
  • 8
  • 5
  • 3
1 Solution
 
RamuncikasCommented:
Hey, Torrwin.

Isn't it a javascript problem?

<asp:button id="btnAdd" style="Z-INDEX: 127; LEFT: 391px; POSITION: absolute; TOP: 738px" runat="server" onclick="javascript:scrollme(); return true;" Text="Add"></asp:button>

Ramuncikas
0
 
RamuncikasCommented:
And one more thing: where is your LinkButton1 located? If it is on page, it sould be ok, but if it's contained in datagrid or othe webcontrol like that, LinkButton1 gets different ID.

Ramuncikas
0
 
TorrwinAuthor Commented:
Now I am getting the error:

Compiler Error Message: BC30456: 'javascript' is not a member of 'ASP.NewPR_aspx'.

Well, its both an asp.net and javascript problem, as I am trying to intermix the two. =)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
TorrwinAuthor Commented:
Sorry, I was doing it from memory it should be like this:

<script Language="JavaScript" type="text/javascript">
function scrollme()
{
     btnAdd.scrollIntoView(true);
}
</script>
0
 
RamuncikasCommented:
Blurry eyes....time to go to sleep :))

Button is not a HTML control, it a WEB control, so you cannot use the code with javascript: onclick.

Here are walkarounds:

1. On page load event add javascript to a button
btnAdd.Attributes("onclick")="javascript: LinkButton1.scrollIntoView(true)"

2. Add a HTML control and put the javascript directly into aspx source, like:
<a onclick="javascript: LinkButton1.scrollIntoView(true)">Scroll</a>

Hope this will help
Ramuncikas
0
 
TorrwinAuthor Commented:
Ok, I tried those and I couldn't seem to get them to work.

1)  I didn't recieve an error, all it did was add a line through the page at the location of the button.

2)  I'm not sure where to stick it exactly, i tried this:
      <asp:LinkButton id="LinkButton1" runat="server" CommandName="Insert">Add</asp:LinkButton><a onclick="javascript: LinkButton1.scrollIntoView(true)"></a>
0
 
RamuncikasCommented:
Well,

Like microsoft would say "Behavior by design" :)
When I put ASPButton and add javascript at page_load event, it works OK with certain condition: ASPButton is rendered as <INPUT TYPE="submit">, that meens, when you press it, form is submitted and the page is reloaded, thow very shortly you can see ASPButton doing it's javascript job.

When using simple HTML button, it works fine. <INPUT TYPE="button"> does not submit a form, page is not reloaded and HTML button does it's javascript job very well.

In case you need only functionality when user pushes a button and scrolls to a certain control, HTML button will do the job.

But, if you want a page to scroll back to the location where user pressed a ASPbutton, there are two ways. First of all I'd like you to try setting page's SmartNavigation property to true. If this won't give you the desired efect, tell me and I'll try to figure out how to make javascript work on ASPButton control.

Ramuncikas
0
 
TorrwinAuthor Commented:
Well, I was told SmartNavigation only works in Internet Explorer, so I need to use javascript.
0
 
RamuncikasCommented:
Hmm....OK

The what about logic like this:

Make <A name="<ID>"> or something in a datagrid's template column and after updating use response.redirect(yourpage.aspx#<ID>)

I haven't tried this but it's just an idea. Maybe it will work, uh? :)

Ramuncikas
0
 
TorrwinAuthor Commented:
Just to update, I haven't had a chance to try this yet due to being so busy on another project, but I will asap. =)
0
 
TorrwinAuthor Commented:
Ok, I tried that, and it didn't work. =\
0
 
raterusCommented:
Torrwin,

to fix your original problem, you need to put the scrollIntoView() javascript that runs when the page loads BELOW the tag it is referencing.  If you put it above, the browser doesn't know about it yet.  No reason it shouldn't work after you do this.  Let me know if you run into more problems.

--Michael
0
 
raterusCommented:
small example, just reference the correct id of your control in the function:
--

<span id="anyElement">Scroll to me</span>

<script language="javascript">
  document.getElementById("anyElement").scrollIntoView();
</script>
0
 
TorrwinAuthor Commented:
Ok, yes that works for the one element, but I have several elements on my page.  For example, I have 2 caldendar controls, and a datagrid.  If they click the grid, it should return to the grid on postback.  If they click a calendar control, it should go to the calendar on postback, not the grid.

How can we make it work for more than one element?
0
 
raterusCommented:
If you can get a control reference to it in code, you can scroll to it, use RegisterStartupScript() to do it, as it will add the script right before the closing </form> tag.

Page.RegisterStartupScript("ScrollToMe", "<script language='JavaScript'>document.getElementById('" & anyASPNETcontrol.ClientID & "').scrollIntoView();</script>")
0
 
TorrwinAuthor Commented:
Works great, thanks Raterus.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now