Custom Scroll bar help and custom icon

**katebellami** · 01-30-2013, 05:05 PM

1) Script Title: :: jQuery Custom Scrollbar

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lbar/index.htm

3) Describe problem: I installed the script, but it doesn't appear to be working. I would also like to know if there is a way to limit the length of the scroll bar so that an icon can be used, rather than an actual bar. Thanks!

Here is a link to the page:
http://www.eac-designs.com/temp/about-scroll.html

**Beverleyh** · 01-30-2013, 11:06 PM

You appear to be using 2 jQuery libraries - you only need one. Try moving the Google hosted one up the page in place of the other one (the externally hosted script tends to be better for loading/cache benefits)

You might also need to combine the statements in $(document).ready(function() {
http://stackoverflow.com/questions/1...ction-sections

**vwphillips** · 01-31-2013, 02:45 AM

change your markup for the TD to

Code:

<td valign="top" class="text" width="638">
<div style="position:relative;left:0px;" >
<img src="http://www.eac-designs.com/temp/images/erica-biophoto.jpg" style="border:solid; border-width:2px; border-color:#918F8F; margin-right:20px" margin-left:0px; align="left" />

<div style="position:absolute;left:330px;" >
<div id="divMain1" class="slickscroll" style="left:300px" >
<br />EAC Designs was created in response to the void Erica Alvarez Castro witnessed upon her arrival to Hoboken, NJ. In a place where new development was abundant, complementary design was lacking all around. And seeing the serious need for a full-service design firm - one that came on board towork with clients while they were still dreaming of their forever home - led to the creation of the firm. Being versed in Architecture, Interior Design and Real Estate, EAC Designs has proven to be an asset to clients, and fellow professionals alike.
<p>In large part this is also due to Erica’s belief that “design is the search for a magical balance between art &amp; business; concept &amp; detail; designer &amp; client.”
</p>
<p>In large part this is also due to Erica’s belief that “design is the search for a magical balance between art &amp; business; concept &amp; detail; designer &amp; client.”
</p>
<img src="http://www.eac-designs.com/temp/images/eac-sig.png" style="z-index:100; position:relative; bottom:25px; right:-50px"/>
</div>
</div>
</div>
</td>

and remove the comer in red

Code:

$(document).ready(function () {
	scroll1 = $('#divMain1').slickscroll({ "verticalscrollbar": true, });
});

**katebellami** · 01-31-2013, 02:16 PM

Thanks! Unfortunately neither of these solutions did the trick. The text now overflows outside the div and no scrolling is enabled. I also tried adding an overflow:auto, but that didnt work either. And I moved the google jquery library to also replace the one at the top of the page...I think I read that correctly? The page is now located at http://www.eac-designs.com/temp/about-scroll2.html

**katebellami** · 01-31-2013, 02:36 PM

I posted the page again here too with the code cleaned up (removed the other scripts that arent needed from the <head>). Still not working...
http://www.eac-designs.com/temp/about-scroll3.html

**vwphillips** · 01-31-2013, 03:46 PM

see attached zip

or

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">
	<head>
	<link rel="icon" href="http://www.madisonandmi.com/EAC/favicon.ico" type="image/x-icon" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>EAC Designs | Erica Alvarez | Interior Designer | NYC | NJ</title>
	<meta name="description" CONTENT="Erica Alvarez" />
	<meta name="keywords" CONTENT="Erica Alvarez" />
	<link href="http://www.eac-designs.com/temp/style/style.css" rel="stylesheet" />


	<meta property="og:title" content="BE Event Productions" />

<meta property="og:type" content="website" />

<meta property="og:url" content="http://www.BE-eventproductions.com" />

<meta property="og:image" content="http://www.BE-eventproductions.com/images/BE-logo.png" />

<meta property="og:site_name" content="BE Event Productions" />

<meta property="fb:admins" content="831950129" />


<link href="http://www.eac-designs.com/temp/Styles/slickscroll.css" rel="stylesheet" type="text/css" />

<style type="text/css">
/*<![CDATA[*/
.bar {
  width:20px;background-Color:#FFFFCC;
}

.slide {
  width:20px;height:50px;background-Color:#FFCC66;cursor:move;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Custom Scroll Bar (31-January-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcCustomScrollBar={

 init:function(o){
  var id=o.ID,p=document.getElementById(id),c=p.getElementsByTagName('DIV')[0],w=p.offsetWidth,h=p.offsetHeight,bar=document.createElement('DIV'),s=bar.cloneNode(false),bw;
  c.style.position=s.style.position=bar.style.position='absolute';
  bar.style.height=h+'px';
  bar.className=o.ScrollBarClass;
  s.className=o.SlideClass;
  c.style.top=c.style.left=s.style.top=s.style.left=bar.style.top='0px';
  bar.appendChild(s);
  p.appendChild(bar);
  bw=bar.offsetWidth;
  c.style.width=bar.style.left=w-bw+'px';
  c.style.height='auto';
  p.style.overflow='hidden';
  zxcCustomScrollBar['zxc'+id]=o={
   slide:s,
   cont:c,
   smax:h-s.offsetHeight,
   cmin:-c.offsetHeight+h,
   cr:(h-s.offsetHeight)/(-c.offsetHeight+h),
   d:false
  }
  o.cr=o.smax/o.cmin;
  this.addevt(s,'mousedown','down',o);
  this.addevt(document,'mouseup','up',o);
  this.addevt(document,'mousemove','move',o);
 },

 down:function(e,o){
  document.onselectstart=function(event){ window.event.returnValue=false; }
  o.d=o.slide;
  o.my=e.clientY;
  o.y=parseInt(o.d.style.top);
  return this.rtn(e);
 },

 move:function(e,o){
  if (o.d){
   var my=e.clientY,y=Math.min(Math.max(o.y-o.my+my,0),o.smax);
   o.d.style.top=y+'px';
   o.cont.style.top=Math.max(Math.min(y/o.cr,0),o.cmin)+'px';
   return this.rtn(e);
  }
 },

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

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

 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); });
  }
 }


}
/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){
 zxcCustomScrollBar.init({
  ID:'divMain1',
  ScrollBarClass:'bar',
  SlideClass:'slide'
 });
}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>



	</head>

