position the record in browser

@rbh033Feb 25.2009

I have a LONG list page of records in asp with the Inline Edit feature enabled. (The user is able to edit a particular record on the list page itself without dirceted to another page.)

When that selected record is in Inline Edit mode, the fields of the record will get their name & id etc.

So after the page is loaded in Inline mode, I use the code below in javascripts to bring that record displayed on top in the browser (IE) so that the user doesnt have to scroll to the selected record after loading.

window.location.hash = “<field name>”

However, the code will show the record on the very top. I wonder you guys have any idea to lower down its position a bit, say to the center.

Thank you very much!

to post a comment

JavaScript

15 Comments(s) _↴

@FangFeb 25.2009 — #

obj.scrollIntoView(); // top of screen
 window.scrollBy(0, -100); // down 100px

@rbh033authorFeb 25.2009 — #Hi Fang

I tried to put in the 2 lines of code as shown below, but it didnt work.

window.location.hash = "<field name>"

obj.scrollIntoView(); // top of screen

window.scrollBy(0, -100); // down 100px

I also tried to define obj as follows, but it didnt work too.

var obj = document.getElementById("<field name>");

obj.scrollIntoView(); // top of screen

window.scrollBy(0, -100); // down 100px

I missed something?

@FangFeb 25.2009 — #
I tried to put in the 2 lines of code as shown below, but it didnt work.

window.location.hash = "<field name>"

obj.scrollIntoView(); // top of screen

window.scrollBy(0, -100); // down 100px[/QUOTE]

Without the window.location.hash

I also tried to define obj as follows, but it didnt work too.

var obj = document.getElementById("<field name>");

obj.scrollIntoView(); // top of screen

window.scrollBy(0, -100); // down 100px
[/QUOTE]
[I]<field name>[/I] is this the ID?

Or [I]document.formName.elements['<field name>'].scrollIntoView();[/I]

@rbh033authorFeb 25.2009 — #Hi Fang

Yes, the <field name> in my question refers to ID.

I used

var obj = document.getElementById("x1_P_Exp_StartDate");
  obj.scrollIntoView(); // top of screen
  window.scrollBy(0, -200); // down 100px

but it didnt work.

Below are the lines before and after the field ID (ie. x1_P_Exp_StartDate ) that I am making used of.

-------------------------------------------------------------

<td style="white-space: nowrap; text-align: right">

<div>22/12/2007</div>

<input type="hidden" name="x1_P_JobAssigned_Date" id="x1_P_JobAssigned_Date" value="2007/12/22">

</td>

<td style="white-space: nowrap; text-align: right">

<input type="text" name="x1_P_Exp_StartDate" id="x1_P_Exp_StartDate" value="">

 <img src="images/calendar.png" id="cal_x1_P_Exp_StartDate" name="cal_x1_P_Exp_StartDate" alt="Pick a date" style="cursor:pointer;cursor:hand;">

<script type="text/javascript">

Calendar.setup({

inputField : "x1_P_Exp_StartDate", // ID of the input field

ifFormat : "%d/%m/%Y", // the date format

button : "cal_x1_P_Exp_StartDate" // ID of the button

});

</script>

</td>

<td style="white-space: nowrap; text-align: right">

<input type="text" name="x1_P_Exp_EndDate" id="x1_P_Exp_EndDate" value="">

 <img src="images/calendar.png" id="cal_x1_P_Exp_EndDate" name="cal_x1_P_Exp_EndDate" alt="Pick a date" style="cursor:pointer;cursor:hand;">

<script type="text/javascript">

Calendar.setup({

inputField : "x1_P_Exp_EndDate", // ID of the input field

ifFormat : "%d/%m/%Y", // the date format

button : "cal_x1_P_Exp_EndDate" // ID of the button

});

</script>

</td>

-------------------------------------------------------------

@FangFeb 25.2009 — #Looks like you are using the ID more than once which is invalid!

@rbh033authorFeb 26.2009 — #Hi Fang

The name should be unique as it only used once, but also no help.

var obj = document.getElementsByName("x1_P_Exp_StartDate");

obj.scrollIntoView(); // top of screen

window.scrollBy(0, -200); // down 100px

IE error message says "Object doesn't support this property or method"

@FangFeb 26.2009 — #[I]document.getElementsByName[/I] returns an array, reference it as such or use [I]getElementById [/I]if it is unique.

@rbh033authorMar 02.2009 — #Hi

Any idea why the second line doesnt work?

(First line works, and the position goes up to the top of window.)

window.location.hash = "<field name>"

window.scrollBy(0, -200); // down 100px

Thank you.

@FangMar 02.2009 — #Do you have a link?

@rbh033authorMar 02.2009 — #Below is my code.

I supposed I can use name="Focus".

------------------------------------------------
<td colspan="1" align="right"><span class="aspmaker">

<a name="Focus" href="" onclick="if (Outstanding_Order_list.ValidateForm(document.fOutstanding_Orderlist)) document.fOutstanding_Orderlist.submit();return false;"><img src='images/update.gif' alt='Update' title='Update' width='16' height='16' border='0'></a> <a href="Outstanding_Orderlist.asp?a=cancel"><img src='images/cancel.gif' alt='Cancel' title='Cancel' width='16' height='16' border='0'></a>

<input type="hidden" name="a_list" id="a_list" value="update">

</span></td>
------------------------------------------------

@FangMar 02.2009 — #How are you calling the statements?

@rbh033authorMar 02.2009 — #my page has a startup script (ie. page loaded event) in which it will call a Scroll() function.

function Scroll() {

window.location.hash = "Focus";

window.scrollBy(0, -200);

}

@FangMar 02.2009 — #The window.location reloads the page, the scrollBy is never executed.

Use the solution I gave.

@rbh033authorMar 05.2009 — #Hi

Sorry I am not good at this.

I tried the following but didnt manage to get it work. ("Focus" is the name for the anchor.)

function Scroll() {

document.fOutstanding_Orderlist.elements['Focus'].scrollIntoView();

window.scrollBy(0, -100); // down 100px

}

for

<a name="Focus" href="" onclick="..."><img src='images/update.gif' alt='Update' title='Update' width='16' height='16' border='0'></a>

IE error says 'document.fOutstanding_Orderlist.elements.Focus' is null or not an object.

@FangMar 05.2009 — #IE may have a problem using that name as it is also a method in Javascript. Try changing the name.

Also in #JavaScript _↴

expiration Javascript help Auto scroll text like a vertical news ticker

Success!

Help @rbh033 spread the word by sharing this article on Twitter...

Tweet This

position the record in browser

15 Comments(s) _↴

</span></td>
------------------------------------------------

Also in #JavaScript _↴

Success!

Social

Version

position the record in browser

15 Comments(s) ↴

</span></td> ------------------------------------------------

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

</span></td>
------------------------------------------------

Also in #JavaScript _↴