CODEWITHSUNDEEP
jqueryhtmlcssjquery-plugins
Solace
Solace

Reputation: 9020

Why doesn't this JQuery-Custom-Content-Scroller work for me when I have followed all instructions in their tutorial?

Find the JSFiddle here.

I am trying to use the malihu JQuery Custom Scrollbar plugin, and I have followed the requirements and steps (atleast I think so) as follows, but it does not seem to work for me. How do I get this to work?

  1. Extract and upload jquery.mCustomScrollbar.concat.min.js, jquery.mCustomScrollbar.css and mCSB_buttons.png to your web server

I did that, and just cross checked.

  1. Include jquery.mCustomScrollbar.css in the head tag your HTML document...Include jQuery library... and jquery.mCustomScrollbar.concat.min.js in the head tag...

I did that.

  1. The element(s) you want to add scrollbar(s) should have the typical CSS properties of an overflowed block which are a height (or max-height) value, an overflow value of auto (or hidden) and content long enough to require scrolling.

The element to which I am applying the scrollbars is .content-text which occurs twice. It has height: 100%; overflow: auto;, and a bunch of text where the normal scroll bar does appear.

  1. After files inclusion, call mCustomScrollbar function on the element selector you want to add the scrollbar(s).

I did that first by adding the script and changing the selector in the script.js which gave me a bunch of JSLint errors. So I tried to add the script to the end of the document before the body tag as you can see in the code. But No gain!

  1. Add the class mCustomScrollbar to any element you want to add custom scrollbar(s) with default options.

I added the mCustomScrollbar to the .content-text element, as you can see in the code.

CODE:

(function($){
    $(window).load(function(){

        $("content-text").mCustomScrollbar({
            theme:"minimal"
        });

    });
})(jQuery);

/*
Produces the following JSLint errors:

11	Expected exactly one space between 'function' and '('.	(function($){
11	Expected exactly one space between ')' and '{'.	(function($){
11	Missing space between ')' and '{'.	(function($){
12	Missing 'use strict' statement.	$(window).load(function(){
12	Expected exactly one space between 'function' and '('.	$(window).load(function(){
12	Expected exactly one space between ')' and '{'.	$(window).load(function(){
12	Missing space between ')' and '{'.	$(window).load(function(){
15	Missing space between ':' and 'minimal'.	theme:"minimal"
19	Move the invocation into the parens that contain the function.	})(jQuery);
19	'jQuery' was used before it was defined.	})(jQuery);
*/
.wrapper {
    height:100%;
    width: 95%;
    margin: 10px auto;
    display: table;
    background-color:teal;
}

.cell {
    display:table-cell;
    vertical-align: top;
}

.left-cell {
    width:50%
}

.middle-cell {
    height:100%;
    background-color: white;
    width:1.5px;
    font-size: 0;
    box-shadow: 0px 50px 10px black;
    -moz-box-shadow: 0px 50px 10px black;
    -webkit-box-shadow: 0px 50px 10px black;
}

.right-cell {
   /* width:50%*/ /*Commenting b/c both right and left 50, 50 squish and vanish the middle between them*/
    background-color: blueviolet
}



.step-container {
    max-height: 200px;
    font-size: 0;
}

.right-cell .step-container {
    margin-top:100px;
}



.content-box {
    display: inline-block;
    width: 170px;
    height: 200px;
    /*border: 5px solid blue;*/
    font-size: 0;
}

.content-box .content-image {
    width:35%;
    height:100%;
    background-size: cover;
    display: inline-block
}

.content-box .content-text {
    background-color: rgb(255, 255, 255);  
    color: #1c1a1a;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 100;
    overflow:auto;
    display: inline-block;
    width:65%;
    height:100%;
}

.notch-outer-container {
    display:inline-block;
}

.left-cell .notch-outer-container {
    margin-right: 3px;
}

.right-cell .notch-outer-container {
    margin-left: 3px;
}

