jQuery: jScrollPane goes beyond window

**RemoteC** · 07-14-2012, 05:27 PM

Hi guys!

I have the following problem:
- I want a horizontal scrolling gallery using jScrollPane
- The images should go under the navigation on the left side (z-index)
- The Scrollbar shouldn't start under the navigation but on the left side of the content area.
- The Scrollbar should end on the right ending of the content area.

Link to the site (test enviroment): http://remotec.bplaced.net/jo/gallery-view.html

My problem is the last point. If you drag to the right end the scrollbar goes beyond the window. That isn't a big deal on high resolution but try to view the website with smaller window, whole images are hidden somewhere beyond the browser window as the scrollpane disappears.

The cause of the problem might be:

.jspHorizontalBar{
margin-left:130px;
}

combined with the width of 100 % the jScrollPane is wider than the browser window. But I need the margin because else the scrollpane is displayed under the menu links. I tried a lot and everything failed.

Who has an idea?

**vwphillips** · 07-15-2012, 11:10 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.wrapper {
  position:absolute;overflow:hidden;left:0px;top:20px;width:100%;height:365px;
}

.scroll-pane {
  position:absolute;left:0px;top:0px;width:6100px;height:355px;
}

.wrapper IMG{
  float:left;border-Width:0px;
}

.bar {
  position:absolute;left:0px;top:355px;width:100%;height:10px;
}

.slide {
  position:absolute;left:0px;top:0px;width:200px;height:10px;background-Color:#FFCC66;
}

/*]]>*/
</style>

</head>

<body>

  <div id="gallerywrap" class="wrapper" >
   <div class="scroll-pane">
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0454.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0462.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0466.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0471.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0475.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0480.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0454.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0462.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0466.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0471.jpg" /></a>
    <a href="single-image.html"><img src="http://remotec.bplaced.net/jo/images/gallery1/_MG_0475.jpg" /></a>
   </div> <!--#gallerywrap2 -->

   <div class="bar">
    <div class="slide"></div>
   </div>

  </div> <!--#gallerywrap -->

<script type="text/javascript">
/*<![CDATA[*/
// Gallery Wrap (15-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcGalleryWrap(o){
 var p=document.getElementById(o.ID),divs=p.getElementsByTagName('DIV'),div=divs[0],bar=divs[1],clds=div.childNodes,ary=[],a,img,z0=0;
 for (;z0<clds.length;z0++){
  if (clds[z0].nodeType==1){
   a=[clds[z0]]
   img=clds[z0].nodeName.toUpperCase()=='IMG'||clds[z0].getElementsByTagName('IMG')[0];
   if (img){
    a[1]=new Image();
    a[1].src=img.src;
   }
   ary.push(a);
  }
 }
 this.p=p;
 this.div=div;
 this.ary=ary;
 this.bar=bar;
 this.slide=bar.getElementsByTagName('DIV')[0];
 this.drag=false;
 this.os=typeof(o.Offset)=='number'?o.Offset:0;
 this.xy=this.os;
 this.slide.style.left=this.xy+'px';
 this.div.style.left=this.xy+'px';
 this.resize();
 this.load();
}

zxcGalleryWrap.prototype={

 load:function(){
  for (var oop=this,ary=oop.ary,z0=0;z0<ary.length;z0++){
   if (ary[z0][1]&&ary[z0][1].width<40){
    this.to=setTimeout(function(){ oop.load(); },100);
    return;
   }
  }
  this.init();
 },

 init:function(){
  var ary=this.ary,lst=ary[ary.length-1][0];
  this.lst=lst.offsetLeft+lst.offsetWidth;
  this.addevt(this.slide,'mousedown','down');
  this.addevt(document,'mousemove','move');
  this.addevt(document,'mouseup','up');
  this.addevt(window,'resize','resize');
 },

 resize:function(){
  this.xy=this.os;
  this.slide.style.left=this.xy+'px';
  this.div.style.left=this.xy+'px';
 },

 down:function(e){
  document.onselectstart=function(event){ window.event.returnValue=false; }
  this.lstxy=[e.clientX,e.clientY][0];
  this.drag=this.slide;
  if (!window.event) e.preventDefault();
  return this.rtn(e);
 },

 move:function(e){
  if (this.drag){
   var o=this,mse=[e.clientX,e.clientY][0],max=o.bar.offsetWidth-o.slide.offsetWidth,xy=Math.min(Math.max(o.xy+=mse-o.lstxy,o.os),max);
   o.slide.style.left=xy+'px';
   o.div.style.left=(-o.lst+o.p.offsetWidth-o.os)*(xy-o.os+.1)/(max-o.os)+o.os+'px';
   o.xy=xy
   o.lstxy=mse;
   return this.rtn(e);
  }
 },

 up:function(e){
  document.onselectstart=null;
  this.drag=false;
 },

 rtn:function(e){
  if(e.stopPropagation){
   e.stopPropagation();
  }
  if (!window.event){
   e.preventDefault();
  }
  e.cancelBubble=true;
  e.cancel=true;
  e.returnValue=false;
  return false;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }

}

new zxcGalleryWrap({
 ID:'gallerywrap',
 Offset:200
});

/*]]>*/
</script>

</body>

</html>

**RemoteC** · 07-17-2012, 07:19 PM

Thank you a lot but this is not quite what i expected

First thing I discovered is

Code:

.scroll-pane {
  position:absolute;left:0px;top:0px;width:6100px;height:355px;
}

... this works only for the number of images in my example. If I add more images they wrap into a new line. I tried to make the value bigger and I don't see any problems, even if there are less images.

But I have some other problems with your script:
- Scrolling with keyboard isn't working
- Scrolling with horizontal mousewheel isn't working
- The end of the scrollbar doesn't exactly align with the end of the gallery - I think this isn't a big problem as you could add some kind of padding/margin/border ...

Isn't there any solution for jScrollPane? I mean it works either with the scrollbar position on the left or on the right side. If it ends correctly at the right edge (CSS: right:0

, it goes underneath the navigation bar on the left side. If it's position is beside the navigation bar (CSS: margin-left:130px

, it ends somewhere outside the browser window.

Thread: jQuery: jScrollPane goes beyond window

Thread Tools

Search Thread

jQuery: jScrollPane goes beyond window

Thanks!

Bookmarks

Bookmarks

Posting Permissions