jquery.nicescroll with wrong tabindex value

Question

I followed jQuery.NiceScroll to edit scrollbar. Normally, when I call $(selector).niceScroll(), it will append tabindex and some css properties into the selector. Like this:

$('p.lead').niceScroll({autohidemode: false});

Then, 2 divs which id starts with ascrail will be appended to <body>, too.

As you can see: if tabindex is 5000, 2 new ids will be ascrail2000 and ascrail2000-hr.

That mean we can access the <div>'s via:

var id = 2000 + (+$('p.lead').prop('tabindex') - 5000);
var vertical = $('div#ascrail' + id);
var horizontal = $('div#ascrail' + id + '-hr');

//do stuff...

That's good until I use jQuery BlockUI to show some divs as a popup:

<div class="new-topic">
  <!-- another divs -->

  <div id="tab-content5" class="tab-content">
    <div class="n-images">          
    </div>
  </div>

  <!-- another divs -->
</div>

Script:

    $.blockUI({
        message: $('div.new-topic'),
        css: {
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            border: 'none',
            cursor: 'default',
            borderRadius: '5px',
            width: ''
        }
    });
    $('div.n-images').niceScroll({autohidemode: false});

Then, I viewed the page souce, tabindex was overridden:

But it's not for div[id^="ascrail"]:

Now, how can I change css property z-index in div#ascrail2001 and div#ascrail2001-hr?

This way won't work correctly:

//this will return 2000 instead of 2001
var id = 2000 + (+$('div.n-images').prop('tabindex') - 5000);

//if I can get the id correctly, every thing will became easy:
//change z-index: auto -> z-index: 10001 
//because if z-index is smaller than 10000, it won't appear

$('div#ascrail' + id).css('z-index', 10001);
$('div#ascrail' + id + '-hr').css('z-index', 10001);

My problem is: $(selector).niceScroll() didn't check for existing tabindex value and update new tabindex value. (existing value: 5000, new value: 5001).

So, my question is: How to update new value to tabindex in this case?

p/s: I'm using mvc 5. <p class="lead"> is in another partial view which different from <div class="n-images">.

score 0 · Accepted Answer · answered Dec 10 '15 at 10:41

I solve the problem. That's because I have added

<script src"~/Scripts/jquery.nicescroll.js"></script>

twice in 2 partial views.

I tried to remove them, open BundleConfig.cs in App_Start folder and added this line:

bundles.Add(new ScriptBundle("~/bundles/nicescroll").Include(
                        "~/Scripts/jquery.nicescroll.js"));

It should work. Thanks for reading!

jquery.nicescroll with wrong tabindex value

1 Answers1