.notch-inner-container {
    height:200px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.notch {
    width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}

.right-face-notch {
	border-left: 15px solid brown;
}

.left-face-notch {
    border-right: 15px solid brown;
}

.number-outer-container {
    display:inline-block;
    position:absolute;
}

.left-cell .number-outer-container {
    left:47.5%;
}

.right-cell .number-outer-container {
    right:48%;
}

.number-inner-container {
    height:200px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.number-banner {
    width:30px;
    height:30px;
    background-color:crimson;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px;
}

.right-cell .number-outer-container {
    /*display: none;*/
}
<link href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- NOTE: THE INSTRUCTIONS AT http://manos.malihu.gr/jquery-custom-content-scroller/#expand-info DO INSTRUCT TO ALSO LOAD THE IMAGE AT "//malihu.github.io/custom-scrollbar/mCSB_buttons.png" BUT THIS SO TOOL DOES NOT LET ME LINK TO AN EXTERNAL IMAGE. 

i HAVE ADDED THAT IN THE JSFiddle I HAVE LINKED IN THE QUESTION. SO CHECK THAT-->


<!DOCTYPE>

<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" href="jquery.mCustomScrollbar.css" />
    <script src="javascript/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
    
<body>
    <div class="wrapper" >
        
        
        
        <div class="left-cell cell" align="left">
            <div class="step-container">
                <div class="content-box">
                        <div class="content-image" style="background-image: url(http://simeonhookphotography.com/wp-content/gallery/favorites/norway-countryside-to-bergen.jpg);"></div>
                        <div class="content-text mCustomScrollbar"
                             ><h6>What is Lorem Ipsum</h6><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
                    </div>

                
                <div class="notch-outer-container">
                    <div class="notch-inner-container">
                        <div class="right-face-notch notch"></div>
                    </div>
                </div>
                

                <div class="number-outer-container">
                    <div class="number-inner-container">
                        <div class="number-banner"></div>
                    </div>
                </div>
            </div>
        </div>
        
        
        
        
        <div class="middle-cell cell"></div>
        
        
        
        
        <div class="right-cell cell" align="right" >
            <div class="step-container">
                <div class="number-outer-container">
                    <div class="number-inner-container">
                        <div class="number-banner"></div>
                    </div>
                </div>

                <div class="notch-outer-container">
                    <div class="notch-inner-container">
                        <div class="left-face-notch notch"></div>
                    </div>
                </div>

                <div class="content-box">
                    <div class="content-text mCustomScrollbar"><h6>What is Lorem Ipsum</h6><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
                    <div class="content-image" style="background-image:url(http://www.penttila-gardens.com/activities/walking/countryside/images/02-harvest.jpg)">
                    </div>
                </div>
                
            </div>
         </div>
    
    
    </div>
    
    <script>
		(function($){
			$(window).load(function(){
				
				$("content-text").mCustomScrollbar({
					theme:"minimal"
				});
				
			});
		})(jQuery);
	</script>
</body>

</html>

EDIT:

i added the following in the end of the document just before closing the <body> tag: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="javascript/jquery-2.1.3.js"><\/script>')</script>

    <!-- custom scrollbar plugin -->
    <script src="../jquery.mCustomScrollbar.concat.min.js"></script>

    <script>
        (function($){
            $(window).load(function(){

                $("content-text").mCustomScrollbar({
                    theme:"minimal"
                });

            });
        })(jQuery);
    </script>

But still getting the following errors in Chrome:

enter image description here

And the scroll-bars don't appear in firefox.

Upvotes: 0

Views: 3005

Answers (2)

Wakeel Kehinde Ige
Wakeel Kehinde Ige

Reputation: 1

Set a particular value for the height i.e change the 100% to something like 600px;

 .content-box .content-text {
        background-color: rgb(255, 255, 255);  
        color: #1c1a1a;
        font-family: sans-serif;
        font-size: 15px;
        font-weight: 100;
        overflow:auto;
        display: inline-block;
        width:65%;
        height:100%; //assign a particular value to the height, say 600px;
}

Upvotes: 0

Mihai Varga
Mihai Varga

Reputation: 88

I don't think you're loading jquery. There are a lot of examples in the github repository, you can start from there.

Have a look at this: https://github.com/malihu/malihu-custom-scrollbar-plugin/blob/master/examples/callbacks_example.html#L89 

    <!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/minified/jquery-1.11.0.min.js"><\/script>')</script>

Upvotes: 1

Related Questions