Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jquery Plugin: perfect scrollbar issue

    So I am still learning Javascript but have been using CSS to build sites on and off for the past few years. Also, sorry if I posted this in the wrong forum; I am new here. I am having an issue with a plugin called perfect scrollbar, it can be found here: perfect-scrollbar .My issue is in getting the "ps-scrollbar-y" class to scroll on the "ps-scrollbar-y-rail" class. Apparently the values for height and width are supposed to change, however, they don't and I cant get the scrollbar to well... scroll. I also only want to only see the scrollbar-y not scrollbar-x. So here is how I have set it up:

    Source:

    Code:
    <head>
    <title>Groove Label</title>
    
        <meta http-equiv="content-type" content="text/html; charset=utf-8, initial-scale=1">
    <link href="CSS/Styles.css" rel="stylesheet" type="text/css">  
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Phone -->
    	<link href="CSS/Phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)">
    <!-- Tablet -->
    	<link href="CSS/Tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)">
    <!-- Desktop -->
    	<link href="CSS/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<link href="CSS/perfect-scrollbar.css" rel="stylesheet" type="text/css">
        <link href="CSS/easy-responsive-tabs.css">
        
    <script type="text/javascript" src="JavaScript/easyResponsiveTabs.js"></script>
    
    <script type="text/javascript" src="JavaScript/rollover.js"></script>
    
    <!-- scrollbar -->
    
    <script type="text/javascript" src="JavaScript/perfect-scrollbar.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="JavaScript/scrollbarsettings.js"></script>
    <script type="text/javascript" src="JavaScript/jquery.mousewheel.js"></script>
    
    <!-- slideshow -->
    
    <script type="text/javascript"  src="JavaScript/responsiveslides.min.js"></script>
    <script type="text/javascript" src="JavaScript/slidessettings.js"></script>
    
    
    
    </head>
    
      <div class="content" style="position:relative">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        	<div style="left: 0px; bottom: 3px; width: 600px; display: inherit;" class="ps-scrollbar-x-rail">
        		<div style="left: 0px; width: 281px;" class="ps-scrollbar-x">
        		</div>
        	</div>
        	<div style="top: 0px; right: 3px; height: 400px; display: inherit;" class="ps-scrollbar-y-rail">
        		<div style="top: 0px; height: 222px;" class="ps-scrollbar-y"></div>
        	</div>
    </div>
    CSS:

    Code:
    #sidebar_bottom {
    	position: fixed;
    		margin: 0px auto;
        	margin-top: 0px;
        	margin-right-value: auto;
        	margin-bottom: 0px;
        	margin-left-value: auto;
        	margin-left-ltr-source: physical;
        	margin-left-rtl-source: physical;
        	margin-right-ltr-source: physical;
        	margin-right-rtl-source: physical;
    	padding: 0px;
        	padding-top: 0px;
        	padding-right-value: 0px;
        	padding-bottom: 0px;
        	padding-left-value: 0px;
        	padding-left-ltr-source: physical;
        	padding-left-rtl-source: physical;
        	padding-right-ltr-source: physical;
        	padding-right-rtl-source: physical;
    	width: 442px;
    	height: 800px;
    	float: left;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 16px;
    	text-align: center;
    	bottom: -427px;
    	left: -427;
    	margin: auto;
    	overflow: hidden;
        	overflow-x: hidden;
        	overflow-y: hidden;
    }
    
    #sidebar_bottom .content {
    }
    Javascript:
    Code:
    $('#sidebar_bottom').perfectScrollbar();
    	function changeSize() {
            var width = parseInt($("#Width").val());
            var height = parseInt($("#Height").val());
    
            if(!width || isNaN(width)) {
                width = 420;
            }
            if(!height || isNaN(height)) {
                height = 500;
            }
            $("#sidebar_bottom").width(width).height(height);
    
            // update perfect scrollbar
            $('#sidebar_bottom').perfectScrollbar('update');
        }
        $(function() {
            $('#sidebar_bottom').perfectScrollbar();
        });
    For the sake of saving some time I did not post the full body, only the head tag is complete. Thanks for the help!

  • #2
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The issue was resolved, please close this thread.


  •  

    Posting Permissions

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