Scroll to a particular element in a UL list with dynamic ids

Question

I read the question Scroll to a particular element w/ jQuery and in the question, the original HTML code already has ids to the paragraph elements. However, in my case, I generate the element (list element) dynamically and create ID on runtime. How would I scroll to that particular element with or without jQuery?

To give more detail about my problem:

I am creating a phonegap project to get the list of contacts in the iPhone and display a scrolling list (I use the iscroll plugin) in a div. I categorize the first names A-E, F-J, K-O, P-T, U-Z and group them. If the user touches F-J on the side (as you find in iPhone contacts app), the div should scroll to the first contact that belongs to group F-J..

<div id ="tablediv">
    <div id="scroller"></div>
</div>

<div id="sorter">
    <span id="gr1">A-E</span>
    <span id="gr2">F-J</span>
</div>

Javascript:

var g1 = ['a','b','c','d','e'];  //contact's first name starting with these chars
var g2 = ['f','g','h','i','j'];  //contact's first name starting with these chars
var idg1=null, idg2=null; // first id of the contact which was in g1, g2

//Array is an array of objects
//example: array = [ {'fname':'x','lname':'y','number':'123'},{..},{..}];

function generateTable(array) {
    gpDiv = document.getElementById("scroller");
    pDiv = document.createElement("ul");
    pDiv.id = "thelist";
    for(var i=0;i<array.length;i++) {
        cDiv = document.createElement("li");
        cDiv.id = 'cd'+i; //id created dynamically
        cDiv.textContent = array[i].fname+"\u000a"+array[i].lname;
        var ch0 = array[i].fname[0].toLowerCase();
        if($.inArray(ch0,g1)!=-1 && idg1==null) {
            idg1 = cDiv.id;
            document.getElementById('gr1').addEventListener('click',function(){goToG1(idg1);},false);
        }
        if($.inArray(ch0,g2)!=-1 && idg2==null) {
            idg2 = cDiv.id;
            document.getElementById('gr2').addEventListener('click',function(){goToG2(idg2);},false);
        }  
        pDiv.appendChild(cDiv);
    }
    gpDiv.appendChild(pDiv);
}

function goToG1(id) {
    $('#tablediv').scrollTop($('#'+id).offset().top);
}

function goToG2(id) {
    $('#tablediv').scrollTop($('#'+id).offset().top);
}

The above code doesn't work, as I think since the ids are allotted at runtime, I am not able to scroll to that particular element. Please help

score 12 · Accepted Answer · answered Nov 16 '12 at 08:51

12

Hmmm, All I needed to do was this.

function goToG1(id) {
    document.getElementById(id).scrollIntoView();
}

It appears to me that the ids still work even though they are allotted at run time.

answered Nov 16 '12 at 08:51

thandasoru

1,558
2
15
41

1

Please try to include how cross browser this is. :-) – bPratik Nov 16 '12 at 08:57
I did a console.log(document.getElementById(id)) and saw that there was a method scrollIntoView().. Used it and viola, it worked! – thandasoru Nov 16 '12 at 09:10

score 0 · Answer 2 · answered Nov 16 '12 at 08:58

0

You code worked more or less - you were however using code:

$("#tablediv").scrollTop(...)

Instead of

$(document).scrollTop(...)

Other than that it works - see here: http://jsbin.com/umatuj/2/edit

answered Nov 16 '12 at 08:58

WTK

16,583
6
35
45

Oh, it doesn't work in my iOS simulator.. I tried it just now – thandasoru Nov 16 '12 at 09:14
Hmm, maybe there's something off with how iOS handles this code (cause it works in regular browser (Chrome)). Anyway, you already posted solution that works for you so it's good. – WTK Nov 16 '12 at 09:16

Scroll to a particular element in a UL list with dynamic ids

2 Answers2