I have custom scrollbar on one page which I managed to get working. For some reason I cannot get the same thing working on a different page. Only difference between the pages is their content. On the working page I have YouTube videos embedded, on the other I have Soundcloud embedded audio. For some reason I am able to only see the thumb of the scrollbar which is on the wrong side of the screen.
I’m new to this site so my apolgizes in advance if I may be coming out a bit noobish.
Thank you.
Working page HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf8" />
<link rel="stylesheet" type="text/css" media="all" href="css/mainstyle.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
<meta name="viewport" content="initial-scale=1" />
</head>
<body>
<div id="background">
<div id="wrapper">
<div class="navigation">
<ul id="mainmenu">
<li><a href="index.html">Home</a></li>
<li><a href="band.html">Band</a></li>
<li><a href="news.html">News</a></li>
<li><a href="shows.html">Shows</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="active"><a href="media.html">Media</a></li>
<li><a href="store.html">Store</a></li>
</ul>
</div>
<div class="article">
<div class="mediacontainer">
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<iframe width="853" height="480" src="https://www.youtube.com/embed/3LsB125vBWw" frameborder="0" allowfullscreen></iframe>
<iframe width="853" height="480" src="https://www.youtube.com/embed/0LUYdvWQ_uI" frameborder="0" allowfullscreen></iframe>
<iframe width="853" height="480" src="https://www.youtube.com/embed/PHI63zlRA0s?list=UUYgrxNCR_m-Vmsk5M2q3U7Q" frameborder="0" allowfullscreen></iframe>
<iframe width="853" height="480" src="https://www.youtube.com/embed/5UFCRnTYoWI?list=UUYgrxNCR_m-Vmsk5M2q3U7Q" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<ul id="footermenu">
<li><a href="hello.html">Terms of use</a></li>
<li><a href="hello.html">Privacy Policy</a></li>
<li><a href="hello.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS:
.mediacontainer {
margin-left: -250px;
}
.musiccontainer {
margin-left: -10px;
}
#scrollbar1 { margin-left: 300px; }
#scrollbar1 .viewport { height: 800px; overflow: hidden; position: relative; padding-left:0; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ background: /*transparent url(../imagesscroll/bg-scrollbar-track-y.png)*/no-repeat 0 0;background-color: rgba(55, 55, 55, 0.7); position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: /*transparent url(../imagesscroll/bg-scrollbar-trackend-y.png)*/ no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { background: transparent url(../imagesscroll/scrollbarthumb.png) no-repeat 50% 50%; height: 20px; left:-5px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end {no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; display:none; }
#scrollbar1 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
Not working page HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf8" />
<link rel="stylesheet" type="text/css" media="all" href="css/mainstyle.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
<meta name="viewport" content="initial-scale=1" />
</head>
<body>
<div id="background">
<div id="wrapper">
<div class="navigation">
<ul id="mainmenu">
<li><a href="index.html">Home</a></li>
<li><a href="band.html">Band</a></li>
<li><a href="news.html">News</a></li>
<li><a href="shows.html">Shows</a></li>
<li class="active"><a href="music.html">Music</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="store.html">Store</a></li>
</ul>
</div>
<div class="article">
<div class="musiccontainer">
<div id="musicscrollbar1">
<div class="musicscrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="musicviewport">
<div class="musicoverview">
<iframe width="960" height="166" style="overflow:hidden; border:none;" src= "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38657166&color=ee780a&auto_play=false&show_artwork=true"></iframe>
<iframe width="960" height="166" style="overflow:hidden; border:none;" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F31700420&color=ee780a&auto_play=false&show_artwork=true"></iframe>
<iframe width="960" height="166" style="overflow:hidden; border:none;" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F30789244&color=ee780a&auto_play=false&show_artwork=true"></iframe>
<iframe width="960" height="166" style="overflow:hidden; border:none;" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F27683416&color=ee780a&auto_play=false&show_artwork=true"></iframe>
<iframe width="960" height="166" style="overflow:hidden; border:none;" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F10400567&color=ee780a&auto_play=false&show_artwork=true"></iframe>
<iframe width="960" height="450" style="overflow:hidden; border:none;" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1286812&color=ee780a&auto_play=false&show_artwork=true"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<ul id="footermenu">
<li><a href="hello.html">Terms of use</a></li>
<li><a href="hello.html">Privacy Policy</a></li>
<li><a href="hello.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Javascript:
(function(a){a.tiny=a.tiny||{};a.tiny.scrollbar={options:{axis:"y",wheel:40,scroll:true,lockscroll:true,size:"auto",sizethumb:"auto",invertscroll:false}};a.fn.tinyscrollbar=function(d){var c=a.extend({},a.tiny.scrollbar.options,d);this.each(function(){a(this).data("tsb",new b(a(this),c))});return this};a.fn.tinyscrollbar_update=function(c){return a(this).data("tsb").update(c)};function b(q,g){var k=this,t=q,j={obj:a(".viewport",q)},h={obj:a(".overview",q)},d={obj:a(".scrollbar",q)},m={obj:a(".track",d.obj)},p={obj:a(".thumb",d.obj)},l=g.axis==="x",n=l?"left":"top",v=l?"Width":"Height",r=0,y={start:0,now:0},o={},e="ontouchstart" in document.documentElement;function c(){k.update();s();return k}this.update=function(z){j[g.axis]=j.obj[0]["offset"+v];h[g.axis]=h.obj[0]["scroll"+v];h.ratio=j[g.axis]/h[g.axis];d.obj.toggleClass("disable",h.ratio>=1);m[g.axis]=g.size==="auto"?j[g.axis]:g.size;p[g.axis]=Math.min(m[g.axis],Math.max(0,(g.sizethumb==="auto"?(m[g.axis]*h.ratio):g.sizethumb)));d.ratio=g.sizethumb==="auto"?(h[g.axis]/m[g.axis]):(h[g.axis]-j[g.axis])/(m[g.axis]-p[g.axis]);r=(z==="relative"&&h.ratio<=1)?Math.min((h[g.axis]-j[g.axis]),Math.max(0,r)):0;r=(z==="bottom"&&h.ratio<=1)?(h[g.axis]-j[g.axis]):isNaN(parseInt(z,10))?r:parseInt(z,10);w()};function w(){var z=v.toLowerCase();p.obj.css(n,r/d.ratio);h.obj.css(n,-r);o.start=p.obj.offset()[n];d.obj.css(z,m[g.axis]);m.obj.css(z,m[g.axis]);p.obj.css(z,p[g.axis])}function s(){if(!e){p.obj.bind("mousedown",i);m.obj.bind("mouseup",u)}else{j.obj[0].ontouchstart=function(z){if(1===z.touches.length){i(z.touches[0]);z.stopPropagation()}}}if(g.scroll&&window.addEventListener){t[0].addEventListener("DOMMouseScroll",x,false);t[0].addEventListener("mousewheel",x,false)}else{if(g.scroll){t[0].onmousewheel=x}}}function i(A){a("body").addClass("noSelect");var z=parseInt(p.obj.css(n),10);o.start=l?A.pageX:A.pageY;y.start=z=="auto"?0:z;if(!e){a(document).bind("mousemove",u);a(document).bind("mouseup",f);p.obj.bind("mouseup",f)}else{document.ontouchmove=function(B){B.preventDefault();u(B.touches[0])};document.ontouchend=f}}function x(B){if(h.ratio<1){var A=B||window.event,z=A.wheelDelta?A.wheelDelta/120:-A.detail/3;r-=z*g.wheel;r=Math.min((h[g.axis]-j[g.axis]),Math.max(0,r));p.obj.css(n,r/d.ratio);h.obj.css(n,-r);if(g.lockscroll||(r!==(h[g.axis]-j[g.axis])&&r!==0)){A=a.event.fix(A);A.preventDefault()}}}function u(z){if(h.ratio<1){if(g.invertscroll&&e){y.now=Math.min((m[g.axis]-p[g.axis]),Math.max(0,(y.start+(o.start-(l?z.pageX:z.pageY)))))}else{y.now=Math.min((m[g.axis]-p[g.axis]),Math.max(0,(y.start+((l?z.pageX:z.pageY)-o.start))))}r=y.now*d.ratio;h.obj.css(n,-r);p.obj.css(n,y.now)}}function f(){a("body").removeClass("noSelect");a(document).unbind("mousemove",u);a(document).unbind("mouseup",f);p.obj.unbind("mouseup",f);document.ontouchmove=document.ontouchend=null}return c()}}(jQuery));
In the second HTML, you have
$('#scrollbar1').tinyscrollbar();but it looks like you renamed the div to musicscrollbar1. That’s most likely the problem. So just change the line to$('#musicscrollbar1').tinyscrollbar();