jquery mcustomscrollbar get the current item

Question

I have used mcustomscrollbar in my slider area.

Please refer the url horizontal scroll example url here

I used the horizontal scroll section content x

Below is the code I have used

        $(".selector").mCustomScrollbar({
                axis:"x",
                autoHideScrollbar:true,
                alwaysShowScrollbar:0,
                contentTouchScroll:true,
                mouseWheel: false,
                advanced:{autoExpandHorizontalScroll:true},
                callbacks:{
                    onScroll:function(){
                        alert(this.mcs.leftPct); /// This is the scrol percentage

                    }


                }

            });

Here it is working fine. My task is in the call back area I have got the scroll percentage. By using this how to get the current element no. i.e Initially the scroll percentage is 0 and the element is 0th andd 1st element is viewed. After I drag the scroll bar it moved to some position. At that time which element is in view port slider area. While scroll I want to get the current element, where the scroll bar is.

Please help me to get this. If the scroll bar is below the 3rd element, I want to retrieve the element number.

To get the element no, I used the following:

var tot_item_count = 12;                            
var elm_no = Math.round((tot_item_count*this.mcs.leftPct)/100);

But it gives wrong result

Refer screen shots: Here the scroll for all images enter image description here

Here the scroll is near the 3rd element enter image description here

Here the scroll is near the 5rd element enter image description here

Check out this SO question about "is this thing in the viewport?" http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport ... I think what you can do is keep a tally of the widths of your items and the total width of the scroll area, and then calculate (with help of the percentage) where you are in the total area of the region. (item1:: 20px, item2:: 40px, item3:: 40px .. 50% into the 100px region you can know that item 2 is displayed.) — sova, Mar 19 '15 at 05:09
Yes, Like that waay I calcuulate the formula like this. But it is not working. I updated this in my question too var tot_item_count = 12; var elm_no = Math.round((tot_item_count*this.mcs.leftPct)/100); — Sam Hanson, Mar 19 '15 at 05:14
okay, all your items are the same width? that simplifies things. thank you for updating your question. Is the percentage given to you in a decimal like .60 for sixty percent or as a whole integer number? You need to incorporate the width of the elements into your formula — sova, Mar 19 '15 at 05:21
Yes the elements are in same width almost. The percentage this.mcs.leftPct is the whole number like 50 ,60 so on... — Sam Hanson, Mar 19 '15 at 05:27
Well, you can estimate it, but it might be off eventually unless you add the actual element widths. You mention in your edit that elm_no gives you the wrong result. Could you please post some data or a screenshot with values? I'm curious how wrong/off it is. Your method seems correct but might be off by one element because it's telling you the "leftmost" percentage and therefore only elements that have passed out of view. — sova, Mar 19 '15 at 05:35
I update the screenshots with alert box. Please refer and let me know. Thanks — Sam Hanson, Mar 19 '15 at 06:10
change tot_item_count from 12 to 7. This is because you can only see 7 elements at a time. For elements greater than (total viewable number of elements .. in this case 7 ) you will have another case [assuming you want to number them all]. If your frame is not a fixed size but can expand with the viewing window you will need to make sure you update the number of viewable elements. — sova, Mar 19 '15 at 07:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/73397/discussion-between-sam-hanson-and-sova). — Sam Hanson, Mar 20 '15 at 07:16

jquery mcustomscrollbar get the current item

0 Answers0