<body margin="0px">
<br />
<center>

<div class="main_contain">

<div class="inside_contain">

<table cellpadding="0">
<tr height="395px">
<td valign="top" width="132">
<a href="http://www.eac-designs.com"><img src="http://www.eac-designs.com/temp/images/eac-logo.png" style="border:solid; border-color:#918F8F; border-width:2px; margin:0px;" /></a>


	<center>

	<table height="250px" width="132"><tr><td>
	<p><a href="index.html">HOME</a>
	</p><p>
	<a href="about.html">ABOUT</a>
	</p><p>
	<a href="portfolio.html">PORTFOLIO</a>
	</p><p>
	<a href="http://eac-designs.blogspot.com/" target="newwin">BLOG</a>
	</p><p>
	<a href="contact.html">CONTACT</a>
	</p>
	</td></tr></table>
	</center>

</td>

<td width="15px" valign="top">
&nbsp;
</td>

<td valign="top" class="text" width="638">

<img src="http://www.eac-designs.com/temp/images/erica-biophoto.jpg" style="border:solid; border-width:2px; border-color:#918F8F; margin-right:20px" margin-left:0px; align="left" />
<div id="divMain1" class="slickscroll" style="position:relative;height:380px; overflow:auto">
 <div >
<br />EAC Designs was created in response to the void Erica Alvarez Castro witnessed upon her arrival to Hoboken, NJ. In a place where new development was abundant, complementary design was lacking all around. And seeing the serious need for a full-service design firm - one that came on board towork with clients while they were still dreaming of their forever home - led to the creation of the firm. Being versed in Architecture, Interior Design and Real Estate, EAC Designs has proven to be an asset to clients, and fellow professionals alike.
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>In large part this is also due to Erica?s belief that ?design is the search for a magical balance between art &amp; business; concept &amp; detail; designer &amp; client.?
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>In large part this is also due to Erica?s belief that ?design is the search for a magical balance between art &amp; business; concept &amp; detail; designer &amp; client.?
</p>
</div>
</div>

</td>
</tr>

<tr>
<td colspan="3" class="footer">

	<table><tr>

	<td style="text-align:left" width="160px">&nbsp; Erica Alvarez Castro</td>
	<td>|</td>
	<td style="text-align:center" width="110px">Architecture</td>
	<td>|</td>
	<td style="text-align:center" width="125px">Interior Design</td>
	<td>|</td>
	<td style="text-align:center" width="125px">Real Estate</td>
	<td>|</td>
	<td style="text-align:center" width="110px">New Jersey</td>
	<td>|</td>
	<td style="text-align:right" width="140px">By: <a href="http://www.madisonandmi.com" target="newwin">Madison & Mi</a>&nbsp;

	</td></tr></table>

</td>
</tr>
</table>


</div>
</div>



</center>


<script src="chrisdomroll.js">

/****************************************************
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/

</script>
</body>
</html>

**ajfmrf** · 02-01-2013, 02:01 AM

both of these pages do not exist:

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>

I got a 404 error

**katebellami** · 02-01-2013, 08:46 PM

Thanks - they have been removed!

Originally Posted by ajfmrf

both of these pages do not exist:

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>

I got a 404 error

**katebellami** · 02-01-2013, 08:51 PM

Thanks! This works in this instance, but what if I want to create an actual icon, rather than a bar of color? I would like to stick to the script - just not sure why it isn't working.

**katebellami** · 02-04-2013, 07:43 PM

actually noticed another issue with this solution - you cannot use the mouse scroller to scroll up and down. It forces you to actually click and drag the scroller. please help!! I would really love to figure out why this script isnt working and if I can use a custom icon (rather than a bar that changes length) as the scroller.

Thread: Custom Scroll bar help and custom icon

Thread Tools

Search Thread

Custom Scroll bar help and custom icon

Similar Threads

Help with custom scroll bar

Custom Scroll Bar

Custom scroll bar

Page Scroller (aka Custom ScrollbHelp with custom scrollbar

DD Custom Scroller icon position change?

Bookmarks

Bookmarks

Posting Permissions