notebook jumping when @interacts are updated
Jason Grout
interact and the interact updates, the notebook automatically scrolls up
so that the interact is only partially shown. I think that what is
happening is the focus is changing to a previous cell or something. I
get this happening when I change the second interact in the following
worksheet, for example (interact is from kcrisman's post on sage-support).
This is in FF3.0.1 on Ubuntu 8.04. Does anyone else experience this
jumping of the notebook when an interact control is changed?
Thanks,
Jason
interact test
system:sage
{{{id=0|
@interact
def _(k=slider(0,5,1,1)):
P1=plot(lambda x: x^k, 0,1)
show(P1)
///
<html><!--notruncate--><div padding=6 id='div-interact-0'> <table
width=800px height=20px bgcolor='#c5c5c5'
cellpadding=15><tr><td bgcolor='#f9f9f9' valign=top
align=left><table><tr><td align=right><font color="black">k
</font></td><td><table><tr><td>
<div id='slider-k-0' class='ui-slider ui-slider-3'
style='margin:0px;'><span class='ui-slider-handle'></span></div>
</td><td><font color='black'
id='slider-k-0-lbl'></font></td></tr></table><script>(function(){ var
values = ["0","1","2","3","4","5"]; setTimeout(function() {
$('#slider-k-0').slider({
stepping: 1, min: 0, max: 5, startValue: 1,
change: function (e,ui) { var position = ui.value;
if(values!=null) $('#slider-k-0-lbl').text(values[position]);
interact(0, "sage.server.notebook.interact.update(0, \"k\", 1,
sage.server.notebook.interact.standard_b64decode(\""+encode64(position)+"\"),
globals())"); },
slide: function(e,ui) { if(values!=null)
$('#slider-k-0-lbl').text(values[ui.value]); }
});
if(values != null)
$('#slider-k-0-lbl').text(values[$('#slider-k-0').slider('value')]);
}, 1); })();</script></td></tr>
</table><div id='cell-interact-0'><?__SAGE__START>
<table border=0 bgcolor='#white' width=100% height=100%>
<tr><td bgcolor=white align=left
valign=top><pre><?__SAGE__TEXT></pre></td></tr>
<tr><td align=left valign=top><?__SAGE__HTML></td></tr>
</table><?__SAGE__END></div></td>
</tr></table></div>
</html>
CPU time: 0.00 s, Wall time: 0.01 s
}}}
{{{id=1|
@interact
def _(k=slider(0,5,1,1)):
P1=plot(lambda x: x^k, 0,1)
show(P1)
///
<html><!--notruncate--><div padding=6 id='div-interact-1'> <table
width=800px height=20px bgcolor='#c5c5c5'
cellpadding=15><tr><td bgcolor='#f9f9f9' valign=top
align=left><table><tr><td align=right><font color="black">k
</font></td><td><table><tr><td>
<div id='slider-k-1' class='ui-slider ui-slider-3'
style='margin:0px;'><span class='ui-slider-handle'></span></div>
</td><td><font color='black'
id='slider-k-1-lbl'></font></td></tr></table><script>(function(){ var
values = ["0","1","2","3","4","5"]; setTimeout(function() {
$('#slider-k-1').slider({
stepping: 1, min: 0, max: 5, startValue: 1,
change: function (e,ui) { var position = ui.value;
if(values!=null) $('#slider-k-1-lbl').text(values[position]);
interact(1, "sage.server.notebook.interact.update(1, \"k\", 2,
sage.server.notebook.interact.standard_b64decode(\""+encode64(position)+"\"),
globals())"); },
slide: function(e,ui) { if(values!=null)
$('#slider-k-1-lbl').text(values[ui.value]); }
});
if(values != null)
$('#slider-k-1-lbl').text(values[$('#slider-k-1').slider('value')]);
}, 1); })();</script></td></tr>
</table><div id='cell-interact-1'><?__SAGE__START>
<table border=0 bgcolor='#white' width=100% height=100%>
<tr><td bgcolor=white align=left
valign=top><pre><?__SAGE__TEXT></pre></td></tr>
<tr><td align=left valign=top><?__SAGE__HTML></td></tr>
</table><?__SAGE__END></div></td>
</tr></table></div>
</html>
}}}
{{{id=2|
///
}}}
D. M. Monarres
an iterative change in a function hard to see, because I would have to
scroll down to show the graph.
--
David Monarres
dmmon...@gmail.com
"Which is worse: ignorance or apathy? Who knows? Who cares?"
Harald Schilly
> I notice that lots of times, when changing the value of a control in an
> interact and the interact updates, the notebook automatically scrolls up
Hi, I notice the same but I'm don't know the details and the code. My
feeling is that there is a submit or link action in javascript and the
corresponding function returns normally. If there would be a "return
false;" there wouldn't be auch an activity. But I'm not sure if this
works for all browsers - at least, for FF it would work.
i.e. read http://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0
--> "Just make sure to return false to prevent the click event from
firing if the JavaScript executes."
H
Jason Grout
Just a note to myself and whoever else might be tracking this down.
From playing with putting alerts into the javascript code, the jump
seems to occur exactly when the innerHTML is replaced in set_output_text
javascript function, in the following lines:
if (new_interact_output.indexOf('__SAGE_INTERACT_RESTART__') !=
-1) {
evaluate_cell(id, 0);
} else {
cell_interact.innerHTML = new_interact_output; # <-- HERE
if (contains_jsmath(new_interact_output)) {
jsMath.ProcessBeforeShowing(cell_interact);
}
}
My guess is that it has to do with the browser all of sudden losing the
element it was focused on or something, so the browser jumps up. Does
anyone know what if this is the case?
Thanks,
Jason
Jason Grout
> From playing with putting alerts into the javascript code, the jump
> seems to occur exactly when the innerHTML is replaced in set_output_text
> javascript function, in the following lines:
>
>
> if (new_interact_output.indexOf('__SAGE_INTERACT_RESTART__') !=
> -1) {
> evaluate_cell(id, 0);
> } else {
> cell_interact.innerHTML = new_interact_output; # <-- HERE
> if (contains_jsmath(new_interact_output)) {
> jsMath.ProcessBeforeShowing(cell_interact);
> }
> }
>
>
> My guess is that it has to do with the browser all of sudden losing the
> element it was focused on or something, so the browser jumps up. Does
> anyone know what if this is the case?
From some more experimentation, it seems like this jumping happens when
the interact is the last thing in the document (or nearly the last
thing). As near as I can tell, what is happening is this:
1. @interact requests an update, based on a changed control
2. after a while, Sage sends back the new output to put in the interact cell
3. Using the above code, the old output is replaced with the new output.
This does:
(a) Delete the old output. The page is then shorter, so the browser
scrolls up so that the interact with the *deleted* output is at the
bottom of the window
(b) The new interact output is put below the controls. This
lengthens the page, but the browser does not scroll back down.
A workaround is to make the page long enough after the interact that the
browser does not have to scroll when the interact is deleted. You can
do this, for example, by just inserting a bunch of blank cells which
take up at least as much room as the interact output did.
I'm trying to figure out a way to fix this.
Thanks,
Jason
Jason Grout
I can't figure out a way to get the browser to not scroll. While
prepending the new output to the old output, then deleting the old
output seems to help (i.e., it doesn't jump as much), eventually I can
get it to jump again.
I've also tried setting the CSS height of the output div, then changing
the insides to the new output, then resetting the height to 100%, but
again, that seems to help, but not completely solve the problem.
All you javascript-DOM-manipulatin' kung fu ninjas are invited to take a
crack at this.
Thanks,
Jason
Jason Grout
Gee, sorry for carrying on a conversation with myself (and thanks for
emailing me with a tip, Dag!)
I think the reason I was seeing inconsistent results before was because
I was not allowing for the time the browser takes to create a new DOM
element and I was running into race conditions. So a second question
for the mighty javascript ninjas: is there a way to create a DOM
element, put it into the DOM, and then continue execution only when the
browser recognizes that it is part of the DOM? (E.g., I want to insert
the new content, then delete the old content only when the browser has
the new content fully fixed in place).
Thanks,
Jason
William Stein
Could we just put a big chunk of blank space at the bottom of the worksheet?
I.e., just always make it so worksheets have a big blank space below them?
I think i wouldn't be opposed to this, and your conversation seemed to suggest
it would work.
William
Craig Citro
> I.e., just always make it so worksheets have a big blank space below them?
> I think i wouldn't be opposed to this, and your conversation seemed to suggest
> it would work.
>
I think this would be really nice, independent of interact issues.
-cc
Jason Grout
We could put a large blank div at the bottom to make this vertical space.
This seems to be such a hack to me, as opposed to a "proper" solution.
For example, how does this interact with printing (I suppose we could
have a separate print stylesheet, though, that ignores the div).
Craig, why do you think it would be really nice anyway?
Jason
Craig Citro
>
In general, I'd just like to be able to scroll something to the top of
the browser window, even if it's the last cell I've created. I
understand I can do this by making a bunch of empty cells, but that
looks *really* stupid. Also, if I'm editing something that's in the
bottom cell, I really like to be able to have what I'm editing at the
top of the screen, instead of at the very bottom. Or maybe in the
middle, with one or two cells above it. *shrug* Maybe I'm weird. :)
-cc
Jason Grout
Actually, the other day in class I had to make a bunch of empty cells at
the bottom of a worksheet so that the interesting part would display
near the top of the projected image so the class could see it. You have
a good point.
For reference, in Mma, the notebook always has a full screen worth of
blank space below the bottom-most cell, so you can always scroll so that
the last calculation is at the top of your window.
So I agree, maybe this is a good fix for the problem and for other issues.
Jason