Check Value / Set HTML Anchor on Page Load

[kraftomatic]

Hey All,

I've got an older JS page that has several buttons on it to dynamically add and remove sections to a page for editing. Each button click for this submits the form and reloads the page, to the top - well off where the section was just added or deleted. What I want to do is have the page go down to that new section once the page is loaded, which I anticipate doing with anchors. However with the page loading/refreshing every time a section is added or deleted, this makes things a little more difficult.

The JS functions I have now look something like this:

function add(){
		document.forms[0].process.value = 'add';
		document.forms[0].submit();
	}

function delete(){
		document.forms[0].process.value = 'delete';
		document.forms[0].submit();
	}

On the page load, I could check what value was submitted ('add' or 'delete' here) and then based on that, move the page down to where an anchor is set on it. Does that seem feasible?

There are a number of functions like this scattered throughout multiple pages, so I can't redo it all, adding and removing sections dynamically, unfortunately.

Any suggestions would be greatly appreciated.

Thanks.

[niralsoni]

try to set focus on the element that has been added dynamically. It should work...

[WolfShade]

If you're using jQuery, you can dynamically find the last element and scroll to it.

[kraftomatic]

Originally Posted by WolfShade

If you're using jQuery, you can dynamically find the last element and scroll to it.

The page isn't using jQuery, that's part of the problem. It would have to be rewritten otherwise.

The page reloads after something has been added/removed, so checking the status on the reload is the tricky part.

[felgall]

Simply give each form an id - that makes it easier to reference the fields in the form and also provides an anchor point to link back to afterwards.

[kraftomatic]

Okay, thanks so far guys. With using old-school Javascript, window.hash doesn't work in IE7 which is a problem. So I'm trying to do this in Prototype now (still can't use jQuery). I have a function that will scroll on click, but I can't get it working dynamically when the page loads. Does anyone see what I might need to make this work?

Event.observe(window, 'load', function() {
	$$('a[href^=#]:not([href=#])').each(function(element) {
		element.observe('click', function(event) {
			new Effect.ScrollTo("newID_1");
			Event.stop(event);
		}
		.bindAsEventListener(element))
	})
})

Thanks a bunch for any suggestions.

[felgall]

There's no such thing as window.hash = the field you are after is location.hash