asked on

Using JavaScript to set a scroll bar in Ruby-on-Rails

Hello,

I have a Ruby-on-Rails web application that has a simple pop-up modal dialog.

When the user clicks on a button in the modal dialog, I would like to use a JavaScript function to modify the appearance of other components in the modal dialog.

I've been able to do this with several of the components; I can hide and/or enable various components in the JavaScript function.

The one thing I haven't been able to do, though, is adjust the scroll bar of the modal dialog. Specifically, I need the scroll bar to be re-set to the very top of the modal dialog when the user clicks the button.

I've searched online, and it isn't that I haven't been able to find some possible solutions to this problem; it's just that so far none of them have worked. I've tried using scrollTo, scroll, scrollTop, document.body.scrollTop. So far, none of these have worked.

Any suggestions?

Thanks in Advance,
Tim

Michel Plungjan

My guess is that the ruby on rails part is irrelevant

Can you please show the view-source of the pop up and if it is not a stand-alone window, please show the surrounding HTML as well

A jsfiddle.net would be even better

tmitch68

ASKER

Sure.

Here is the JavaScript function. The first part - that hides one division and displays another - works fine.

The second part - which is a bunch of stuff I've tried to get the scroll bar to re-set to the top - doesn't work.

<script language="javascript">
$j('#submit').click(function() {
//If the email_notification checkbox has been checked - and the notification_fields are not visible,

if (($j("#email_notification").is(':checked')) && ($j("#notification_fields").is(':hidden')))
{
//FIRST PART - ALL OF THIS WORKS
$j('#non_notification_fields').hide();
$j('#notification_fields').show();

//SECOND PART - NONE OF THIS WORKS
this.scrollTop = 0;

//Neither does this...
var s_top = this.scrollHeight - this.clientHeight;
var scl = this.scrollTop == s_top;
if ( scl ) this.scrollTop = s_top + this.clientHeight;

//Or this...
document.body.scrollTo(0, 10);

//Or this
var objDiv = document.getElementById("notification_fields");
objDiv.scrollTop = 0;

return false;
}
});
</script>

Here is the rest of the file...

<div class="jqmWindow" id="calendar_modal_3" style="display:none;"></div>
<div id='view_entry' class="jqmPopup"
<% form_for @simple_calendar_entry, :builder => SimpleCalendarMod::SimpleCalendarFormBuilder do |f| %>
<div id="non_notification_fields">

<%= f.label :approved %> <%= f.check_box :approved %><br /><br />
<%= f.hidden_field :approver, :value => @usr.username %>
<%= f.hidden_field :approved_date, :value => Time.now %>

</div>

<div id="notification_fields" style="display: none">
<h2>Select email notification(s)</h2>
<table border="0" cellpadding="5">
<tr>
<td valign="top"><b>To: </b></td>
<td><%= text_field_tag 'to', @to -%></td>
</tr>
<tr>
<td valign="top"><b>BCC: </b></td>
<td>
<% EmailAddress.find(:all, :order => 'position').each do |email| -%>
<%= check_box_tag "bcc[#{email.email}]" %>
<%= email.email -%>
<br />
<% end -%>
</td>
</tr>
</table>
<%= submit_tag "Submit and Notify" %>
</div>
<% end -%>
</div>

Again, thanks,
Tim

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tmitch68

ASKER

I tried giving the title in the bottom division an ID - and then using scrollIntoView() on it in the function. Still no luck...

$j('#select_email_notifications').scrollIntoView();

<h2 id="select_email_notifications">Select email notification(s)</h2>

Don't worry about it too much. If worse comes to worse, I think I can just re-arrange everything so it fits on the form without having to scroll.

Michel Plungjan

Hmm

perhaps these

http://erraticdev.blogspot.nl/2011/02/jquery-scroll-into-view-plugin-with.html