JScrollpane on ajax powered DIV

**kimikai** · 03-28-2014, 11:26 AM

I am using this slide and fade content for my website, basically you click on a menu button and it loads a div from an external page into the div thats on the same page as the menu (kinda like a one page website). This works perfectly, but the content of the divs that are loaded are sometimes kinda long, so I wanted to put a custom scrollbar on it. For some reason I cant seem to get the scrollbar on it tho, even when using reinitialise its still not working

Dont know if anyone could tell me whats wrong with this...

The one page website code:

Code:

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slide-fade-content.js"></script>
<!--Jscrollpane-->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<!--Jscrollmousewheel-->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!--Jscrollstyle-->
<link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
<style>
body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
}

p {
	color: #fff;
}

#container {
	width:100%;
	height: 100%;
	background: url(images/background.png) repeat-y fixed #000;
}

#wrapper {
	width: 960px;
	height: 100%;
	margin: 0px auto;
}

#left {
	width:320px;
	height:100%;
	background: #121212;
	margin-left: 10px;
	float: left;
	border: 10px double black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#menu {
	width: 300px;
}

a {
	color: #fff;
	text-decoration: none;
	font-size:18px;
	font-style: oblique;
}

a:hover {
	background: #00d6f6;
}

#footer {
	width: 320px;
	position: absolute;
	bottom: 15px;
	text-align: center;
	color: #fff;
}

#content {
	width: 600px;
	height: 100%;
	margin-left: 30px;
	float: left;
	background: url(images/background-left1.png) bottom left no-repeat, url(images/background-left2.png) bottom right no-repeat, url(images/background-left4.png) top left no-repeat, url(images/background-left3.png) top right no-repeat, url(images/logobottom.png) bottom center no-repeat;
}

#ajax {
	margin-top: 113px;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.scroll-pane {
	overflow: visible;
}
</style>
<script>
	$(function(){
    $('#menu a').click(function () {
        $('#menu a').css('background', 'none');
     $(this).css('background', '#00d6f6');
     });
 });
</script>
</head>

<body>
<div id="container">
    <div id="wrapper">
        <div id="left">
        	<center><img src="images/logo.png"></center>
			<div id="menu">
            	<center><a class="more" href="#first-item"><b>Portfolio</b></a>&nbsp;&nbsp;<a class="more" href="#second-item"><b>About Me</b></a>&nbsp;&nbsp;<a class="more" href="#third-item"><b>Services</b></a><br></center>
                <center><a class="more" href="#fourth-item"><b>Contact</b></a></center>
            </div>
            <div id="footer">© DNDesign 2014</div>
        </div>
        <div id="content">
        	<div id="ajax" class="scroll-pane"></div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
$(window).load(function() {
    $('.scroll-pane').jScrollPane();
});
</script>

The code for the slide fade content:

Code:

/* jQuery Color Fade v0.1 * Released under the CC BY 3.0 License (http://creativecommons.org/licenses/by/3.0/) * https://github.com/matthewbj/jQuery-Color-Fade */
(function(b){var c={init:function(a){var c=b.extend({fadeColor:"#00d6f6",fadeTime:800,delayTime:600},a),d={position:"relative","z-index":1},e={height:"100%",width:"100%","background-color":c.fadeColor,position:"absolute",top:0,left:0,"z-index":"-1"};return this.each(function(a){b(this).css(d).append('<div id="colorFadeDiv'+a+'" class="colorFadeClass"></div>');b("#colorFadeDiv"+a).css(e).delay(c.delayTime).fadeOut(c.fadeTime)})},refade:function(a){a=b.extend({fadeColor:"#00d6f6",fadeTime:800,delayTime:600},
a);b(this).find(".colorFadeClass").css("background-color",a.fadeColor).show().delay(a.delayTime).fadeOut(a.fadeTime)}};b.fn.colorFade=function(a){if(c[a])return c[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof a||!a)return c.init.apply(this,arguments);b.error("Method "+a+" does not exist on jQuery.colorFade")}})(jQuery);

// slide & fade content
jQuery(document).ready(function($) {
	$('.more').on('click', function() {
		var href = $(this).attr('href');
		if ($('#ajax').is(':visible')) {
			$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
		}
		$('#ajax').css({ display:'block' }).animate({ height:'450px' },function() {
			$('#ajax').html('<img id="loader" src="loader.gif">');
			$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); // http://loadinfo.net/
			$('#ajax').load('slide-fade-content.html ' + href, function() {
				$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#00d6f6' });
			});
		});
	});
});

The page with the divs that get loaded into the ajax div:

