Question

I have used Android phonegap application for creating dynamic list with label and corresponding values for that label one by one (e.g. label: ‘A’, values: Arun, Amala, Aruna up to ‘Z’) and there are alphabets in side of the page.

Now I want that when I am clicking alphabet (‘A’) the list automatically show the label (‘A’) with values, if it is ‘B’ show that label (‘B’) with values without modifying the list.

While I am clicking ‘A’, how to get current position of label (‘A’) and move the cursor to that postion show the label (‘A’) with values?

My code: I have retrive value from local database,below code is for dynamic list Script:

function querySuccess(tx,results)
{


 $('.sidemenu').append("<label style='background-color:#C1CDD9'   align='left'>"+results.rows.item(i).alphabet + "</label>"+"<br/>");
for (i = 0; i < results.rows.length; i++) 
                {

 $(".sidemenu").append("<li  id='list' >"+"<a id='link'  href='#'>" +results.rows.item(i).name +  "</a>"+ "<br/>"+ "</li>");
 }

html

<ul class="sidemenu" ></ul>

My dynamiclist like:

label-A

Arun
Aruna
Amala
label-B
Bala
bhuvana

Answer 1

For this, you need to use the scrollTop Method

First, we declare a variable for the container of the items we need to scroll through.

var container = $('.sidemenu'); // this is our div

Then our click function

$("#A").click(function(){
  scrollTo = $(this); // wherever our element with an Id of "A" is;

  //the magic
  container.scrollTop( scrollTo.offset().top - container.offset().top + container.scrollTop() );
});

This should scroll directly to the item within your .sidemenu list.