We Keep Coding

mCustomScrollbar doesn't seem to work for horizontal scrollbars?

http://jsfiddle.net/3LQJG/2/
Above is a JSFiddle demonstrating the problem. I invoke the mCustomScrollbar on the parent of the content holder which has overflow in the x direction.
However, you will notice that it modifies the width of the container, and the scrollbar is inactive.
How do I correct this?

Look at this example. Look at source code of mCustomScrollbar demo page and you will see that horizontal scrollbar requires:
axis:'x'
advanced:{autoExpandHorizontalScroll:true} - I don't know what is it for, but without it scrollbar does not work
Also, I've prepared example of jQuery Scrollbar - just to look and try. Scrollbar style is based on container class. Different scrollbar types are available on demo page

Thank you for your correct answer! I was wondering why the horizontal scroll was not working.
I modified a little bit as follows:
$(function(){
var csObj = new Object();
//csObj.horizontalScroll=true;
csObj.setWidth=700;
csObj.setHeight=300;
csObj.verticalScroll=true;
csObj.axis="xy";
csObj.advanced={autoExpandHorizontalScroll:true};
csObj.scrollButtons = {
enable:true,
scrollType:"pixels",
scrollAmount:300
};
csObj.callbacks = {onTotalScroll:finishFunc};
//csObj.theme="dark";
$("#content_1").mCustomScrollbar(csObj);
});
I think this style is much easier for better understanding.

get the height of a another web page

I'm using the following code:
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
everything works fine. My problem is, I got about 8 scripts like that, and whenever I switch the content of the div, it doesn't do that smoothly, first of all, it clears the DIV and let me see that for about 0.7 seconds, after that, it loads ALL of the content within a second, and it's really disturbing my eye.
I thought about a solution, that I will get the height of the page I wanna load, and then set the DIV height to that height, and then load the info. Will it work? because, the LOAD function removes everything from the div, will it remove the height property as well?
generally, this is what im trying to achieve:
//GET TARGET'S HEIGHT
//SET #galleries TO THAT HEIGHT
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
I don't know how to get the target's height and set it. But anyways, will it work? or maybe someone has another solution for me?
Thanks in advance!

You aren't using the complete callback of load() which allows you to run code after content is loaded.
Try something like this:
$(function(){
/* hide first, then load*/
$('#galleries').hide().load("letters/index.php", function(){
/* new content now exists*/
$(this).slideDown()/* or fadeIn() or any other effect*/
});
});
SlideDown is not dependent on overall height so will smoothly move content below it down

JScrollPane Dynamic Height

The demo page referenced can be found here.
I'm trying to determine a way that on the click of a parent category (ex: Stone Tiles, Stone Sinks), that the JScrollPane would re-determine the current height and adjust as needed. Unfortunately, my attempts to do so have not worked yet.
I referenced the example here which provided the following function (to do a refresh)...
api.reinitialise();
I've tried to setup this function to be triggered by the category parents like so...
var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;
$("li.expandable.parent").click(function() {
api.reinitialise();
});
Unfortunately, while I was able to verify the click is being rendered, the function (api.reinitialize) doesn't appear to be working. I'm hoping that a fresh pair of eyes could point me in the right direction. :-)
Thanks!

The problem is that api.reinitialise executes immediately after the click, and the li element will not have expanded yet so when jscroll pane goes to to recalculate the height it gets it wrong. You can try adding a delay but the best solution would be to bind api.reinitialise() to an event that's triggered once the your list has finished expanding. I'm not sure how you're expanding the div within the li but if for instance it's using .animate, you could bind the api.reinitialise to the animation complete event.
Also noted that not all the parent li's have the class parent associated it to them. I would expect you would want the pane to reinitialize on the expansion and collapsing of all the main li elements.
Hope that helps !
Cheers :)

What you can do is have your inner divs expanded by default, and then close them with jquery, rather than in the CSS directly.
So instead of doing this:
.mydiv.closed {display:none}
do this in your jquery after the elements are drawn to the page:
$('.mydiv.closed').hide();
This will load the jscrollpane at the necessary height, and then collapse what you want to be initially hidden.

How to get the visible dimensions of a scrollable div?

I am trying to get the visible height of a div and I can't find the way to do it.
http://jsfiddle.net/MVupa/1/
Even the library fracs:
http://larsjung.de/fracs/
Does not seem to give me the right number:
http://jsfiddle.net/MVupa/2/
Any ideas?
(End goal is to adjust an element max-height dynamically, depending on the window height.)

this is what i came up with: jsFiddle
$('.height').text($('.inner').height())
$('.scrollHeight').text($('.inner')[0].scrollHeight)
$('.inner').height($('.outer').height());
$('.visibleHeight').text($('.inner').height());
and you can set it to a $(window)resize(); function.

How can I auto-scroll as content is added to a div?

I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?

You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/

I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.