Code:

<div id="load">
	<div id="first-item">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
	</div>
	<div id="second-item">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
	</div>
	<div id="third-item">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
	</div>
	<div id="fourth-item">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
	</div>
</div>

I hope this is not impossible to do? =x
also: the link to the JScrollPane webpage jscrollpane.kelvinluck.com

**jscheuer1** · 03-29-2014, 03:07 PM

What I would try is (addition highlighted):

Code:

jQuery(document).ready(function($) {
	$('.more').on('click', function() {
		var href = $(this).attr('href');
		if ($('#ajax').is(':visible')) {
			$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
		}
		$('#ajax').css({ display:'block' }).animate({ height:'450px' },function() {
			$('#ajax').html('<img id="loader" src="loader.gif">');
			$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); // http://loadinfo.net/
			$('#ajax').load('slide-fade-content.html ' + href, function() {
				$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#00d6f6' });
				$('.scroll-pane').jScrollPane();
			});
		});
	});
});

The browser cache may need to be cleared and/or the page refreshed to see changes.

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.

**kimikai** · 03-31-2014, 12:49 PM

Originally Posted by jscheuer1

What I would try is (addition highlighted):

Code:

jQuery(document).ready(function($) {
	$('.more').on('click', function() {
		var href = $(this).attr('href');
		if ($('#ajax').is(':visible')) {
			$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
		}
		$('#ajax').css({ display:'block' }).animate({ height:'450px' },function() {
			$('#ajax').html('<img id="loader" src="loader.gif">');
			$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); // http://loadinfo.net/
			$('#ajax').load('slide-fade-content.html ' + href, function() {
				$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#00d6f6' });
				$('.scroll-pane').jScrollPane();
			});
		});
	});
});

Hi John,

I've tried your suggestion but unfortunately it didn't work.
I've uploaded the page online so this is the link: http://dndesign.comuf.com/
As soon as you click on the links on the left side (Portfolio etc.) it loads the content in the ajax div.
Theres no scrollbar visible though. As soon as I get rid of the JScrollPane it does show the regular browser scrollbar on the div.

I hope this helps?

Just in case, this is the page that contains the divs that are loaded within the ajax div: http://dndesign.comuf.com/slide-fade-content.html
its just a blank html doc tho...

**kimikai** · 03-31-2014, 01:25 PM

I've been playing around a bit more with this scrollbar... and I've figured one thing out...but I'm hiccuping against another problem now.
I'm guessing I know where the problem is (I'm a total JScript noob...) but right now... the custom scrollbar works once.
Ive changed this:

Code:

<script type="text/javascript">
$(window).load(function() {
    $('.scroll-pane').jScrollPane();
});
</script>

to this:

Code:

<script>
var element = $('#ajax').jScrollPane(getContentPane());
var api = element.data('jsp');
$(window).load(function() {
    $('.scroll-pane').jScrollPane();
});
</script>

On the first link you click on, it does show the custom scrollbar, but as soon as you click on the next link it wont show the custom scrollbar anymore.
I'm guessing it has something to do with the $window(.load) part... but I'm at a loss as to what i should change that to...
because removing the $window(.load) doesnt make a change...

**jscheuer1** · 03-31-2014, 02:23 PM

On the first link you click on, it does show the custom scrollbar

No it doesn't. Well it did, but then I think you changed something. According to the documentation, you want to use reinitialize after gaining a reference to the api. That would (again, according to the documentation) look like so:

Code:

<script type="text/javascript">
var myjsp;
$(window).load(function() {
    myjsp = $('.scroll-pane').jScrollPane();
    myjsp = myjsp.data('jsp');
});
</script>

Code:

jQuery(document).ready(function($) {
	$('.more').on('click', function() {
		var href = $(this).attr('href');
		if ($('#ajax').is(':visible')) {
			$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
		}
		$('#ajax').css({ display:'block' }).animate({ height:'450px' },function() {
			$('#ajax').html('<img id="loader" src="loader.gif">');
			$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); // http://loadinfo.net/
			$('#ajax').load('slide-fade-content.html ' + href, function() {
				$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#00d6f6' });
				myjsp.reinitialise();
			});
		});
	});
});

If that doesn't work, there is always a destroy function which might be able to be used. Presumably, once a jsp instance is destroyed, a new one within the same element could be initialized. Let's see if the reinit works first.

**kimikai** · 03-31-2014, 02:38 PM

Yes I think I was changing something when you were looking.

