Results 1 to 10 of 10

Thread: Custom Scroll bar help and custom icon

  1. #1
    Join Date
    Jun 2010
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default Custom Scroll bar help and custom icon

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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, });
    });
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Jun 2010
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Jun 2010
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Attached Files Attached Files
    Last edited by vwphillips; 01-31-2013 at 05:11 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default

    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
    Thanks,

    Bud

  8. #8
    Join Date
    Jun 2010
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Thanks - they have been removed!
    Quote Originally Posted by ajfmrf View Post
    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

  9. #9
    Join Date
    Jun 2010
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Jun 2010
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Exclamation

    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.

Similar Threads

  1. Help with custom scroll bar
    By bizzy in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-20-2008, 01:39 PM
  2. Custom Scroll Bar
    By wuhaa in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-18-2006, 06:21 PM
  3. Custom scroll bar
    By Vinxent in forum HTML
    Replies: 5
    Last Post: 07-26-2006, 03:53 AM
  4. Page Scroller (aka Custom ScrollbHelp with custom scrollbar
    By chrishoo5 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-13-2006, 04:12 AM
  5. DD Custom Scroller icon position change?
    By Dance10Looks10 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-27-2005, 06:16 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •