Wednesday 1 October 2008

Scroll jump with easy to call JavaScript functions

JavaScript file


var Glamour = {};
Glamour.scrollToErrorMessageInit = function(validationTriggerElementID, validationMessageElementID)
{
var validationTriggerElement = $get(validationTriggerElementID);
if (validationTriggerElement)
{
var validationMessageElement = $get(validationMessageElementID);
if (validationMessageElement)
{
validationTriggerElement.validationMessageElement = validationMessageElement;
$addHandler(validationTriggerElement, "click", Glamour.scrollToErrorMessageActivate);
}
}
};
Glamour.scrollToErrorMessageActivate = function()
{
if (this.validationMessageElement && this.validationMessageElement.style.display.length == 0)
{
// get the position of the element
var elementBounds = Sys.UI.DomElement.getBounds(this.validationMessageElement);
// scroll to the validation summary
window.scrollTo(0, elementBounds.y);
}
};

ASPX / HTML Call

<script type="text/javascript"/* >![CDATA[ */<%--// scroll to error message when client-side validation fails--%>Glamour.scrollToErrorMessageInit("<%= CompetitionSubmitButton.ClientID %>", "<%= EntryFormValidationMessage.ClientID %>");/* ]]> */</script>

No comments: