0

So here is the thing, I have a sidebar that has big height due the lots of navigation links. And I'm using jQuery nicescroll plugin to make it look fine. In the sidebar I also have h3 tag which makes a random effect of showing letters (see the code) every 4 seconds. So, when it's on - scroll is not working at all for these 4 seconds and you can't do any scrolling. I tried to use $("#sidebar").getNiceScroll().resize() but it doesn't work either. Is there any way to make it work?

<div id="sidebar">
<h3 id="output">Random</h3>
</div>

//Calling for nicescroll function for my sidebar
$(function(){
    $("#sidebar").niceScroll({ cursorcolor:"#66aee9", cursorfixedheight: 400 });
})


//Random effect for my h3 tag
setInterval(function(){
  $(document).ready(function(){
  var theLetters = "abcdefghijklmnopqrstuvwxyz#%&^+=-"; //You can customize what letters it will cycle through
  var ctnt = "Random"; // Your text goes here
  var speed = 50; // ms per frame
  var increment = 8; // frames per step. Must be >2
  var clen = ctnt.length;
  var si = 0;
  var stri = 0;
  var block = "";
  var fixed = "";
  //Call self x times, whole function wrapped in setTimeout
  (function rustle (i) {
  setTimeout(function () {
    if (--i){rustle(i);}
    nextFrame(i);
    si = si + 1;
  }, speed);
  })(clen*increment+1);
  function nextFrame(pos){
    for (var i=0; i<clen-stri; i++) {
      //Random number
      var num = Math.floor(theLetters.length * Math.random());
      //Get random letter
      var letter = theLetters.charAt(num);
      block = block + letter;
    }
    if (si == (increment-1)){
      stri++;
    }
    if (si == increment){
    // Add a letter;
    // every speed*10 ms
    fixed = fixed +  ctnt.charAt(stri - 1);
    si = 0;
    }
    $("#output").html(fixed + block);
    block = "";
  }
  });
}, 4000);
Johnny Catsville
  • 45
  • 9

1 Answers1

0

I change to rows and check it in jsfiddle, looks like working scroll fine.

Before:

setInterval(function(){
  $(document).ready(function(){
...
  });
}, 4000);

After:

$(document).ready(function(){
  setInterval(function(){
...
  }, 4000);
});
Vladimir
  • 99
  • 8
  • Nah... That was a good try, but unfortunately it's a bit more complicated than it seems, as I noticed these days it's all about the nicescroll's `
    ` that is changing it's width and opacity every time "random" function is on or off.. I still don't get it but will work on it. Thank you very much, if you will have any other hints or suggestions I will be glad to check them!
     – Johnny Catsville Jun 10 '17 at 20:05