How To: Use JavaScript to Set the Page Position
First of all, sorry that I haven't posted in a while. I know all of my readers (namely - ME) have missed me deeply. I hope to find more time to release thoughts and whatnot soon.
If you are a web developer who deals with some kind of server-side programming, I am sure that at some point or another you will find this post useful.
Normally, when you have a LONG page of content (which we never do, do we?) a seemingly good solution to getting your visitor to a specific section of it would be to have a link to an anchor somewhere on the page. For example:
Then, somewhere down on the page you would have something like this:
If you are a developer using ASP.Net, you probably already know where I am going. The rest of you may as well, but in .Net you have the use of Server Controls. Effectively, server controls give you the power to send requests back to the web server without having to worry about most of the details involved with doing so.
In my most recent example, I have a Call Logging form for an online Trouble Ticket System where a user enters in some information about their caller and the problem that is being experienced, then chooses whether to issue a ticket. Well, it would be much easier to determine whether a ticket is necessary or not if they could see if another technician has issued one.
What I have done with this form is made it to when a certain amount of information is given, two DataGrids (tables) containing a listing of previous calls are displayed. One shows previous calls from the same person, and the other shows calls from others which may relate to the same issue. In order to not adversely affect the form itself and to prevent excess windows and postbacks, I have placed these at the bottom of the same page as the call logging form.
Now, hopefully I have not lost you and you can picture a rather large web form with two scrollable tables at the bottom of the page. If the tables just magically appear at the bottom of the page, you wouldn't be able to see them right away. The user would first need to know that they are there, and then scroll down to them. As you can imagine, this is not a very user-friendly approach for the user.
To make this effective, the page needs to scroll down to the two DataGrids so that they are presented to the user immediately. This was not an easy task to even plan, but I have found a way for you to perform this task rather easily.
First, you need to get the source of a JavaScript function which calculates coordinates on a web page from Matt Kruse. (Make sure you give him a donation too.) Here is the link:
Add this source to your web page the same way that you normally would.
Now, from here on out you will need to customize my example to fit your needs. I am just going to feed you the simplist way I can to show you the functionality.
Find the section on your page that you want to anchor for a postback event to focus on and add an anchor like so:
Make sure that you have included the ID and Name attributes, and that they are the same name. Also, it is necessary to have a space between the opening and closing anchor tags for browser compatibility.
Now, add a JavaScript function like the one below:
In my example, a PostBack causes the need to call this function, so here is an example of calling the JavaScript function from a .Net event:
This will insert the JavaScript just before the closing FORM tag in your HTML when it is compiled and sent to the web browser. Essentially, this mimics the action of adding another JavaScript function and calling it from the onload attribute in the BODY tag.
Of course if you have a more complicated example, you would have to make this one more flexibile to accept a parameter or more for multiple anchors, and whatever else you are trying to do - but this should get you started!
If you are a web developer who deals with some kind of server-side programming, I am sure that at some point or another you will find this post useful.
Normally, when you have a LONG page of content (which we never do, do we?) a seemingly good solution to getting your visitor to a specific section of it would be to have a link to an anchor somewhere on the page. For example:
Click here to go to the contentThen, somewhere down on the page you would have something like this:
My content is here and you have found it!If you are a developer using ASP.Net, you probably already know where I am going. The rest of you may as well, but in .Net you have the use of Server Controls. Effectively, server controls give you the power to send requests back to the web server without having to worry about most of the details involved with doing so.
In my most recent example, I have a Call Logging form for an online Trouble Ticket System where a user enters in some information about their caller and the problem that is being experienced, then chooses whether to issue a ticket. Well, it would be much easier to determine whether a ticket is necessary or not if they could see if another technician has issued one.
What I have done with this form is made it to when a certain amount of information is given, two DataGrids (tables) containing a listing of previous calls are displayed. One shows previous calls from the same person, and the other shows calls from others which may relate to the same issue. In order to not adversely affect the form itself and to prevent excess windows and postbacks, I have placed these at the bottom of the same page as the call logging form.
Now, hopefully I have not lost you and you can picture a rather large web form with two scrollable tables at the bottom of the page. If the tables just magically appear at the bottom of the page, you wouldn't be able to see them right away. The user would first need to know that they are there, and then scroll down to them. As you can imagine, this is not a very user-friendly approach for the user.
To make this effective, the page needs to scroll down to the two DataGrids so that they are presented to the user immediately. This was not an easy task to even plan, but I have found a way for you to perform this task rather easily.
First, you need to get the source of a JavaScript function which calculates coordinates on a web page from Matt Kruse. (Make sure you give him a donation too.) Here is the link:
Add this source to your web page the same way that you normally would.
Now, from here on out you will need to customize my example to fit your needs. I am just going to feed you the simplist way I can to show you the functionality.
Find the section on your page that you want to anchor for a postback event to focus on and add an anchor like so:
Make sure that you have included the ID and Name attributes, and that they are the same name. Also, it is necessary to have a space between the opening and closing anchor tags for browser compatibility.
Now, add a JavaScript function like the one below:
function ScrollToRelated(){
// ancRelated is the anchor name
var pos;
pos = getAnchorPosition('ancRelated');
self.scrollTo(pos.x, pos.y);
}
In my example, a PostBack causes the need to call this function, so here is an example of calling the JavaScript function from a .Net event:
Dim strScript As String = "" & _
"ScrollToRelated();" & _
""
If Not Page.IsStartupScriptRegistered("AnchorFocus") Then
Page.RegisterStartupScript("AnchorFocus", strScript)
End If This will insert the JavaScript just before the closing FORM tag in your HTML when it is compiled and sent to the web browser. Essentially, this mimics the action of adding another JavaScript function and calling it from the onload attribute in the BODY tag.
Of course if you have a more complicated example, you would have to make this one more flexibile to accept a parameter or more for multiple anchors, and whatever else you are trying to do - but this should get you started!