I've added the first bit of code youve suggested within the script tags that i have on the index page, and the reinitialise in the slide-fade js file...
It does show a scrollbar now, but it doesnt show the custom scrollbar anymore, I dont know if im doing something wrong but...how i did it, its a no go

But in my way of thinking, which might be way too simple,
It works once by editing the bit of code on the index page with getContentPane().
Wouldnt it be possible to somehow expand that bit to reinit aswell?

Edit: Ive changed back the code to the way it was before your suggestion, and as of right now it doesn't show the custom scrollbar anymore at all
I don't think Ive changed anything wrong...so it seems its back to the start...

**jscheuer1** · 04-02-2014, 04:05 PM

OK, I have it working locally. I will try to explain what to do so that you can follow. There was a problem in IE 11 so I had to change the markup (got rid of the <b> tags in the menu and added style to the .more selector to keep them bold. While I was at it, I moved the highlighting of the menu items to the click function in the slide-fade-content.js file. Also, by way of explanation, the jScrollPane script did not appear to work as advertised in its documentation, so I did a little jQuery work to establish a reference to the .scroll-pane div, clone it, and replace it with its clone each time new content was loaded into it.

What I did -

Change:

HTML Code:

            	<center><a class="more" href="#first-item"><b>Portfolio</b></a>&nbsp;&nbsp;<a class="more" href="#second-item"><b>About Me</b></a>&nbsp;&nbsp;<a class="more" href="#third-item"><b>Services</b></a><br></center>
                <center><a class="more" href="#fourth-item"><b>Contact</b></a></center>

to:

HTML Code:

            	<center><a class="more" href="#first-item">Portfolio</a>&nbsp;&nbsp;<a class="more" href="#second-item">About Me</a>&nbsp;&nbsp;<a class="more" href="#third-item">Services</a><br></center>
                <center><a class="more" href="#fourth-item">Contact</a></center>

I got rid of:

Code:

<script>
	$(function(){
    $('#menu a').click(function () {
        $('#menu a').css('background', 'none');
     $(this).css('background', '#00d6f6');
     });
 });
</script>

I added:

Code:

.more {
	font-weight: bold;
}

to the end of the on page style section.

I changed:

Code:

<script>
var element = $('#ajax').jScrollPane(getContentPane());
var api = element.data('jsp');
$(window).load(function() {
    $('.scroll-pane').jScrollPane();
});
</script>

to:

Code:

<script>
var element = $('.scroll-pane');
var clonedel = element.clone();
$(new Image()).attr('src', 'loading.gif');
$(window).load(function() {
	$('.more').eq(0).trigger('click');
});
</script>

The highlighted part is only needed if you want the first item (Portfolio) to load on page load.

I changed (in slide-fade-content.js):

Code:

jQuery(document).ready(function($) {
	$('.more').on('click', function() {
		var href = $(this).attr('href');
		if ($('#ajax').is(':visible')) {
			$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
		}
		$('#ajax').css({ display:'block' }).animate({ height:'450px' },function() {
			$('#ajax').html('<img id="loader" src="loader.gif">');
			$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); // http://loadinfo.net/
			$('#ajax').load('slide-fade-content.html ' + href, function() {
				$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#00d6f6' });
			});
		});
	});
});

to:

Code:

jQuery(document).ready(function($) {
	$('.more').on('click', function() {
		element.replaceWith(clonedel);element = $('.scroll-pane');clonedel = element.clone();
		$('.more').css({backgroundColor: '#121212'});
		$(this).css({backgroundColor: '#00d6f6'});
		var href = $(this).attr('href');
		if ($('#ajax').is(':visible')) {
			$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
		}
		$('#ajax').css({ display:'block' }).animate({ height:'450px' },function() {
			$('#ajax').html('<img id="loader" src="loader.gif">');
			$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); // http://loadinfo.net/
			$('#ajax').load('slide-fade-content.html ' + href, function() {
				$('#ajax').hide().fadeIn('slow', function(){element.jScrollPane();}).colorFade({ 'fadeColor': '#00d6f6' });
			});
		});
	});
});

I put a loader.gif (right click and 'Save As'):

Name: loader.gif
Views: 1258
Size: 673 Bytes

in the same folder as the page.

That's it.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Any problems or questions, let me know.

**kimikai** · 04-02-2014, 04:45 PM

Hi John, I have no time to try it right now, but i will let you know asap
Thanks for the help so far!

**kimikai** · 04-03-2014, 02:01 PM

I changed all the coding and it works like a charm locally, so I'm guessing there shouldn't be a problem when its put online either.
So for now, it seems like all is set.
Thanks alot for all the help!