PDA

View Full Version : 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/dynamicindex17/jquerycustomscrollbar/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/1327756/can-you-have-multiple-document-readyfunction-sections

vwphillips
01-31-2013, 02:45 AM
change your markup for the TD to


<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


$(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
<!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!

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.