1

I am using jQuery plugin version 3.10 to use custom scrollbars. I have numerous horizontal slides and each uses its own custom scrollbar. I want to include javascript .onclick function that expands text. However, the scrollbar does not appear when I expand the text and it overflows. I am using the following code to select the headings which should have the onclick function (tag "h3", class "click"):

function toggleNext(el) {
 var next=el.nextSibling;
 while(next.nodeType != 1) next=next.nextSibling;
 next.style.display=((next.style.display=="none") ? "block" : "none");
}

function getElementsByTagAndClassName(tag,cname) {
 var tags=document.getElementsByTagName(tag);
 var cEls=new Array();
 for (i=0; i<tags.length; i++) {
  var rE = new RegExp("(^|\s)" + cname + "(\s|$)");
   if (rE.test(tags[i].className)) {
   cEls.push(tags[i]);
   }
  }
 return cEls;
}
function toggleNextByTagAndClassName(tag,cname) {
 var ccn="clicker";
 clickers=getElementsByTagAndClassName(tag,cname);
 for (i=0; i<clickers.length; i++) {
  clickers[i].className+=" "+ccn;
  clickers[i].onclick=function() {toggleNext(this)}
  toggleNext(clickers[i]);
 }
}
window.onload=function(){toggleNextByTagAndClassName('h3','click')}

Example of HTML:

<article class="slide" id="lorem">
<div class="inner">
<h3 class="click">Lorem Ipsum</h3>
<div class="content">
<p>Sample text, is sample text, is sample text</p>
</div>

I know from previous research that I've done that I have to call the resize function from niceScroll jQuery plugin, which is as follows.

$(name-of-div).getNiceScroll().resize()

I have tried using the resize function with the name-of-div as content, however this does not yield the expected results. Please help if you can. I am not sure how to implement the two together.

nshah123
  • 11
  • 1
  • 3

2 Answers2

1

Not sure if understood what's going on but I had a similar problem. Try using the resize() inside a setTimeout.

Note that the "name-of-div" must be the name of the scroll's container. The jQuery code would looks like:

setTimeout(function(){
  $('name-of-div').getNiceScroll().resize()
}, 500);

I used 500 as an example, but if your div's text expand while animate you must use a number greater then your div animation, and of course, the code must execute after all interactions

Reitz
  • 59
  • 1
  • 7
0

See the question below. There are two answers and both work for me. Basically, I have applied the second method(See the second answer) suggested there. Because, it works instantly and the first method doesn't seem to work instantly after the div has been resized.

Jquery Nice scroll not working

Rejowan Ahmed
  • 1
  • 2