Results 1 to 7 of 7

Thread: Slick Custom Scrollbar not working in ie

  1. #1
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slick Custom Scrollbar not working in ie

    1) Script Title: Slick Custom Scrollbar
    2) Script URL (on DD):http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

    3) Describe problem: It works in firefox, but not in ie. I can view the scrollbar in ie on the script url, but not when I upload the script.

    The problem it gives in ie is:

    Message: Expected identifier, string or number
    slickcustomscroll.js


    Message: Object doesn't support this property or method
    $( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical" } );

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <title>Untitled Document</title><style type="text/css">
        
      div[rel='scrollcontent1'] { width: 60%; height: 280px;}
      .scrollcontent1-content {  } 
      .scrollcontent1-bar { width: 11px; background: #fffeda; border-radius: 4px; box-shadow: inset 0px 0px 5px #444444; overflow: hidden; }
      .scrollcontent1-drag { background: #ad5134; border-radius: 4px; cursor: pointer; }
        div[rel='scrollcontent2'] { width: 300px; height: 300px; }
      .scrollcontent2-content { width: 999px; } 
      .scrollcontent2-bar { height: 15px; background: #ccc; border-radius: 5px; box-shadow: inset 0px 0px 5px #444444; overflow: hidden; }
      .scrollcontent2-drag { background: #425a8a; border-radius: 5px; cursor: pointer; }
      #contentwrap { padding: 5px; border: 1px #444444 solid; display: block; width: 300px; border-radius: 10px; }
      .scrollcontent1-content p, .scrollcontent2-content p {margin:0; padding:0}
        * html div#division { 
       width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); 
    }
    div#division { 
       max-width: 777px; 
    }
    div[rel='scrollcontent1'] { width: 250px; height: 200px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script src="js/slickcustomscroll.js">
    	/***********************************************
    	* Slick Custom Scrollbar script (c) Dynamic Drive (www.dynamicdrive.com)
    	* This notice MUST stay intact for legal use
    	* Visit http://www.dynamicdrive.com/ for this script and 100s more.
    	***********************************************/
    </script>
    <script type="text/javascript">
        $( document ).ready( function() {
            $( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical" } );
        });
        </script>
    </head>
    <body>  
    <div rel="scrollcontent1">
        <p id="paragraph-A"><b>Start of Paragraph A</b> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </p>
    </div>
    </body>
    </html>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Since you say this problem only occurs in IE when you upload the script, I still need the link to the problem page in order to diagnose it.

    Seems like it might be an encoding problem though. But to figure out how and if that's really the issue and how best to fix it, I need to see it live.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, not an encoding problem and not something that only happens when the script is live. It does however only happen in certain IE versions for which the script is not rated (IE 7 and less).

    Use this fixed version of the script:

    Attachment 4377
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That is excellent

    Thank you so much for your quick help

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
  •