Hi Thierry,
When I have a long list, how to move the display to show the selected option ?
DisplayValue and SetFocus are inoperative.
I would also like to move the display of a treeview on the selected node.
Thanks in advance
Hi Vincent,
The solution depends on quite a number of factors:
- in what event do you want this to happen?
- about the element you want to scroll to; is it anchored in the document or contained in a scrollable container?
- do you want to scroll immediately or through an animation?
Here is a discussion giving implementation examples based on jQuery: https://stackoverflow.com/questions/6677035/jquery-scroll-to-element
Is this exemple, after a choice by autocompletion.
In a scrollable container (list or treeview)
I prefer to scroll immediately
scrollTop use a pixel number, not the selected option. Do we have to compute the active position ?
More simply, could not one after a setfocus on the list generate the equivalent of a keyboard of the value to display (wich causes a scroll) ?
Please try this code
procedure xxxCboAutoComp.valid
…
local cScript
text to cStript textmerge noshow flag 1 pretext 15
var $list = jQuery('#<<this.Parent.ListBox.wcID>>'); /* replace 'ListBox' by its name */
$list.scrollTop($list.find('option[selected]').offset().top - $list.height()/2)
endtext
thisForm.wcScriptJSadd(m.cScript)
Nice, Thierry, with a small correction about the selected option like this:
local cScript
text to cStript textmerge noshow flag 1 pretext 15
var $list = jQuery('#<<this.Parent.List.wcID>>');
$list.scrollTop($list.find('option:selected').offset().top - $list.height()/2)
endtext
thisForm.wcScriptJSadd(m.cScript)
But it doesn't work (no scroll).
In the FireFox console, these commands are OK:
var $list = jQuery('#genrenom_scx-list');
$list.scrollTop($list.find('option:selected').offset().top - $list.height()/2)
Where is the mistake ...
text to cScript textmerge noshow flag 1 pretext 15
But there is something else ...
local cScript, oAJAX as awAJAX of awServer.prg
text to cScript textmerge noshow flag 1 pretext 15
var $list = jQuery('#<<this.Parent.List.wcID>>');
$list.scrollTop($list.find('option:selected').offset().top - $list.height()/2)
endtext
=wlAJAX(@m.oAJAX) and m.oAJAX.cScriptJSadd_(m.cScript) && run script after DOM updates
Great, now it's work !
But ...
- the selected option is the first hidden. Divide by 1.6 instead of 2 seems to settle the question (not satisfied with my change)
- But above all, a second request no longer causes displacement
the selected option is the first hidden
Please provide a screenshot to clarify this specifically
a second request no longer causes displacement
What? Script not generated? Not executed? Error?
The selected option is the fist hidden.
After the second request. Nothing append.
However, the option is well selected as it is verified by moving with the mouse
With a repositioning at the beginning of the control, it works.
text to cScript textmerge noshow flag 1 pretext 15
var $list = jQuery('#<<this.Parent.List.wcID>>');
$list.scrollTop(0);
$list.scrollTop($list.find('option:selected').offset().top - $list.height()/1.6)
endtext
=wlAJAX(@m.oAJAX) and m.oAJAX.cScriptJSadd_(m.cScript) && run script after DOM updates