FoxInCloud
Move the display to the selected option
Gravatar is a globally recognized avatar based on your email address. Move the display to the selected option
  Vincent H.
  All
  Jun 10, 2019 @ 12:31am

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

Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jun 10, 2019 @ 02:52am

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

Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jun 10, 2019 @ 05:28am

  • 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) ?

Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jun 10, 2019 @ 06:36am

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)
Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jun 10, 2019 @ 08:00am

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 ...

Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  Vincent H.
  Vincent H.
  Jun 10, 2019 @ 08:02am

text to cScript textmerge noshow flag 1 pretext 15

But there is something else ...

Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jun 10, 2019 @ 09:31am
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
Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jun 10, 2019 @ 11:14am

Great, now it's work !

But ...

  1. the selected option is the first hidden. Divide by 1.6 instead of 2 seems to settle the question (not satisfied with my change)
  2. But above all, a second request no longer causes displacement
Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jun 10, 2019 @ 12:38pm

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?

Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jun 10, 2019 @ 02:04pm

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

Gravatar is a globally recognized avatar based on your email address. re: Move the display to the selected option
  Vincent H.
  Vincent H.
  Jun 11, 2019 @ 01:43am

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
© 1996-2024